AJAX

1. AJAX Asynchronous JavaScript and XML

2. uvod • AJAX nije novi programski jezik, nego novi način korištenja postojećih standarda. On pojednostavljuje razmjenu podataka sa serverom, i ažurira djelove web stranice bez ponovnog učitavanja cijele stranice. • Primjeri aplikacija koje koriste AJAX: • AJAX je baziran na internet standardima i koristi kombinaciju: • XMLHttpRequest object – za nesinkroniziranu izmjenu podataka sa serverom • JavaScript/DOM – za prikaz i interakciju sa informacijama • CSS – za stil podataka • XML – obicno se koristi kao format za prenošenje podataka • AJAX rješenja mogu biti realizirana tako da budu neovisna o pregledniku i platformi.

3. XMLHttpRequest objekt • U standardnom JavaScript programiranju, se koristi HTML forma i komade GET ili POST iz HTTP protokola za komunikaciju sa Serverom. Korisnik pritiskom na "Submit„ šalje ili prima podatke sa Servera. Nakon što server pošalje rezultate Korisnik će ih vidjeti tek kada se stranica ponovno učita. • Takve aplikacije nisu previše fleksibline/pristupačne i mogubiti jako spore. Čekanje na učitavanje cijele stranice! • U AJAX paradigmi, JavaScript direktno komunicira sa Serverom kroz JavaScript XMLHttpRequest objekt • Korištenjem HTTP protokola djelovi stranice se mogu osvježavati bez ponovnog učitavanja cijele stranice. Korisnik tipično neće biti svjestan komunikacije koja se odvija u pozadini.

4. svojstva XMLHttpRequest Object-a • Onreadystatechange • –Ovo je property u koji se sprema funkcija (pokazivač na funkciju) koja će primiti podatke koje je poslao Server. Ovo nije metoda! • readyState • readyState je property u koji se sprema status odgovora sa Servera. • Svaki put kada se readyState promjeni, funkcija koaj je spremljena u onreadystatechange će se izvršiti. • responseText • Podaci koje je server poslao mogu biti dohvaćeni preko responseText property ili preko responseXML property. • Napomena: zbog razloga sigurnosti, ajax-om se ne može pristupiti sadržaju izvan trenutne domene. Npr. ako koristimo Ajax na http://www.math.hr, onda možemo dohvačati podatke samo unutar te domene.

5. Onreadystatechange i readyState • Možemo ga koristiti za provjeru readyState: – 0: Zahtjev još nije inicijaliziran—prije poziva open() metode – 1: Zahtjev još nije poslan—nakon open(), a prije send(). – 2: Zahtjev poslan, ali nije procesiran – 3: Zahtjev je procesiran, ali nije završen – 4: Zahtjev je završen i može se pristupiti podacima sa responseText ili responseXML.

6. Mane AJAX-a • Nije lako prepoznati promjenu na stranici: Kada se prime promjene sa Servera, korisnici često ne mogu lako identificirati rezultat promjene. To je bitna razlika u odnosu na standardne web aplikacije (uč. Cijele stranice) • Utjecaj servera i preopterećenja mreže: Ukoliko su mreža ili server preopterećeni mogu poremetiti očekivani redosljed izvršavanja operacija na strani klijenta. • Smanjenje funkcionalnosti preglednika: Ajax može spriječiti korisnika u uspješnom korištenju Back gumba. Slično je i sa bookmark linkovima.

7. Primjer ajax aplikacije <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false;}}}} </script> Deklariranje varijable xmlHttp koja će sadržavati XMLHttpRequest object.

8. Primjer ajax aplikacije <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false;}}}} </script> Sa XMLHttp=new XMLHttpRequest() kreiramo objekt. – Ovo rješenje je za Firefox, Operu i Safari preglednike.

9. Primjer ajax aplikacije <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false;}}}} </script> – Ako ne kreiramo objekt, tada try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP") za Internet Explorer 6.0+, – Ako i tada ne kreitamo objekt, onda try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") za Internet Explorer 5.5+

10. Primjer ajax aplikacije <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false;}}}} </script> Ako niti jedna od ovih metoda ne kreira novi objekt tada korisnik najvjerojatnije ima vrlo zastarjeo preglednik i ispisuje se poruka da preglednik ne podržava AJAX.

11. Ajax sa php-om i bazom podataka • http://www.w3schools.com/php/php_ajax_database.asp