|
Podstawy AJAX
AJAX (ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) - technologia tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML. 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)
{ // odpowiedź została odebrana z serwera
}
else
{ // ciągle oczekuje na odpowiedź
}
Możliwe są następujące wartości readyState:
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:
|