Mano pirmas AJAX scenarijus

0Arūnas Liuiza • 1st Jun 2007 • Archyvas, Kompiuteriai ir Internetas, Archyvas, pixel.lt, Archyvas, Straipsniai, Archyvas, Kompiuteriai ir Internetas, Tinklapių kūrimas

Straipsnis pirmą kartą publikuotas pixel.lt 2006 metų liepos 7 dieną.

Kai pirmą sykį išgirdau apie Ajax, tai atrodė kažkas keisto, egzotiško ir, ko gero, labai sudėtingo. Sudėtingos šiai technologijai sukurtos bibliotekos šį įspūdį tik sustiprino, tačiau kai pradėjau gilintis ir domėtis, paaiškėjo, kad taip tikrai nėra. Man labai patiko Rasmus’ 30 second Ajax Tutorial, kuriuo ir remsiuosi šiame straipsnelyje. Kas mane pažįsta, žino, kad stengiuosi vadovautis šūkiu keep it simple – į viską žiūrėti kuo paprasčiau. Taigi čia pabandysiu pateikti paprastą požiūrį į Ajax. Čia mes nekalbėsim apie Ajax bibliotekas, tokias kaip SAJAX, XAJAX ir pan. Kalbėsime apie keletą JavaScript’o eilučių, kurios sudaro pačią technologijos esmę.

Kaip rašo vikipedija, Ajax (Asynchronous Javascript and XML) technologija naudoja šių technologijų kombinaciją:

• XHTML (ar HTML) ir CSS informacijos pateikimui.
• Dokumento Objektinį Modelį (DOM) bei JavaScript kalbą dinamiškam vaizdavimui bei interaktyvumui
• XMLHttpRequest objektą asinchroniniam duomenų apsikeitimui su serveriu.
• XML dažnai naudojamas kaip duomenų mainų tarp serverio ir kliento formatas, bet čia viskas priklauso nuo programuotojo pasirinkimo – galima naudoti ir paprastą tekstą, ir HTML, ir bet kurį kitą formatą.

Ko gero ir šis paaiškinimas gali nuskambėti komplikuotai, todėl nedelsdamas parodysiu paprastutį pavyzdį, kaip viskas veikia praktikoje. Pirmiausiai JavaScript’as:

function createRequestObject() {
  var ro;
  var browser = navigator.appName;
  if (browser == “Microsoft Internet Explorer”) {
    ro = new ActiveXObject(“Microsoft.XMLHTTP”);
  } else {
    ro = new XMLHttpRequest();
  }
  return ro;
}
var http = createRequestObject();function sndReq(action) {
  http.open(‘get’, ‘rpc.php?action=’+action);
  http.onreadystatechange = handleResponse;
  http.send(null);
}

function handleResponse() {
  if (http.readyState == 4) {
    var response = http.responseText;
    var update = new Array();

    if (response.indexOf(‘|’ != -1)) {
      update = response.split(‘|’);
      document.getElementById(update[0]).innerHTML = update[1];
    }
  }
}

Pirmoji funkcija sukuria užklausimo objektą, antroji skirta užklausos siuntimui į serverį, o trečioji interpretuoja iš serverio gautus duomenis.
Norint paleisti šią Ajax mini ‘biblioteką’ į darbą tereikia tiesiog įterpti šį kodo gabaliuką į html dokumentą ir onclick atribute ar tiesiog nuorodoje kreiptis į sndReq() funkciją. Pavyzdžiui štai taip:

  [valio]

Tokia nuoroda reiškia, kad kai kas nors paspaus šią nuorodą, neperkraunant puslapio į serverį bus nusiūsta tokia užklausa: rpc.php?action=alio
Dabar tereikia sukurti tokį rpc.php, kuris priimtų ir suprastų tokią užklausą, bei gražintų kažkokią informaciją. Pavyzdys galėtų būti štai toks:

switch($_GET[‘action’]) {
        case ‘alio’:
                / darom kažką rimto /
                echo “alio|alio tekstas”;
                break;
}
?>

Tai labai paprastas pavyzdėlis – iš tiesų rpc.php gali atlikti aibę užklausų į duomenų bazę, matematinių skaičiavimų ir gražinti rezultatą, atsižvelgdama į pateiktą užklausą – viskas priklauso nuo programuotojo poreikių.
Grąžintą atsakymą interpretuoja handleResponse() funkcija. Šiuo atveju pasirinktas paprastas vertikaliu brūkšniu sustaidyto teksto formatas, tačiau lygiai taip pat tai galėjo būti XML, HTML ar dar kažkas… Ši konkreti funkcija atpažįsta suskaidyto teksto dalis ir pirmąją interpretuoja kaip html elemento id, o antrąją – kaip to elemento vidinį HTML turinį. pavyzdžiui jei turime tokį kodą:

tai įvykdžius pavydzinę užklausą šis kodas pasikeistu štai taip:

alio tekstas

ir visa tai vyksta dinamiškai, neperkraunant viso puslapio.

Štai ir visas pagrindas. Visa kita yra tiesiog piramidės statymas ant šių pamatų – užklausos gali būti žymiai sudėtingesnės, jų apdorojimas, rezultatų pateikimas – visą tai riboja tik programuotojo fantazija. Bet pagrindą sudaro štai šios kelios eilutės. Todėl prieš aklai naudojant didžiules Ajax bibliotekas labai rekomenduoju pagalvoti – galbūt jums reikia tiesiog keleto paprastų funkcijų? Ajax iš tiesų yra labai naudingas ir galingas įrankis – padeda sutaupyti duomenų srautą, paspartinti internetinių sistemų veikimą. Bet, kaip ir visos kitos technologijos, tai nėra panacėja, tinkanti visiems gyvenimo atvejams. Ajax turi daug privalumų, bet jai nesvetimi ir trūkumai – pavyzdžiui, Ajax paremtos sistemos labai nesvetingos paieškos variklių atžvilgiu, nėra galimybės duoti kolegai nuorodą į tiksliai reikalingą vietą ir pan. Per dažnas Ajax vartojimas gali privesti prie anekdotinių situacijų: vienas žmogeliukas omnitel.php naujienų grupėje klausė, kaip su Ajax pakeisti visą dokumento body. Niekaip nesuprantu kam šiuo atveju reikia naudoti Ajax, jei galima tiesiog perkrauti puslapį – rezultatas bus tas pats. Taigi, tiesiog draugiškas perspėjimas – jauskite saiką