AJAX (аякс) je web tehnologija koja omogućava interakciju sa serverom bez osvežavanja stranice. Primeri upotrebe uključuju proveru da li je korisničko ime zauzeto prilikom registracije, slanje proizvoda u korpu bez osvežavanja, Google Suggest i slično. AJAX se zasniva na objektu XMLHttpRequest. Kao što se vidi iz naziva, on je zamišljen za rad sa XML-om, što, međutim, ne sprečava njegovu upotrebu i u druge svrhe.
Princip rada je sledeći:
skripta se sastoji od dva dela
- klijentski deo: izvršava se na strani klijenta, piše se u JavaScript-u
- server-side deo: izvršava se na serveru, može biti napisan u bilo kom programskom jeziku koji razume GET/POST zahteve
Faze pisanja klijentskog dela:
- prikupljanje i priprema informacija za slanje zahteva na server;
- kreiranje instance objekta XMLHttpRequest;
- postavljanje funkcije za obradu događaja onreadystatechange. Ovaj događaj se javlja pri svakoj promeni stanja objekta XMLHttpRequest (vidi tabelu ispod). Ova funkcija je zapravo glavni deo skripte, jer se u njoj obrađuje odgovor servera;
- otvaranje konekcije uz navođenje tipa zahteva (GET ili POST), URL server-side dela, zastavice asinhronog režima i imena i lozinke korisnika (ako je potrebno);
- direktno slanje zahteva;
- obrada odgovora server-side dela.
Kreiranje objekta XMLHttpRequest razlikuje se za Internet Explorer i druge pretraživače, stoga se ova operacija mora duplirati različitim načinima radi kompatibilnosti:
01var req;0203if (window.XMLHttpRequest) // normal browser04req = new XMLHttpRequest(); 05else if (window.ActiveXObject) { //IE06try {07req = new ActiveXObject('Msxml2.XMLHTTP'); // IE разных версий08} catch (e){} // может создавать 09try { // объект по разному10req = new ActiveXObject('Microsoft.XMLHTTP');11} catch (e){}12}Korišćenje GET metode, postavljanje obrade događaja onreadystatechange i slanje zahteva:
1req.open("GET", url, true);2req.onreadystatechange = function() {3if (req.readyState == 4) { обработка результатов } 4}; 5req.send(null); //отправка запроса без параметров, т.к. они установлены в url U obradi događaja onreadystatechange obavezno je potrebno proveriti uslov req.readyState == 4, koji ukazuje da su podaci učitaní. Dodatno se može proveriti i req.status == 200. Vidi tabele ispod.
Kod korišćenja objekta XMLHttpRequest sa POST metodom, potrebno je dodatno poslati header:
1req.open("POST", url, true);2req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");3req.onreadystatechange = function() {4if (req.readyState == 4) { обработка результатов } 5}; 6req.send('param1=1¶m2=0'); //теперь параметры передаются здесьViše parametara razdvaja se znakom ampersand.
Potpuni primer:
01var req;0203if (window.XMLHttpRequest) req = new XMLHttpRequest(); 04else if (window.ActiveXObject) {05try {06req = new ActiveXObject('Msxml2.XMLHTTP');07} catch (e){}08try {09req = new ActiveXObject('Microsoft.XMLHTTP');10} catch (e){}11}1213if (req) {14req.onreadystatechange = function() {15if (req.readyState == 4 && req.status == 200) { alert(req.responseText); } 16}; 17req.open("POST", 'xmlhttp.php', true);18req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");19req.send('param=1&ajax=1');20} 21else alert("Браузер не поддерживает AJAX");Deo na serveru (URL u req.open) može biti napisan u bilo kom jeziku, sve dok podržava GET/POST zahteve. Vraćena vrednost (req.responseText) se generiše standardnim izlazom. Primer server-side dela u PHP-u:
1if(isset($_POST['param'])) 2echo ($_SERVER['REMOTE_ADDR'])?"Your IP ".$_SERVER['REMOTE_ADDR']:"IP неизвестен";Neke referentne informacije:
Metode klase XMLHttpRequest
| Metoda | Opis |
|---|---|
| abort() | otkazuje trenutni zahtev |
| getAllResponseHeaders() | vrati kompletan spisak HTTP zaglavlja u obliku niza |
| getResponseHeader(headerName) | vrati vrednost navedenog zaglavlja |
| open(method, URL, async, userName, password) | određuje metodu, URL i druge opcionale parametre zahteva; parametar async određuje da li se rad odvija u asinhronom režimu |
| send(content) | šalje zahtev ka serveru |
| setRequestHeader(label, value) | dodaje HTTP zaglavlje zahtevu |
| overrideMimeType(mimeType) | omogućava da se navede mime-tip dokumenta, ako ga server nije preneo ili je preneo pogrešno. Pažnja: metoda ne postoji u Internet Explorer-u! |
Svojstva klase XMLHttpRequest
| Svojstvo | Opis |
|---|---|
| onreadystatechange | obradnik događaja koji se dešava pri svakoj promeni stanja objekta |
| readyState | vrati trenutno stanje objekta (0 — nije inicijalizovan, 1 — otvoren, 2 — slanje podataka, 3 — primanje podataka i 4 — podaci su učitani) |
| responseText | tekst odgovora na zahtev |
| responseXML | tekst odgovora na zahtev u obliku XML-a, koji se zatim može parsirati pomoću DOM-a |
| status | vrati HTTP status u obliku broja (404 — „Not Found“, 200 — „OK“ itd.) |
| statusText | vrati status u obliku niza („Not Found“, „OK“ itd.) |