AJAX (AJAX) to technologia webowa umożliwiająca komunikację z serwerem bez przeładowywania strony. Przykładami zastosowań są sprawdzanie dostępności nazwy użytkownika podczas rejestracji, dodawanie produktu do koszyka bez przeładowywania strony, Google Suggest itp. AJAX opiera się na obiekcie XMLHttpRequest. Jak wynika z nazwy, obiekt ten został zaprojektowany do pracy z XML, co jednak nie przeszkadza w wykorzystywaniu go do innych celów.
Zasada działania jest następująca:
skrypt składa się z dwóch części
- część kliencka: wykonuje się po stronie klienta, pisana jest w JavaScript
- część serwerowa: wykonuje się na serwerze, może być napisana w dowolnym języku programowania obsługującym żądania GET/POST
Etap tworzenia części klienckiej:
- zebranie i przygotowanie danych do wysłania żądania na serwer;
- utworzenie instancji obiektu XMLHttpRequest;
- ustawienie funkcji obsługi zdarzenia onreadystatechange. Zdarzenie to występuje przy każdej zmianie stanu obiektu XMLHttpRequest (patrz tabela poniżej). Ta funkcja jest zasadniczo główną częścią skryptu, ponieważ to w niej następuje obsługa odpowiedzi serwera;
- otwarcie połączenia z podaniem typu żądania (GET lub POST), adresu URL części serwerowej, flagi trybu asynchronicznego oraz nazwy użytkownika i hasła (jeśli wymagane);
- wysyłka samego żądania;
- obsługa odpowiedzi części serwerowej.
Tworzenie obiektu XMLHttpRequest różni się w zależności od przeglądarki Internet Explorer oraz innych przeglądarek, dlatego dla zapewnienia kompatybilności operację tę należy powielić na różne sposoby:
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}Użycie metody GET, ustawienie obsługi zdarzenia onreadystatechange i wysłanie żądania:
1req.open("GET", url, true);2req.onreadystatechange = function() {3if (req.readyState == 4) { обработка результатов } 4}; 5req.send(null); //отправка запроса без параметров, т.к. они установлены в url W obsłudze zdarzenia onreadystatechange należy koniecznie sprawdzić warunek req.readyState == 4, który oznacza, że dane zostały załadowane. Dodatkowo można również sprawdzać req.status == 200. Patrz tabele poniżej.
Przy użyciu obiektu XMLHttpRequest z metodą POST należy dodatkowo wysłać nagłówek:
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'); //теперь параметры передаются здесьKilka parametrów jest oddzielonych znakiem ampersandu.
Pełny przykład:
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");Część serwerowa (URL w req.open) może być napisana w dowolnym języku, pod warunkiem że obsługuje żądania GET/POST. Zwracana wartość (req.responseText) jest generowana przez standardowe wyjście. Przykładowa część serwerowa w PHP:
1if(isset($_POST['param'])) 2echo ($_SERVER['REMOTE_ADDR'])?"Your IP ".$_SERVER['REMOTE_ADDR']:"IP неизвестен";Nieco materiałów pomocniczych:
Metody klasy XMLHttpRequest
| Metoda | Opis |
|---|---|
| abort() | anuluje bieżące żądanie |
| getAllResponseHeaders() | zwraca pełną listę nagłówków HTTP w postaci ciągu znaków |
| getResponseHeader(headerName) | zwraca wartość określonego nagłówka |
| open(method, URL, async, userName, password) | określa metodę, adres URL oraz inne opcjonalne parametry żądania; parametr async określa, czy praca odbywa się w trybie asynchronicznym |
| send(content) | wysyła żądanie na serwer |
| setRequestHeader(label, value) | dodaje nagłówek HTTP do żądania |
| overrideMimeType(mimeType) | umożliwia określenie typu MIME dokumentu, jeśli serwer go nie przesłał lub przesłał nieprawidłowo. Uwaga: metoda ta nie jest dostępna w przeglądarce Internet Explorer! |
Właściwości klasy XMLHttpRequest
| Właściwość | Opis |
|---|---|
| onreadystatechange | obsługa zdarzenia wywoływanego przy każdej zmianie stanu obiektu |
| readyState | zwraca bieżący stan obiektu (0 — niezainicjowany, 1 — otwarty, 2 — wysyłanie danych, 3 — odbieranie danych, 4 — dane załadowane) |
| responseText | tekst odpowiedzi na żądanie |
| responseXML | tekst odpowiedzi na żądanie w formacie XML, który może zostać następnie przeanalizowany za pomocą DOM |
| status | zwraca status HTTP w postaci liczby (404 — „Not Found”, 200 — „OK” itp.) |
| statusText | zwraca status w postaci ciągu znaków („Not Found”, „OK” itp.) |