A | A | A

PODSTAWY AJAX

AJAX jest niedawno ukutą nazwą na dwie potężne cechy przeglądarek WWW, które, choć dostępne od lat, były pomijane przez wielu autorów stron, aż do niedawna, gdy na rynku ukazały się takie aplikacje, jak Gmail, Google Suggest i Google Maps.

Zapytanie HTTP

W celu stworzenia zapytania HTTP przy użyciu JavaScriptu , potrzebna jest instancja klasy, która posiada żądaną funkcjonalność. Taka klasa została po raz pierwszy wprowadzona w Internet Explorerze, jako obiekt ActiveX, pod nazwą XMLHTTP. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę XMLHttpRequest, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. W rezultacie, w celu stworzenia między-przeglądarkowej instancji (obiektu) potrzebnej klasy:

if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ...
http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE
http_request = new
ActiveXObject("Microsoft.XMLHTTP");
}

Niektóre wersje przeglądarek opartych na technologii Mozilli nie zadziałają poprawnie, jeżeli odpowiedź z serwera nie będzie opisana XML-owym nagłówkiem mime-type. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to text/xml.

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

Następnie należy zdecydować, co zrobić po otrzymaniu od serwera odpowiedzi na zapytanie. Na tym etapie wystarczy powiedzieć obiektowi zapytania HTTP, która funkcja JavaScript będzie opracowywała wynik. Można to uzyskać poprzez ustawienie właściwości onreadystatechange obiektu funkcji JavaScript, na przykład:

http_request.onreadystatechange = nameOfTheFunction;

Brak jest nawiasów za nazwą funkcji i nie są przekazywane żadne parametry aby przypisać referencję do funkcji, a nie wywołać ją. Można także, zamiast podawać nazwę funkcji, użyć techniki JavaScript do definiowania funkcji w locie (zwanej "funkcją anonimową") i określić akcje, które przetworzą wynik natychmiast, jak na przykład:

http_request.onreadystatechange = function(){
// instrukcje };

Następnie, kiedy zostało już zadeklarowane, co będzie się działo zaraz po odebraniu odpowiedzi, należy wykonać zapytanie. W tym celu należy wywołać metody open() i send() klasy zapytania HTTP, jak demonstruje to przykład poniżej:

http_request.open('GET','http://www.przyklad.org/pewien.plik', true);
http_request.send(null);

Pierwszy parametr metody open() określa metodę zapytania HTTP - GET, POST, HEAD lub dowolną inną metodę którą obsługuje serwer. Dla zachowania zgodności ze standardem nazwę metody należy wpisać dużymi literami. W przeciwnym razie niektóre przeglądarki (np. Firefox) mogą nie przetworzyć zapytania. Drugi parametr określa URL strony, która ma zostać odpytana. W celu zwiększenia bezpieczeństwa, nie jest możliwe odpytywanie stron znajdujących się w domenach zewnętrznych (tzw. 3rd-party domains). W przypadku wpisania złej nazwy domeny przy wywołaniu metody open() zwrócona zostanie odpowiedź z błędem "brak dostępu" (permission denied). Trzeci parametr decyduje, czy zapytanie ma być asynchroniczne. Jeżeli tak, wykonywanie funkcji JavaScript będzie kontynuowane podczas oczekiwania na odpowiedź z serwera. Parametr metody send() może być dowolną daną, którą funkcja wyśle do serwera w przypadku użycia metody POST. Dane powinny być umieszczone w formie używanej przez ciągi zapytań. Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją encodeURIcomponent.

Obsługa odpowiedzi serwera

W trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi:

http_request.onreadystatechange = nazwaFunkcji;

Funkcja musi najpierw sprawdzić stan zapytania. Jeżeli status ma wartość 4, oznacza to, że udało się pobrać pełną odpowiedź z serwera i można kontynuować jej przetwarzanie.

if (http_request.readyState == 4) {
// wszystko jest OK, odpowiedź została odebrana } else {
// ciągle nie gotowe }

Możliwe są następujące wartości readyState:

  • 0 (niezainicjowane)
  • 1 (w trakcie pobierania)
  • 2 (pobrano)
  • 3 (interaktywne)
  • 4 (gotowe)

Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na stronie W3C. Jeśli została zwrócona prawidłowa odpowiedź 200 oznacza to, że zapytanie odnalazło szukaną stronę:

if (http_request.status == 200) {
// świetnie!! } else {
// wystąpił jakiś problem z zapytaniem,
// na przykład odpowiedzią mogło być 404 (Nie odnaleziono)
// lub 500 (Wewnętrzny błąd serwera)
}

Przetwarzanie danych

Po sprawdzeniu stanu zapytania i kodu statusu odpowiedzi, można przystąpić do przetwarzania danych z serwera. Istnieją dwie możliwości dostania się do danych:

  • http_request.responseText – zwróci odpowiedź serwera jako ciąg znakowy
  • http_request.responseXML – zwróci odpowiedź jako obiekt XMLDocument, z którym można pracować przy użyciu funkcji DOM JavaScriptu.

Skocz do góry strony ↑