Vasaris 26, 2008 Jau seniai kalbėjom apie Ajax, galbūt kai kurie iš jūsų net neskaitė pirmosios ir antrosios dalies. Pirmoje dalyje sužinojome, kaip iš viso susikurti savo Ajax skriptą, antroji buvo praktiškesnė: pabandėm padaryti mini registracijos formą ir priešingai nei pirmoje dalyje vietoj GET metodo duomenų perdavimui naudojom POST. Tačiau, tiek pirmoje, tiek antroje viskas pasibaigdavo duomenų atvaizdavimu. Šį kartą pabandysime padirbėti su duomenimis, aišku tai bus labiau pseudo skriptas nei realus pavyzdys, bet tikiuosi pravers.
Taigi…
Aš leisiu sau įsivaizduoti, kad jūs jau skaitėte ankstesnes dalis, todėl prabėkime pradžią greitai:
function createRequestObject() { var req; if(window.XMLHttpRequest){ // Firefox, Safari, Opera... req = new XMLHttpRequest(); } else if(window.ActiveXObject) { // Internet Explorer 5+ req = new ActiveXObject("Microsoft.XMLHTTP"); } else { // Jeigu naršyklė yra sena ir nepalaiko Ajax alert('Problem creating the XMLHttpRequest object'); } return req; } //Sukuriamas XMLHttpRequest objektas var http = createRequestObject();
Šita funkcija paimta iš antrosios dalies be jokių pakeitimų. Ji sukuria XMLHttpRequest objektą priklausomai nuo naršyklės tipo. Sekančią funkciją taip pat paėmiau iš ankstesnio straipsnio, tačiau šį kartą teko padaryti keletą pakeitimų.
function sendRequest() { http.abort; http.onreadystatechange = handleResponse; http.open('post', 'echoXML.php', true); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http.send(null); }
Kadangi šį straipsnį rašiau remdamasis antruoju, tai vėlgi dirbkime POST metodu. Reiktų atkreipti dėmesį į tai, kad šiuo atveju neperduodame jokių duomenų užklausai.
Mūsų užklausa kreipiasi į failą echoXML, kaip turbūt jau spėjate, jis gražins XML failą. Ilgai netempdamas parodysiu jo turinį:
<?php header('Content-Type: text/xml'); echo "<?xml version=\"1.0\" ?> <numbers> <some>".rand(5, 15)."</some> </numbers>"; ?>
Į ką atkreipti dėmesį? Visų pirma nurodome kokio tipo failas bus. Šiuo atveju XML, o toliau tiesiog išvedame norimą XML failą, tuos, kurie nežino kaip sudaromas XML dokumentas, galiu pradžiuginti Pixel.lt apie tau jau rašė.
Kai jau žinome, kokius duomenis gausime, galime pabandyti juos pasiimti.
function handleResponse() { if(http.readyState == 4 && http.status == 200){ var response = http.responseText; if(response) { // pasiimame XML elementą var somenumber = http.responseXML.getElementsByTagName("some")[0]; //iš xml elemento išsitraukiame jo reikšmę ournumber = somenumber.childNodes[0].nodeValue; // atvaizduojame document.getElementById('ajaxTest').innerHTML =ournumber; } } }
Taigi šita funkcija gavusi atsakyme XML failą pasiima reikšmę, kuri ją domina ir ją atvaizduoja. Duomenų paėmimas vyksta dviem etapais: pirmiausia pagriebiame XML dokumento fragmentą pagal reikšmės pavadinimą http.responseXML.getElementsByTagName(”some”)[0], o vėliau iš to fragmento išsitraukiame mus dominančią reikšmę childNodes[0].nodeValue. Kas būtų jeigu šalia some atsitiktinio skaičiaus pridėtume dar vieną pavadintą other? Viskas tas pats tik funkcijoje getElementsByTagName įrašytume kitą žodį.
Ankstesnėje pastraipoje parašiau vieną nesąmonę, ar pastebėjote kokią? Priešingai nei PHP, Javascript turi kintamųjų tipus. Kaip jūs manote, kas bus jeigu prie gautos reikšmės norėsite pridėti vienetą? Jeigu gauta reikšmė bus 9 tai pridėjus vienetą, jums išves rezultatą 91. Tikėjotės dešimties? Pabandykite patys.
Kad taip neatsitiktų mes turime gautą reikšmę paversti į skaičių tai atliekama su funkcija parseInt arba parseFloat priklausomai nuo poreikio ir skonio.
Taigi išvedimo eilutė atrodys taip:
document.getElementById('ajaxTest').innerHTML =parseInt(ournumber)+1;
Dabar jau išves tikrai tai, ką norėsite.
Tiesa, aš vis dar nepateikiau išvedimo kodo:
<body onload="sendRequest()"> <div id="ajaxTest"></div> </body>
Kadangi šiuo atveju nedaromas joks duomenų įvedimas, tai skriptas yra vykdomas failui užsikraunant.
Rodos, viskas ką norėjau pasakyti ir parodyti.
Kadangi aš esu tikras ateistas: netikiu kodu, kol nepamatau kaip jis veikia, pridedu kodą, sėkmingo naudojimo.
P.S. jeigu kam kils klausimas, kur toks kodas gali būti naudojamas, tai pažiūrėkite čia, dariau prieš du metus, dabar niekaip nesuprantu, kam man prireikė Ajax…
2008-02-26 | 19:43
Turėtų būti:
http.responseXML.documentElement.getElementsByTagName(’kažkas’)
Parsinant vietoj childNodes[0].nodeValue galima naudoti firstChild.data
O gal paprasčiau būtų naudot kokį jQuery arba Prototype’ą? Gal ir straipsniui laikas apie tai?
2008-02-26 | 20:12
Pauliau, neverta skubėti, artimiausiu metu pasirodys du straipsniai, kaip tik tomis temomis :)
2008-02-26 | 21:46
Man amseniškai XML javascript’e sunku valdyti, be to kiek skaičiau jog pats XML yra gan lėtas, todėl visada naudoju JSON. Nežinau ar tai greičiau už XML, bet žymiai patogiau. XML’e matau vienintelį privalumą, bet koks vartotojas gali suprasti kaip sudarystas šitas failas ir juo naudotis, taip pat jį redaguoti ir pan.
2008-02-27 | 3:17
@neworld
a) JSON greičiau.
b) labai tikėtina, kad naršyklės pakankamai greitai turės „gimtą” JSON palaikymą, o tai reiškia kad duomenis koduoti/dekoduoti galės LABAI greitai.
2008-02-27 | 11:39
XML yra geriau tuo atveju, jeigu webserviso klientai yra ne tik naršyklės, bet ir desktop programos, be to JSON ne tik yra greitesnis bet ir sveria kelis kartus mažiau ,)
2008-02-28 | 19:55
Geriau parašykite, kaip su AJAX suvaldyti naršyklės Back button’ą, o patį turinį ne tik gražiai pateikti bet ir google’ui atskleisti, neprasta užduotėlė?
2008-02-29 | 0:29
Ramas, pasiskaityk kas yra dhtmlHistory.js :) Čia dėl back button`o.
O kame problemos su googlu ? Jeigu darai su Ajax svetainę, tai nereiškia, kad darai ją neveiklią be javascript. Tiesą sakant, pirmiausiai darai svetainę normaliai ir tik vėliau pridedi visokių ala pribombasų be reloadų. Tai tikrai ne problema :)
2008-02-29 | 11:20
[…] lietuvių kalba resursus… interneto technologijomis besidomintiems turėtų patikti programavimo „Ajax” kalba pamokėlė… Autorius: Elt.lt siūlyti topix.lt | siūlyti kaip.tikten.lt | siūlyti zynios.lt | siūlyti […]