1. AJAX įvadas. AJAX principai:

Size: px

Start display at page:

Download "1. AJAX įvadas. AJAX principai:"

Ashley Bruce
5 years ago
Views:

1 1. AJAX įvadas AJAX principai: Naršyklė talpina programą (application), ne turinį. Serveris siunčia duomenis ne turinį. Asinchroniškumas - asinchroninio request/response siuntimo pagrindinis principas - vartotojas gauna du pranešimus: kai gija (thread) paleidžiama ir kai gijos darbas baigiamas (gijos veikimo metu vartotojui netrukdoma). Vartotojo darbas su aplikacija yra nenutrūkstamas. AJAX panaudojimo pavyzdžiai: GMail Google Maps (maps.google.com) (Yahoo) Google suggest... AJAX elementai: JavaScript Cascading Style Sheets (CSS) Document Object Model (DOM) XMLHttpRequest object CSS, DOM ir JavaScript bendrai vadinami Dynamic HTML (DHTML). 1

2 2. CSS Stiliaus taisyklę sudaro dvi dalys: selector elementas, kuriam taikomas stilius style declaration stiliaus savybė, kuri bus taikoma. Pvz.: h1 { color: red CSS selectors Be to, kad galima nurodyti stilių konkrečiam HTML tagui, galima taisyklės taikymą riboti, prilausomai nuo konteksto. Konteksto nurodymo būdai: HTML tag tipas, Nurodytas class type, Pagal elemento unikalų ID. Pvz.: Taikoma tik tiems <h1>, kurie yra <div> viduje: div h1 { color: red; Pvz.: Aprašome stiliaus klasę (kad tai stiliaus klasė, rodo pirmasis taškas, stiliaus klasės pavadinimas yra callout):.callout { border: solid blue 1px; background-color: cyan Apibrėžtą stiliaus klasę callout, galima taikyti elemetui: <div>normalus tekstas</div> <div class='callout'>callout stiliaus tekstas</div> 2

3 Pvz.: Elementui galima priskirti daugiau nei vieną klasę:.callout { border: solid blue 1px; background-color: cyan.loud { color: orange <div class='loud'>tekstas loud stiliaus</div> <div class='callout'>tekstas callout stiliaus</div> <div class='callout loud'>tekstas (stili ų kombinacija)</div> Galima kombinuoti klases su element-based taisyklėmis, tada stiliaus klasė bus taikoma tik nurodytiems tagams. Pvz.: Taikoma <span> tag'ams, kurių klasės atributas yra highlight: span.highlight { background-color: yellow Pvz.: Taikoma <span> tagams, kurių klasės atributas yra highlight ir kurie yra <div> tago su klase prose viduje. div.prose span.highlight { background-color: yellow Galima nurodyti taisykles, kurias taikyti tik elementui su duotu ID kad tai elemento id nurodoma simboliu #. Pvz.: Stilius taikomas tik elementui, kurio id= close : #close { color: red CSS leidžia nurodyti stilių pagal pseudo-selektorius. Pvz.: Taikoma virš linko užvedus pelytę: a:hover{ color:yellow; Pvz.: Taikoma visoms pirmosioms raidėms: *:first-letter { font-size: 500%; color: red; float: left; 3

4 CSS savybės (properties).robotic{ font-size: 14pt; font-family: courier new, courier, monospace; font-weight: bold; color: gray; arba:.robotic{ font: bold 14pt courier new, courier, monospace; color: gray;.padded{ padding: 4px;.eccentricPadded { padding-bottom: 8px; padding-top: 2px; padding-left: 2px; padding-right: 16px; margin: 1px; visibility:hidden arba display:none. 4

5 CSS pavyzdys window.html <html> <head> <link rel='stylesheet' type='text/css' href='window.css' /> </head> <body> <div class='window'> <div class='titlebar'> <span class='titlebutton' id='close'></span> <span class='titlebutton' id='max'></span> <span class='titlebutton' id='min'></span> </div> <div class='contents'> <div class='item folder'> <div class='itemname'>documents</div> </div> <div class='item folder'> <div class='itemname'>lost and found</div> </div> <div class='item folder'> <div class='itemname'>stuff</div> </div> <div class='item file'> <div class='itemname'>shopping list</div> </div> <div class='item file'> <div class='itemname'>things.txt</div> </div> <div class='item special'> <div class='itemname'>faves</div> </div> <div class='item file'> <div class='itemname'>chapter 2</div> </div> </div> </div> </body> </html> 5

6 window.css div.window{ position: absolute; overflow: auto; background-color: #eeefff; border: solid #0066aa 2px; margin: 8px; padding: 0px; width: 420px; height: 280px; div.titlebar{ background-color: #0066aa; background-image: url(images/titlebar_bg.png); background-repeat: repeat-x; color:white; border-bottom: solid black 1px; width: 100%; height: 16px; overflow:hidden; span.titlebutton{ position: relative; height: 16px; width: 16px; padding: 0px; margin: 0px 1px; 0px 1px; float:right; span.titlebutton#min{ background: transparent url(images/min.png) top left no-repeat; span.titlebutton#max{ background: transparent url(images/max.png) top left no-repeat; span.titlebutton#close{ background: transparent url(images/close.png) top left no-repeat; 6

7 div.contents { background-color: #e0e4e8; overflow: auto; padding: 2px; height:240px; div.item{ position : relative; height : 64px; width: 56px; float: left; color : #004488; font-size: 18; padding: 0px; margin: 4px; div.item div.itemname { margin-top: 48px; font: 10px verdana, arial, helvetica; text-align: center; div.folder{ background: transparent url(images/folder.png) top left no-repeat; div.file{ background: transparent url(images/file.png) top left no-repeat; div.special{ background: transparent url(images/folder_important.png) top left no-repeat; 7

8 3. DOM dokumento struktūra Document Object Model (DOM) mato web dokumentą kaip medį (hierarchinę struktūrą, kur kiekvienas mazgas turi tik vieną tėvą, o tėvas gali turėti kelis vaikus). DOM yra apibrėžtas W3C specifikacijomis. Struktūra skirta programuojant vaikščioti po dokumentą, jį keisti, redaguoti, atlikti paiešką (pvz. JavaScript, PHP ir kt. turi galimybes dirbti su DOM struktūra). Web dokumente HTML tagai yra išdėliojami medžio struktūra, t.y. HTML dokumento tagai yra DOM medžio mazgai: <HTML> tagas ya medžio šaknis, ir žymi visą dokumentą. <BODY> tagas yra, <HTML> vaikas, ir žymi matomąją dokumento dalį (kūną). <BODY> vaikai yra kiti tagai, kaip <P>, <TABLE>, <DIV> ir t.t., kurie savo viduje gali turėti kitų tagų. Pvz.: Turime paprastą html dokumentą: <html> <head> <link rel='stylesheet' type='text/css' href='window.css' /> </head> <body> <div class='window'> </div> </div> </body> </html> <div class='titlebar'> <span class='titlebutton' id='close'></span> <span class='titlebutton' id='max'></span> <span class='titlebutton' id='min'></span> </div> <div class='contents'> <div class='item folder'> <div class='itemname'>documents</div> </div> <div class='item folder'> <div class='itemname'>lost and found</div> </div> <div class='item folder'> <div class='itemname'>stuff</div> </div> 8

9 Šio HTML dokumento DOM struktūra kaip medis (sugeneruota Mozilla DOM Inspector tool): 9

10 Klasikinės web aplikacijos iš serverio parsiunčia visą html dokumentą ir jį pilnai perkrauna naršyklėje. Naudojant Ajax pakeitimai puslapyje atliekami lokaliai, pasinaudojant DOM. JavaScript engine mato šakninį dokumento mazgą (root node) kaip globalų kintamąjį document, nuo kurio pradedami atlikti visi veiksmai su DOM medžiu. Kiekvienas medžio mazgas turi vieną tėvinį elementą, nulį arba daugiau vaikų ir atributų, kurie saugomi asocijuotame masyve (associative array), t.y. ne skaitinis, o tekstinis identifikatorius (textual key), kaip width ar style. Taigi keičiant DOM medį, keisis ir pats HTML dokumentas. Apžvelgsime, kaip DOM galima modifikuoti JavaScript pagalba. Pradėsime nuo paprasto pavyzdžio:. Pvz.: hello puslapis: DOM modifikavimas JavaScript pagalba <html> <head> <link rel='stylesheet' type='text/css' href='hello.css' /> <script type='text/javascript' src='hello.js'></script> </head> <body> <p id='hello'>hello</p> <div id='empty'></div> </body> <html> hello.css.declared{ color: red; font-family: arial; font-weight: normal; font-size: 16px;.programmed{ color: blue; font-family: helvetica; font-weight: bold; font-size: 10px; 10

11 Dokumente yra tuščias <div> elementas, su nurodytu parametru ID= empty, į kurį programiškai įrašysime kitus elementus. hello.css stilių lentelėje (style sheet ) yra apibrėžti du stiliai, tačiau kol kas jie nėra panaudoti html dokumente. Tuos stilius mes priskirsime programiškai: kai dokumentas yra pilnai užkraunamas naršyklėje, stiliai bus priskirti tam tikriems mazgams, be to programiškai bus sukurti keli nauji DOM elementai. hello.js window.onload=function(){ var hello=document.getelementbyid('hello'); hello.classname='declared'; var empty=document.getelementbyid('empty'); addnode(empty,"reader of"); addnode(empty,"ajax in Action!"); var children=empty.childnodes; for (var i=0;i<children.length;i++){ children[i].classname='programmed'; empty.style.border='solid green 2px'; empty.style.width="200px"; function addnode(el,text){ var childel=document.createelement("div"); el.appendchild(childel); var txtnode=document.createtextnode(text); childel.appendchild(txtnode); JavaScript kodas pradedamas vykdyti nuo funkcijos window.onload(), kuri iškviečiama naršyklės automatiškai, kai pilnai pakraunamas dokumentas. Dokumentas turi būti pilnai pakrautas, kad būtų pilnai sudarytas DOM medis. JavaScript as atlieka veiksmus su DOM medžiu. Toliau apžvelgsime pagrindinius veikmus smulkiau. 11

12 Mazgo paieška DOM medyje Pirmiausia reikia surasti mazgą, kurį norėsime keisti. Galimi trys būdai: 1. Bet kurį DOM mazgą galima pasiekti tiesiogiai: bet kuriam DOM mazgui galima priskirti parametrą ID, kuris turi būti unikalus visame dokumente, pvz: <p id='hello'> <div id='empty'></div> Tada į tokį mazgą galima kreiptis JS komanda: var hello=document.getelementbyid('hello'); Atkreipsime dėmesį, kad tai yra objekto document komanda (su šia komada reikia elgtis atsargiai,kai yra naudojami IFrame, nes tada galimi keli Document objektai ir reikia nurodyti, į kurį tiksliai norime kreiptis). 2. Java Script visada mato HTML dokumento pagrindinį šakninį mazgą globalų kintamąjį document. Bet kuris DOM mazgas yra document mazgo vaikas ar provaikaitis. Taigi norint pasiekti DOM mazgą, galima eiti per medį, pradedant nuo jo šaknies. Tai atrodo gana gremėzdiškas būdas (ypač kai dokumentas didelis), tačiau kartais naudingas. Kiekvienas DOM mazgas turi vienintelį tėvinį mazgą ir kelis vaikus. Jie gali būti pasiekti naudojant savybes: parentnode grąžina DOM mazgo objektą, childnodes grąžina JavaScript masyvą (array), sudarytą iš visų vaikų mazgų. Pvz.: var children=empty.childnodes; for (var i=0;i<children.length;i++){... 12

13 3. DOM mazgų galima ieškoti pagal HTML tago tipą, naudojant JS metodą: getelementsbytagname(). Pvz.: Grąžina JavaScript masyvą (array), sudarytą iš visų <UL> mazgų: document.getelementsbytagname("ul") DOM mazgo sukūrimas Kartais reikia sukurti ir įterpti į dokumentą naują DOM mazgą (pvz. sukuriant message box ą). Mūsų pavyzdyje mazgas ID='empty' pradžioje yra tuščias: <div id='empty'></div> Jis užpildomas, kai pakraunamas dokumentas (onload), naudojant standartines komandas: document.createelement() - sukuria bet kokį HTML elemetą, parametrą nurodžius tag o vardą; document.createtextnode()-sukuria DOM mazgą, kuriame yra paprastas tekstas (paprastai naudojamas tarp kitų tag ų, kaip heading, div, p). function addnode(el,text){ var childel=document.createelement("div"); el.appendchild(childel); var txtnode=document.createtextnode(text); childel.appendchild(txtnode); Sukūrus DOM mazgą, jį reikia įdėti į dokumentą, kad būtų matomas. Tam naudojamas DOM mazgo metodas: el.appendchild(childel); Kai mokame pridėti mazgus, reikia jiems pritaikyti tinkamą stilių. 13

Stiliaus pritaikymas dokumentui classname property Norint pritaikyti CSS lentelėje apraytą stilių mazgamas, galima naudoti DOM mazgo classname property. Pvz.

14 Stiliaus pritaikymas dokumentui classname property Norint pritaikyti CSS lentelėje apraytą stilių mazgamas, galima naudoti DOM mazgo classname property. Pvz.: mazgui hello pritaikomas stilius declared: hello.classname='declared'; style property Galima keisti ir konkretų elemento stilių, pvz, rėmelį ar šriftą. Keičiant classname savybę, yra keičiamos iškato visos masyvo style reikšmės. Tačiau galima galima kesti konkrečią vieną masyvo style reikšmę. Pvz.: empty.style.border="solid green 2px"; empty.style.width="200px"; Pav. DOM mazgo atributo style reikšmės (DOM Inspector). 14

15 DOM Elementų savybės: Savybė (property) childnodes firstchild lastchild nextsibling nodevalue parentnode previoussibling getelementbyid(id) (document) getelementsbytagname (name) haschildnodes() getattribute(name) Aprašymas Returns an array of the current element s children Returns the first direct child of the current element Returns the last child of the current element Returns the element immediately following the current element Specifies the read/write property representing the element s value Returns the element s parent node Returns the element immediately preceding the current element Retrieves the element in the document that has the specified unique ID attribute value Returns an array of the current element s children that have the specified tag name Returns a Boolean indicating whether the element has any child elements Returns value of element s attribute specified by name DOM Elementų savybės ir metodai: Property/Method - Description document.createelement(tagname) The createelementmethod on the document object creates the element specified by tagname. Providing the string div as the method parameter produces a div element. document.createtextnode(text) This document object s createtextnode method creates a node containing static text. <element>.appendchild(childnode) The appendchild method adds the specified node to the current element s list of child nodes. For example, you can add an option element as a child node of a select element. <element>.getattribute(name), <element>.setattribute(name, value) These methods, respectively, get and set the value of the attribute name of the element. <element>.insertbefore(newnode, targetnode) This inserts the node newnode before the element targetnode as a child of the current element. <element>.removeattribute(name) This removes the attribute name from the element. 15

16 <element>.removechild(childnode) This removes the element childnode from the element. <element>.replacechild(newnode, oldnode) This method replaces the node oldnode with the node newnode. <element>.haschildnodes() This method returns a Boolean indicating whether the element has any child elements. innerhtml savybės panaudojimas Dauguma populiarių naršyklių taip pat palaiko ir savybę (property) innerhtml, Kuri leidžia bet kuriam elementui priskirti norimą turinį: innerhtml yra eilutė (string), aprašanti mazgo vaikus HTML u. Pvz.: function addlistitemusinginnerhtml(el,text){ // dėmesio: ne =, o += el.innerhtml+="<div class='programmed'>"+text+"</div>"; Čia <div> elementas ir jame esantis tekstas pridedami viena komanda. Ajax naudoja daugybę DHTML savybių, tačiau priedo gali kalbėtis su serveriu, kol vartotojas naršo, nenutraukiant jo darbo. 16

17 4. Asinchroninis duomenų įkėlimas, naudojant XML technologijas Klasikinės web aplikacijos pilnai perkrauna puslapius, kai vartotojas naršo. Tačiau yra technologijų, kurios siunčia serveriui request us asinchroniškai, t.y. nenutraukiant vartotojo darbo. Pirma naudota asinchroninio darbo technologija buvo IFrames, kuri iš esmės buvo sukurta visai kitiems tikslams vaizduoti dokumentą dokumente. Vėliau pradėtas naudoti XMLHttpRequest, kuris ir buvo sukurtas būtent asinchroniniam request ų siuntimui. IFrame Atsiradus Netscape Navigator ir MS Internet Explorer 4 versijoms, plačiai pradėtas naudoti DHTML, kuris įvedė naują unikalų tag ą Iframe, kuris realizuoja plaukiojančių freimų (floating frames) koncepciją. Pvz.: Paprastas Iframe panaudojimo pavyzdys, failas index.html: <HTML> <HEAD> <TITLE>Paprastas IFRAME pavyzdys</title> </HEAD> <BODY> <CENTER> Paprastas IFRAME pavyzdys. <BR> Plaukiojantys freimai gali buti talpinami bet kurioje dokumento vietoje, analogiskai kaip paveiksliukai ar lenteles (<IMG> ar <TABLE>). </CENTER> <IFRAME SRC="float.html" NAME="A" HEIGHT=200 WIDTH=50% HSPA- CE=10 VSPACE=20 SCROLLING=YES ALIGN=RIGHT> Jusu narsykle nepalaiko IFRAME. </IFRAME> <p>desineje puseje yra plaukiojantis freimas IFRAME. Jame vaizduojamas failo float.html turinys.</p> <p>tai yra html dokumentas kitame html dokumete.</p> </BODY> </HTML> 17

18 Failas float.html: <HTML> <HEAD><TITLE>float.html</TITLE></HEAD> <BODY> <CENTER> <H1>float.html - dokumentas, esantis plaukiojanciame IFRAME.</H1> </CENTER> </BODY> </HTML> IFrame yra DOM medžio elementas, taigi jį galime judinti, keisti dydį, stilių ar padaryti nematomu, nurodant jo parametrus arba JS priemonėmis. Buvo sugalvotas asinchroninio bendravimo su serveriu būdas, kurio pagrindinė mintis - rašyti duomenis į nematomą IFrame, tuo tarpu, kai matomoji dokumento dalis nesikeičia. 18

19 Kaip DOM elementas, IFrame gali būti sukurtas: 1. tiesiogiai HTML dokumente, nurodant tagą <IFRAME>; 2. programiškai, naudojant JS komandą: document.createelement() Tada į DOM medžio elementą Iframe galima kreiptis, naudojant JS komandą: document.getelementbyid() ir programiškai jį keisti (pvz. rašyti duomenis). IFrame padaromas nematomu, kai jo plotis ir aukštis nurodomi lygūs 0. Galima naudoti stilių display:none, tačiau tada kai kurios naršyklės iš viso neužkrauna turinio į IFRAME, tada nepilnai sudaromas DOM medis. Pvz.: Nematomo IFrame sukūrimas tiesiogiai html: <html> <head> <script type='text/javascript'> window.onload=function(){ var iframe = document.getelementbyid('datafeed'); var src='datafeeds/mydata.xml'; loaddataasynchronously(iframe,src); function loaddataasynchronously(iframe,src){ //...musu suprogramuoti veiksmai </script> </head> <body>  <iframe id='datafeed' style='height:0px; width:0px;'> </iframe> </body> </html> 19

20 Pvz.: Nematomo IFrame sukūrimas programiškai, kai jo reikia. Šiuo atveju visas kodas, kuris gauna (request) duomenis, yra vienoje vietoje. function fetchdata(){ var iframe=document.createelement('iframe'); iframe.classname='hiddendatafeed'; document.body.appendchild(iframe); var src='datafeeds/mydata.xml'; loaddataasynchronously(iframe,src); Tačiau tokiu būdu galima prikurti begalę Iframe, todėl reikia pasirūpinti jų sunaikinimu arba pooling mechanizmu. 20

21 XmlDocument ir XMLHttpRequest objektai IFrame ai buvo sukurti vaizduoti turinį web puslapyje, o ne asinchroniniam bendravimui su serveriu. Žymiai didesnes galimybes suteikia nestandartiniai DOM objektai: XmlDocument ir XMLHttpRequest kurie sukurti būtent asinchroniniam duomenų gavimui iš serverio. Abu objektai atlieka panašias funkcijas, tačiau XMLHttpRequest turi platesnes request o valdymo galimybes. Todėl susipažinimui trumpai paminėsime, kaip dirba abu objektai, o toliau pagrinde nagrinėsime XMLHttpRequest. Kadangi XMLHttpRequest nėra W3C standartas, todėl tenka XMLHttpRequest objektą kurti keliais būdais: Internet Exploreryje XMLHttpRequest realizuotas kaip ActiveX objektas; kitose naršyklėse (Firefox, Safari, Opera) XMLHttpRequest realizuotas kaip pačio JavaScript objektas. Pvz.: XmlDocument objekto sukūrimas: function getxmldocument(){ var xdoc=null; if(document.implementation && document.implementation.createdocument){ //Mozilla/Safari xdoc=document.implementation.createdocument("","",null); else if (typeof ActiveXObject!="undefined"){ var msxmlax==null; try{ msxmlax=new ActiveXObject("Msxml2.DOMDocument"); //IE catch (e){ msxmlax=new ActiveXObject("Msxml.DOMDocument"); //old IE xdoc=msxmlax; if(xdoc==null typeof xdoc.load=="undefined"){ xdoc=null; return xdoc; 21

22 Pvz.: XMLHttpRequest objekto sukūrimas: function getxmlhttprequest() { var xrequest=null; if (window.xmlhttprequest) { xrequest=new XMLHttpRequest(); else if (typeof ActiveXObject!= "undefined"){ xrequest=new ActiveXObject("Microsoft.XMLHTTP"); return xrequest; Tipiniai XMLHttpRequest objekto metodai: void abort() Metodas String getallresponseheaders() String getresponseheader(string header) void open(string method, string url, boolean asynch, string username, string password) void send(content) void setrequestheader(string header, String value) Aprašymas Sustabdo dabartinį request'ą. Grąžina visus response header'ius kaip poras key/value (atitinkamo HTTP requesto). Grąžina nurodyto header'io reikšmę. Nustato kreipimosi į serverį parametrus. method ir url argumentai privalomi, likę trys - neprivalomi. method argumentas gali būti GET, POST, arba PUT. url argumentas gali būti reliatyvus arba absoliutus url adresas dokumento, į kurį kreipiamasi. asynch=true(default) nurodo, kad requestas asinchroninis, false-neasinchroninis (yra laukiama, kol response grąžinamas iš serverio). username, password aišku :) Išsiunčia requestą serveriui. Jei requestas yra asinchroninis, tai metodas grįžta iškarto, jei neasinchroninis, tai grįžta kai gaunamas response iš serverio. content yra siunčiamas kaip request kūno (body) dalis (parametrai). Nustato nurodyto headerio reikšmę lygią value argumentui. open() turi būti iškviečiama prieš bet kokį headerių nustatymą. 22

23 Tipinės XMLHttpRequest objekto savybės (properties): Savybė onreadystatechange readystate responsetext responsexml status statustext Aprašymas event handler'is, kuris iškviečiamas kiekvieną kartą pasikeitus requesto būsenai (state). Dažniausiai jam priskiriama ir iškviečiama JavaScript funkcija, reaguojanti į pasikeitimą. request'o būsena (state). Gali turėti reikšmes: 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete. Iš serverio gautas response (string tipo eilutė). Iš serverio gautas response (XML pavidalu). Su šiuo objektu galima dirbti kaip su DOM objektu (mazgu). Iš serverio gautas HTTP statuso kodas: 200 = OK, 404 = Not Found, ir t.t. Tekstinis aprašymas, atitinkantis HTTP statuso kodą. 23

24 Asinchroninės užklausos siuntimas serveriui Request'o siuntimas, naudojant XMLHttpRequest objektą, serveriui yra gana paprastas - tereikia paduoti parametrą URL adresą puslapio, kuris grąžins reikiamą response (paprastu tekstu, HTML ar XML pavidalu): function sendrequest(url,params,httpmethod){ if (!HttpMethod){ HttpMethod="POST"; var req=getxmlhttprequest(); if (req){ req.open(httpmethod,url,true); req.setrequestheader("content-type","application/x-wwwform-urlencoded"); req.onreadystatechange=callback; // callback() funkcija req.send(params); function getxmlhttprequest() { var xrequest=null; if (window.xmlhttprequest) { xrequest=new XMLHttpRequest(); else if (typeof ActiveXObject!= "undefined"){ xrequest=new ActiveXObject("Microsoft.XMLHTTP"); return xrequest; 24

25 Callback funkcijos Asinchroniniam ryšiui sudaryti, programoje reikia sukurti vietą (reentry point), į kurią bus grąžinamas užklausos rezultatas sukuriama callback funkcija. Callback funkcija iškviečiama, kai tik bus paruoštas užklausos rezultatas (response), kuris tai funkcijai ir išsiunčiamas. Callback funkcijos paprastai iškviečiamos, kai įvyksta koks nors įvykis (klaviatūros ar pelės paspaudimas, gavus rezultatus iš serverio), tiksliau callback funkcijos yra priskiriamos objekto savybėms, pvz. onkeypress, onmouseover, onload ar panašioms. Callback funkcijos yra priskiriamos XMLHTTPRequest.onreadystatechange savybei: req.onreadystatechange=callback; Call back funkcijoje yra apdorojamas response'as. 25

Pilna AJAX veikimo schema 1. Kliento pusės veiksmas iškviečia asinchroninę užklausą atliekančią funkciją. Pvz.: <input type="text"d="email" name="email" onblur="validateemail()";> 2.

26 Pilna AJAX veikimo schema 1. Kliento pusės veiksmas iškviečia asinchroninę užklausą atliekančią funkciją. Pvz.: <input type="text"d=" " name=" " onblur="validate ()";> 2. Sukuriamas XMLHttpRequest objektas ir open() metodas nustato requesto parametrus. Request'as išsiunčiamas metodu send(). Pvz.: var xmlhttp; function validate () { var = document.getelementbyid(" "); var url = "validate? =" + escape( .value); var req=getxmlhttprequest(); if (req){ xmlhttp.open("get", url); xmlhttp.onreadystatechange = callback; xmlhttp.send(null); 3. Request'as pasiekia serverį, t.y. kreipiamasi į Java servletą ar PHP skriptą ar kt. 4. Serveris įvykdo skriptą, kreipiasi į duomenų bazę ir t.t. 26

27 5. Request'as grąžinamas naršyklei response gauna ir apdoroja nurodyta callback funkcija. Response gali būti apdorojamas JavaScript'u, DOM veiksmais ir pan. Pastaba: Reikia nustatyti headerius taip, kad naršyklė nerašytų rezultatų į cache atmintį: response.setheader("cache-control", "no-cache"); response.setheader("pragma", "no-cache"); 6. Kaip parodyta pavyzdyje, XMLHttpRequest objektas sukonfigūruotas taip, kad apdorojus užklausą ir grįžus yra iškviečiama funkcija callback(). Ši funkcija tikrina XMLHttpRequest objekto readystate savybę, t.y. kokį būsenos kodą grąžino serveris. Jei serveris grąžina sėkmingos užklausos kodus, callback() funkcija atieka programuotojo nurodytus veiksmus kliento pusėje (//do something interesting here). Tipinis callback() funkcijos pavyzdys: function callback() { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { //do something interesting here 27

28 Pvz.: callback handlerio panaudojimo pavyzdys var READY_STATE_UNINITIALIZED=0; var READY_STATE_LOADING=1; var READY_STATE_LOADED=2; var READY_STATE_INTERACTIVE=3; var READY_STATE_COMPLETE=4; var req; function sendrequest(url,params,httpmethod){ if (!HttpMethod){ HttpMethod="GET"; req=getxmlhttprequest(); if (req){ req.onreadystatechange=onreadystatechange; req.open(httpmethod,url,true); req.setrequestheader("content-type", "application/x-www-form-urlencoded"); req.send(params); function onreadystatechange(){ var ready=req.readystate; var data=null; if (ready==ready_state_complete){ data=req.responsetext; else{ data="loading...["+ready+"]"; //... apdorojami duomenys... Pirmiausia sendrequest() funkcijoje nurodoma request objekto callback handleris (onreadystatechange), o tik po to requestas išsiunčiamas. Kol kas pavyzdyje request objektas paprastumo dėlei yra global kintamasis. Tai sukeltų keblumų, siunčiant kelias užklausas vienu metu, tačiau kaip tai daryti, apžvelgsime vėliau. 28

29 GET vs. POST Kada naudoti GET, o kada POST metodą: Praktinis skirtumas yra toks, kad naršyklės ir serveriai dažnai riboja URL adreso ilgį, todėl GET tinkamas palyginti nedideliam duomenų kiekiui siųsti į serverį. Siunčiant POST metodu, užklausos ilgis nėra ribojamas. Bendrai GET naudojamas duomenų gavimui iš serverio, o POST naudojamas, kai keičiama serverio būsena (įrašomi, keičiami duomenys). Be to skirtingai nuo GET, siunčiant POST metodu, reikia nurodyti Content-Type headerį: xmlhttp.setrequestheader("content-type", "application/x-wwwform-urlencoded"); 29

30 Pilnas asinchroninio requesto pavyzdys Pavyzdyje yra apibrėžtas DOM mazgas console, į kurį rašoma HTTP request'o statuso informacija, siuntimo metu. Pvz.: Dokumento užkrovimas, naudojant XMLHttpRequest <html> <head> <script type='text/javascript'> var req=null; var console=null; var READY_STATE_UNINITIALIZED=0; var READY_STATE_LOADING=1; var READY_STATE_LOADED=2; var READY_STATE_INTERACTIVE=3; var READY_STATE_COMPLETE=4; //sendrequest siunčia request ą serveriui function sendrequest(url,params,httpmethod){ if (!HttpMethod){ HttpMethod="GET"; req=initxmlhttprequest(); if (req){ req.onreadystatechange=onreadystate; req.open(httpmethod,url,true); req.setrequestheader("content-type", "application/x-www-form-urlencoded"); req.send(params); //inicializuojamas XMLHttpRequest function initxmlhttprequest(){ var xrequest=null; if (window.xmlhttprequest){ xrequest=new XMLHttpRequest(); else if (window.activexobject){ xrequest=new ActiveXObject("Microsoft.XMLHTTP"); return xrequest; 30

31 // callback handleris, apdoroja responsą function onreadystate(){ var ready=req.readystate; var data=null; if (ready==ready_state_complete){ // nuskaitomi response duomenys data=req.responsetext; else{ data="loading...["+ready+"]"; toconsole(data); //i console div'a surasomas responso tekstas function toconsole(data){ if (console!=null){ var newline=document.createelement("div"); console.appendchild(newline); var txt=document.createtextnode(data); newline.appendchild(txt); window.onload=function(){ console=document.getelementbyid('console'); sendrequest("data.txt"); // failo turinys: PREVED </script> </head> <body> <div id='console'></div> </body> </html> Pavyzdyje naudojama XMLHttpRequest objekto savybė responsetext, kadangi response yra grąžinamas paprastas tekstas (string). Kai grąžinamas didelis duomenų kiekis, yra naudojama savybė responsexml. Jei responsui nurodomas teisingas MIME tipas text/xml, tai yra grąžinamas DOM dokumentas, su kuriuo galima dirbti, naudojant DOM savybes ir funkcijas (getelementbyid() ir childnodes). 31

Pastaba dėl saugumo: Bet kokie XMLHttpRequest objekto užklausiami resursai turi būti tame pačiame domain'e, kuriame yra pats kviečiantysis skriptas.

32 Pastaba dėl saugumo: Bet kokie XMLHttpRequest objekto užklausiami resursai turi būti tame pačiame domain'e, kuriame yra pats kviečiantysis skriptas. Yra blokuojamos XMLHttpRequest objekto užklausos į domain'o išorę. Internet Explorer parodo pranešimą, kad vykdomas rizikingas veiksmas, bet leidžiama pasirinkti, ar tęsti užklausą. Firefox tiesiog sustabdo užklausą (request'ą) ir parodo klaidos pranešimą JavaScript konsolėje (console). 32

El. pašto konfigūravimas

El. pašto konfigūravimas Outlook Express (integruota Windows XP) elektroninio pašto klientas Žemiau pateikta instrukcija, kaip sukonfigūruoti savo elektroninį paštą vartotojams, turintiems elektroninio