poniedziałek, 2020-11-23

Asynchronous JavaScript and XML

Technika określana skrótem AJAX (Asynchronous JavaScript and XML) pozwala na dynamiczne ściąganie i wysyłanie danych bez potrzeby przeładowania całej strony internetowej. Chyba jej najbardziej spektakularnym przykładem są mapy Google, użytkownik może je np. skalować i przesuwać w płynny sposób, nowe grafiki pojawiają się bez przeładowania dokumentu. Podobne mechanizmy znajdziesz na Gmailu, Classroomie, Facebooku i w wielu innych serwisach.

Z techniką AJAX wiąże się obiekt XMLHttpRequest dostępny we wszystkich popularnych nowoczesnych przeglądarkach. Wcześniej jego implementacje w przeglądarce Internet Explorer były niezgodne w różnych wersjach programu i wymagały wywołania w stylu ActiveXObject("Microsoft.XMLHTTP"). Jeśli chcesz zapewnić kompatybilność z historycznymi przeglądarkami, biorąc pod uwagę jeszcze inne problemy, najlepiej jest skorzystać z dodatkowej biblioteki oferującej takie możliwości lub przestudiować jej kod i dopiero napisać własne rozwiązanie. XMLHttpRequest ma wiele własności i metod, w tym materiale ograniczono się do tych podstawowych.

Zasada pracy z obiektem XMLHttpRequest jest prosta. Po utworzeniu instancji obiektu należy otworzyć adres URL i wysłać żądanie. Informacje i dane zwrócone przez serwer staną się dostępne jako własności obiektu żądania. Pierwszy przykład demonstruje sposób wysłania żądania, skrypt nie zajmuje się odebraniem odpowiedzi.

var ajax = new XMLHttpRequest();
ajax.open("GET", "https://ckziumragowo.pl/service/datetime", true);
ajax.send();

Metoda open() przyjmuje trzy argumenty. Pierwszy z nich to nazwa zastosowanej metody HTTP. Jako drugi przekazany zostaje adres żądania. Ostatni określa, czy połączenie ma być asynchroniczne, czy synchroniczne. Połączenie synchroniczne zatrzymuje wykonywanie skryptu do czasu uzyskania odpowiedzi serwera i jest wysoce niezalecane. Metoda send() wysyła żądanie, opcjonalnie jako argument może przyjąć dodatkowe dane do wysłania.

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  document.querySelector('#tester').innerHTML = this.responseText;
};
ajax.open("GET", "https://ckziumragowo.pl/service/datetime", true);
ajax.send();

W drugim przykładzie została obsłużona odpowiedź serwera. Poprzez ustawienie własności onreadystatechange na wywołanie funkcji anonimowej odebrane dane wstawiono w postaci tekstu do wybranego elementu HTML. Odebrane dane zostały potraktowane jako ciąg znaków (responseText), możliwe jest także interpretowanie ich jako obiekt XMLDocument (responseXML).

Jak do tej pory, skrypt nie zawiera żadnej obsługi błędów. Biorąc pod uwagę, że żądanie jest kierowane do zasobu zewnętrznego, nie można być pewnym uzyskania odpowiedzi. Przykładowe żądanie wykonano po protokole HTTP, w jego przypadku kod 200 oznacza uzyskanie żądanego dokumentu. Dodatkowo można sprawdzić stan zapytania, który można odczytać z własności readyState. Przewidziano pięć możliwych wartości: 0 (niezainicjowane), 1 (w trakcie pobierania), 2 (pobrano), 3 (interaktywne), 4 (gotowe). Kolejny przykład zawiera prostą kontrolę błędów.

document.querySelector('#tester button').addEventListener('click', function() {
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function() {
    if(ajax.readyState === 4 && ajax.status === 200) {
    	document.querySelector('#tester p').innerHTML = this.responseText;
    }
  };
  ajax.open("GET", "https://ckziumragowo.pl/service/datetime", true);
  ajax.send();
});

Przykładowa aplikacja

Na podstawie prezentowanych przykładów zbudowano prostą aplikację, która pobiera ze zdalnego serwera datę i czas.

Kod HTML aplikacji

<div id="tester">
<button>Pobierz datę i czas</button>
<p></p>
</div>

Kod JavaScript aplikacji

document.querySelector('#tester button').addEventListener('click', function() {
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function() {
    if(ajax.readyState === 4 && ajax.status === 200) {
    	document.querySelector('#tester p').innerHTML = this.responseText;
    }
  };
  ajax.open("GET", "https://ckziumragowo.pl/service/datetime", true);
  ajax.send();
});