AJAX (Ajax) je webová technologie, která umožňuje komunikaci se serverem bez obnovení stránky. Příklady použití zahrnují kontrolu dostupnosti uživatelského jména při registraci, odeslání zboží do košíku bez obnovení stránky, Google Suggest atd. AJAX je založen na objektu XMLHttpRequest. Jak název napovídá, byl původně navržen pro práci s XML, což však nebrání jeho použití i pro jiné účely.
Princip fungování je následující:
Skript se skládá ze dvou částí
- klientská část: běží na straně klienta, je napsána v JavaScriptu
- serverová část: běží na serveru, může být napsána v libovolném programovacím jazyce, který rozumí GET/POST požadavkům
Kroky pro vytvoření klientské části:
- shromáždění a příprava informací pro odeslání požadavku na server;
- vytvoření instance objektu XMLHttpRequest;
- nastavení obslužné funkce pro událost onreadystatechange. Tato událost nastává při každé změně stavu objektu XMLHttpRequest (viz tabulka níže). Tato funkce je ve skutečnosti hlavní součástí skriptu, protože právě v ní dochází k zpracování odpovědi serveru;
- otevření spojení s uvedením typu požadavku (GET nebo POST), URL serverové části, příznaku asynchronního režimu a uživatelského jména a hesla (pokud je to nutné);
- přímé odeslání požadavku;
- zpracování odpovědi serverové části.
Vytvoření objektu XMLHttpRequest se liší pro Internet Explorer a ostatní prohlížeče, takže pro zajištění kompatibility je třeba tuto operaci provést různými způsoby:
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}Použití metody GET, nastavení obslužné funkce pro událost onreadystatechange a odeslání požadavku:
1req.open("GET", url, true);2req.onreadystatechange = function() {3if (req.readyState == 4) { обработка результатов } 4}; 5req.send(null); //отправка запроса без параметров, т.к. они установлены в url V obslužné funkci události onreadystatechange je nutné vždy zkontrolovat podmínku req.readyState == 4, která signalizuje, že jsou data načtena. Dále lze také zkontrolovat req.status == 200. Viz tabulky níže.
Při použití objektu XMLHttpRequest s metodou POST je additionally nutné odeslat hlavičku:
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'); //теперь параметры передаются здесьNěkolik parametrů je odděleno ampersandy.
Úplný příklad:
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");Serverová část (url v req.open) může být napsána v čemkoli, pokud rozumí požadavkům GET/POST. Vrácená hodnota (req.responseText) je generována standardním výstupem. Příklad serverové části v PHP:
1if(isset($_POST['param'])) 2echo ($_SERVER['REMOTE_ADDR'])?"Your IP ".$_SERVER['REMOTE_ADDR']:"IP неизвестен";Několik referenčních materiálů:
Metody třídy XMLHttpRequest
| Metoda | Popis |
|---|---|
| abort() | zruší aktuální požadavek |
| getAllResponseHeaders() | vrací kompletní seznam HTTP hlaviček ve formě řetězce |
| getResponseHeader(headerName) | vrací hodnotu zadané hlavičky |
| open(method, URL, async, userName, password) | určuje metodu, URL a další volitelné parametry požadavku; parametr async určuje, zda probíhá práce v asynchronním režimu |
| send(content) | odesílá požadavek na server |
| setRequestHeader(label, value) | přidá HTTP hlavičku k požadavku |
| overrideMimeType(mimeType) | umožňuje zadat mime-typ dokumentu, pokud ho server neposkytl nebo ho poskytl nesprávně. Pozor: tato metoda není dostupná v Internet Exploreru! |
Vlastnosti třídy XMLHttpRequest
| Vlastnost | Popis |
|---|---|
| onreadystatechange | obslužná rutina události, která je vyvolána při každé změně stavu objektu |
| readyState | vrací aktuální stav objektu (0 — neinicializován, 1 — otevřen, 2 — odesílání dat, 3 — přijímání dat a 4 — data načtena) |
| responseText | text odpovědi na požadavek |
| responseXML | text odpovědi na požadavek ve formátu XML, který lze následně parsovat pomocí DOM |
| status | vrací HTTP status ve formě čísla (404 — „Not Found“, 200 — „OK“ atd.) |
| statusText | vrací status ve formě řetězce („Not Found“, „OK“ atd.) |