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:

<a href="sndReq('alio')" mce_href="sndReq('alio')">[valio]</a>

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:

<?php	
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ą:

<p id="alio"></p>

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

<p id="alio">alio tekstas</p>

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

Panašūs straipsniai


“Mano pirmas Ajax scenarijus” komentarų: 15

  1. Archatas

    Siūlyčiau “alio” ir “valio” pakeist į kažką logiško, ir dar demo versiją pagamint, kad pirmąkart susidūrusiems su AJAX būtų aiškiau, su kuo tai valgoma.

  2. Jim

    Nu pwz.. As nors pirma karta skaitantis kazka apie AJAX.. cia beveik viska supratau :)

  3. Kaip IdeaG Ubuntu bandė arba pirmieji įspudžiai iš Linux pasaulio Pixel.lt

    […] kad kompiuteryje taip pat likusi Windows XP netruks apsitraukti dulkėmis | Perskaitė 0 | Spausdinti šį įrašą | (Dar neįvertinta)  Kraunama… […]

  4. noen

    siaip tai neveikia tas kodas :D nebent nuoroda padarytume kazka panasaus i tai [valio]

  5. noen

    fuck ne taip turejo gautis… :D turejau omenyja sita => href=”javascript:sndReq(’alio’)”

  6. testas

    man per firefox viskas veikia, o per IE meta errora Unknown runtime error

  7. NeWorld » Pradžia su ajax

    […] Straipsnis parašytas remiantis pixel.lt […]

  8. » Mano antrasis Ajax scenarijus Archyvas » Pixel.lt

    […] Iš tiesų pirmąjį ajax scenarijų parašiau ne aš, o IdeaG, tačiau aš nusprendžiau tęsti jo pradėtą darbą. Taigi ką naujo sužinosite šiandien? Šį kartą norėčiau pristatyti POST metodą ir darbą su formomis. Tarkim jūs turite registracijos formoje patikrinti ar toks vartotojo vardas yra laisvas. Čia aš nekalbėsiu apie visą registraciją, tiesiog pateiksių skriptą, kuris patikrins ar norimas slapyvardis užimtas ir paaiškinsiu kaip jį realizuoti. Prieš skaitant toliau, primygtinai siūlau perskaityti “pirmąjį Ajax scenarijų”. […]

  9. Tygas

    Aš ne expertas, bet metode handleResponse();
    update[0] reiksmeje yra ir html fragmentų, tai gal geriau jį priskirt statiškai

    document.getElementById(’alio’).innerHTML

  10. Eimantas
    function sndReq(action) {
    	http.open('get', 'source.php?action='+action);
    	http.onreadystatechange = handleResponse;
    	http.send(null);
    }
     
    function handleResponse() {
    	if (http.readyState == 4) {
    			document.getElementById("dezute").innerHTML = http.responseText;
    	} else {
    		document.getElementById("dezute").innerHTML = "";
    		}
    }

    ka cia blogai padariau? :D

  11. raven_

    Nieko nesupratau :| ir nemanau kad pats autorius išbandė viską, taip kad absurdas.Bo wikipedia ir pats galiu pasiskaityt, tai kam rašyti to ko nenaudoji ir dar nesuprati. Kita syki darydamas straipsni įdėk gale source kad eitu parsisiust ir pasibandyt, bo man asmeniškai neaišku kur ka rašyt, tas bibliotekas tarp javasript gairiu srityje rasyti ar ce kaip kitaip reikia. Žodziu 4 balai iš 10.

  12. Arūnas Liuiza » Archyvas » Mano pirmas AJAX scenarijus

    […] pirmą kartą publikuotas pixel.lt 2006 metų liepos 7 […]

  13. Mano trečias Ajax scenarijus » Pixel.lt

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

  14. Mano ketvirtas Ajax scenarijus - tarpusavyje susiję pasirinkimai » Pixel.lt

    […] galbūt kada nors šita seka pavirs melodrama, o kol kas prisiminkim, apie ką jau buvo rašyta. Pirmoje dalyje supažindinama kas yra Ajax ir pateikiamas paprastas pavyzdukas GET metodu. Antroje dalyje - […]

  15. Ewalldinho

    Labai dėkui!
    Man irgi iki šiol atrodė tas ajax toks siaubas-baubas..

    P.S. viskas puikiai veikia. Nesuprantu kokių dar sourcu čia jumis trūksta…

Rašyti komentarą

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