Jau seniai kalbėjom apie , galbūt kai kurie iš jūsų net neskaitė pirmosios ir antrosios dalies. Pirmoje dalyje sužinojome, kaip iš viso susikurti savo 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 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 , o toliau tiesiog išvedame norimą failą, tuos, kurie nežino kaip sudaromas 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 failą pasiima reikšmę, kuri ją domina ir ją atvaizduoja. Duomenų paėmimas vyksta dviem etapais: pirmiausia pagriebiame 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, 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ė

Panašūs straipsniai


“Mano trečias Ajax scenarijus” komentarų: 8

  1. Paulius

    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?

  2. NePo

    Pauliau, neverta skubėti, artimiausiu metu pasirodys du straipsniai, kaip tik tomis temomis :)

  3. neworld

    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.

  4. Rimantas

    @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.

  5. Eimantas

    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 ,)

  6. Ramas

    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ė?

  7. asterisk

    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 :)

  8. elt.lt » Blog Archive » Apžvalga. Šiandien aš skaičiau… #52

    […] 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 […]

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.