Witryna wykonana w technologii Ajax składa się z dwóch komponentów: dokumentu HTML oraz danych udostępnianych przez serwer WWW. Przeglądarka w odpowiedzi na interakcje użytkownika (np. kliknięcie ikony +) wysyła zapytanie HTTP do serwera. W odpowiedzi, serwer przekazuje do strony WWW (dokładniej: do skryptu JavaScript zawartego w dokumencie HTML) dane.
W tym kroku skupimy się na wysłaniu żądania oraz odebraniu wyników.
Do wysyłania żądań HTTP obiekt XMLHttpRequest ma metody open() oraz send(). Metoda open() przygotowuje zapytanie HTTP, a send() rozpoczyna transmisję.
Funkcja open() ma trzy parametry: pierwszym jest nazwa metody protokołu HTTP, drugim — adres URL danych, zaś trzecim — flaga logiczna ustalająca, czy żądanie ma być realizowane asynchronicznie (tj. w tle, bez czekania na zakończenie).
Wywołanie:
...brak dostępu...
przygotuje asynchroniczne żądanie GET dotyczące dokumentu dane.txt. Podany adres URL może dotyczyć nie tylko pliku tekstowego, ale pliku XML, PHP, ASP, JSP czy dowolnego innego zasobu dostępnego w ramach usługi WWW:
...brak dostępu...
Może to również być pełny adres URL odnoszący się do innego serwera:
...brak dostępu...
czy adres zawierający zmienne URL (tj. fragment występujący w adresie URL po znaku zapytania):
...brak dostępu...
Żądanie przygotowane metodą open() wysyłamy wywołując metodę send():
...brak dostępu...
Metoda send() ma jeden parametr: dane dołączane do zapytania. Parametr ten należy wykorzystać w przypadku metody POST. Jeśli stosowaną metodą jest GET, wówczas metodę send() wywołujemy podając parametr null.
Jeśli zapytanie jest wysyłane asynchronicznie, to wykonanie skryptu JavaScript nie zostanie wstrzymane. Innymi słowy: skrypt JavaScript nie będzie czekał, aż zapytanie zostanie wysłane, a serwer zwróci wynik. Skrypt będzie wykonywany dalej, a żądanie HTTP będzie wykonywane równolegle, w tle.
W celu odebrania wyników zwracanych przez obiekt XMLHttpRequest należy przygotować funkcję, która zostanie wywołana po zakończeniu transmisji. Funkcja ta może mieć dowolną nazwę, np. processResponse(). Należy ją przypisać do obsługi zdarzenia onreadystatechange obiektu XMLHttpRequest:
...brak dostępu...
W treści funkcji sprawdzamy czy nadeszła odpowiedź na wysłane żądanie oraz czy żądanie HTTP zostało poprawnie przetworzone przez serwer. Właściwość readyState o wartości 4 informuje o tym, że nadeszła odpowiedź na wysłane żądanie. Zaś właściwość status zawiera kod odpowiedzi HTTP. Wartość 200 oznacza, że serwer poprawnie przetworzył żądanie.
Funkcja odpowiedzialna za odbieranie danych z serwera przyjmuje postać:
...brak dostępu...
Zwróć uwagę, że jest w niej wykorzystana zmienna globalna r. Jest to oczywiście obiekt XHMLHttpRequest.
Przejdźmy do wykonania kompletnego przykładu demonstrującego wysyłanie żądań HTTP i odbieranie wyników w formacie tekstowym. Takie rozwiązania są określane mianem AHAH.
Rozwiązanie składa się z dwóch plików: index.html oraz dane.txt. Plik dane.txt zawiera jedną linijkę:
...brak dostępu...
Listing 2 przedstawia zarys strony index.html. Skrypt JavaScript zawarty w nagłówku strony rozpoczyna się od definicji funkcji getXMLHttpRequest(). Następnie funkcja ta jest wywołana, a zwrócony przez nią obiekt przypisany do zmiennej r. Kolejnym elementem jest definicja funkcji processResponse(). Funkcja ta będzie wywołana po zakończeniu transmisji danych z serwera. W jej treści odwołujemy się do zmiennej globalnej r — tj. utworzonego wcześniej obiektu XMLHttpRequest. Skrypt kończymy wywołując metody open(), send() oraz przypisując funkcję processResponse() do obsługi zdarzenia onreadystatechange.
...brak dostępu...
Listing 2. Wysyłanie zapytań i odbieranie danych tekstowych: zarys strony index.html
Fragmentem odpowiedzialnym za wyświetlenie danych pochodzących z serwera jest wiersz:
...brak dostępu...
Dane (w formacie tekstowym) pochodzące z serwera (tj. z pliku dane.txt) są dostępne we właściwości responseText obiektu XMLHttpRequest.
Tak wykonana strona nie wykorzystuje asynchroniczności transferu: dane wysyłane przez serwer zostaną wyświetlone (w okienku informacyjnym alert()) natychmiast po odwiedzeniu strony index.html.
Opisany przykład wykorzystuje protokół HTTP. Nie można go więc uruchomić w wersji offline (np. z płyty CD). W celu uruchomienia przykładu trzeba dysponować zainstalowanym serwerem WWW (np. Apache). Po przekopiowaniu plików do folderu htdocs/, który jest przeznaczony na strony WWW, przykład uruchamiamy odwiedzając stronę http://localhost.
Strona prezentująca wymianę danych w formacie XML w głównym zarysie wygląda podobnie do strony stosującej surowy tekst. Składa się z dwóch plików: index.html oraz dane.xml.
Użycie języka XML do transferu danych wymaga wymiany dwóch elementów. Po pierwsze plik danych dane.xml zawiera XML:
...brak dostępu...
Po drugie dane XML odebrane z serwera należy przed wyświetleniem przetworzyć.
Dostęp do danych w formacie XML zapewnia właściwość responseXML obiektu XMLHttpRequest. Do przetworzenia kodu XML służą m.in.: metoda getElementsByTagName() i właściwości childNodes oraz nodeValue.
Wewnątrz funkcji processResponse() najpierw odbieramy XML zwrócony przez serwer:
...brak dostępu...
Następnie wyszukujemy element XML o nazwie tekst:
...brak dostępu...
po czym pobieramy pierwszy ze znalezionych elementów <tekst>:
...brak dostępu...
Teraz przechodzimy do potomków tj. elementów zawartych wewnątrz elementu <tekst>...</tekst>:
...brak dostępu...
i pobieramy pierwszego z nich:
...brak dostępu...
Wartość potomka umieszczamy w zmiennej x6:
...brak dostępu...
i wyświetlamy w oknie informacyjnym:
...brak dostępu...
Całość możemy wykonać jedną instrukcją:
...brak dostępu...
Zarys strony index.html pobierającej z serwera dane w formacie XML jest przedstawiony na listingu 3.
...brak dostępu...
Listing 3. Wysyłanie zapytań i odbieranie danych w formacie XML: zarys strony index.html
