Kurs obiektowego JavaScript (35)

Autor: Damian Chodorek • Opublikowany: 7 listopada 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy

Zapytania do serwera. AJAX oraz XMLHttpRequest.

Jak wysłać żądanie HTTP przy pomocy języka JavaScript? Należy w tym celu użyć obiektu XMLHttpRequest. Pojawienie się tej funkcjonalności przyczyniło się do powstania aplikacji AJAX. Charakteryzują się one tym, że nie trzeba odświeżać całej strony WWW, kiedy potrzeba zmienić tylko jej fragment.

Jak to działa? Bardzo łatwo. Przy pomocy XMLHttpRequest należy wykonać zapytanie do serwera, który z zwróci jakieś dane. Na ich podstawie możemy dokonać aktualizacji tylko tego fragmentu strony WWW, którego potrzebujemy. Dzięki temu mamy możliwość tworzenia potężnych aplikacji internetowych.

Rozwinięciem skrótu AJAX jest Asynchronous JavaScript and XML. Z tej funkcjonalności korzystamy w dwóch krokach:

  • wysłanie żądania – ten etap polega na utworzeniu obiektu XMLHttpRequest oraz podpięciu do niego funkcji, która obsłuży nadejście informacji,
  • przetworzenie odpowiedzi serwera – nasza funkcja zostanie wywołana w momencie, kiedy nadejdzie odpowiedź z serwera, trzeba zrobić z nią coś użytecznego.

Wysyłanie żądania

//tworzymy obiekt:
var xhr=new XMLHttpRequest();

//podpinamy funkcję, która obsłuży odpowiedź serwera
xhr.onreadystatechange=myHandler;

xhr.open('GET', 'http://damianchodorek.com', true);

Pierwszy argument może przyjąć wartość GET, POST lub HEAD. Najbardziej popularne są dwie pierwsze. GET to sposób, w którym parametry zapytania prześlemy w URL’u, natomiast w metodzie POST dane będą niejawnie przesłane. Pierwszej używamy kiedy chcemy wysłać mało danych, natomiast drugiej kiedy jest ich sporo.

Trzeci parametr true – mówi, czy zapytanie ma być asynchroniczne czy nie. Na końcu chcemy wywołać metodę send().

xhr.send('');

Do tej metody przekazujemy dane, które chcemy wysłać do serwera. W przypadku metody GET wszystkie dane znajdują się w URL’u, ale jeśli chodzi o POST to parametry będą postaci: klucz=wartosc&klucz2=wartosc2.

Po wywołaniu ostatniej metody zapytanie zostało wysłane do serwera. Ponieważ jest asynchroniczne, to kod JS będzie wykonywał się dalej, a kiedy nadejdzie odpowiedź, zostanie wywołana nasza funkcja myHandler().

Przetworzenie odpowiedzi serwera

Do pola readystatechange przypisaliśmy funkcję. Obiekt XHR posiada również pole readyState. Za każdym razem kiedy zmieni się jego wartość, zostanie wywołana nasza funkcja. Możliwe wartości tego pola to:

  • 0 – nie zainicjalizowano,
  • 1 – ładowanie,
  • 2 – załadowano,
  • 3 – interaktywne,
  • 4 – ukończono.

Za powyższej listy wynika, że kiedy readyState przyjmie wartość 4, to odpowiedź z serwera nadeszła i może być przetworzona. Trzeba więc sprawdzić w naszej funkcji wartość tego pola. Mało tego, należy jeszcze sprawdzić kod odpowiedzi serwera. Dlaczego? Ponieważ może on wynosić 404 (nie znaleziono), przykładowo kiedy podałeś zły URL.

Mamy więc odpowiedź. Jest tylko taki problem, że odpowiedzią serwera jest informacja, która mówi, iż coś poszło nie tak. Poprawne dane nadeszły jeśli mamy kod 200 (OK), który oznacza, że serwer nie wykrył błędów i zwraca Ci to, czego się spodziewasz.

Żeby dobrać się do informacji, które przysłał serwer, korzystamy z pola responseText. Poniżej przykład funkcji myHandler() z uwzględnieniem poznanych wiadomości.

function myHandler(){
  if( xhr.readyState<4 ){
    return; //odpowiedź jest niegotowa
  }
 
  if( xhr.status!=200 ){
    alert('ERROR'); //serwer zgłasza błąd
    return;
  }

  //jeśli wszystko jest ok:
  alert(xhr.responseText); //wyświetlamy odpowiedź serwera
}

Brak konsystencji w IE

W starszych wersjach IE (do 7) zamiast XMLHttpRequest obiektem obsługującym zapytanie był ActiveXObject.

var xhr=new ActiveXObject('MSXML2.XMLHTTP.3.0');

Argument konstrukutora jest identyfikatorem obiektu, który chcemy stworzyć. Wynika to z faktu, że jest jego kilka wersji.

Ten sposób będziesz wykorzystywać wyłącznie w starych przeglądarkach IE, toteż nie będę się w niego zagłębiał. Napiszę tylko tyle, że warto skorzystać z biblioteki jQuery, a konkretnie z metod jQuery.get() lub jQuery.post(). Będą one działać na różnych przeglądarkach, a więc Ty jako programista, nie musisz się martwić o poprawne obsłużenie każdego przypadku.

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (36)

Zobacz również
Kurs obiektowego JavaScript (33)Obsługa zdarzeń. Model bąbelkowy.
Kurs obiektowego JavaScript (34)Zapobieganie działaniu domyślnemu. Rodzaje zdarzeń.
Kurs obiektowego JavaScript (36)Popularny format JSON.
Kurs obiektowego JavaScript (37)Popularne biblioteki JS.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.