Często zdarza się, że przeglądając fora internetowe spotykam się ze stwierdzeniem “nie używałem nigdy AJAX, nie wiem jak działa, jak z niego korzystać ani czym jest”. Tak naprawdę, aby zrozumieć czym jest AJAX wystarczą same podstawy JavaScript oraz protokołu HTTP. Nie jest to wcale tak skomplikowane jak może się wydawać.

Jak działa przeglądarka oraz inny klient sieciowy?

Przeczytaj jak funkcjonuje protokół HTTP

W linku powyżej opisałem dokładnie zasadę działania dlatego polecam zapoznanie się z artykułem. W skrócie, cały ruch sieciowy dla protokołu HTTP opiera się na żądaniach i odpowiedziach. Przeglądarka wysyła do serwera dane (np. z formularza metodą GET/POST, po kliknięciu w link), serwer odpowiada przesyłając czy to gotową stronę HTML, czy jakieś inne dane (JSON, XML, tekst). Cały ten proces można zobaczyć w narzędziach deweloperskich przeglądarki, najczęściej wybierając zakładkę “sieć” i klikając w konkretne żądanie. “Nagłówki” to dane jakie przeglądarka oraz serwer wysyłają rozmawiając ze sobą. Zawierają m.in. informacje o tym, jaki był status odpowiedzi (404 – nie znaleziono, 200 – wszystko w porządku, 500 – jakiś błąd wewnętrzny serwera itp.), jaki typ dokumentu został zwrócony (HTML, XML, JSON), jaka była jego długość. W “parametrach żądania” znajdziesz dane które zostały wysłane, przykładowo dane pochodzące z wysłanego formularza. “Odpowiedź” z kolei zawiera dane jakie zostały zwrócone przez serwer. Warto zawsze w razie wątpliwości przejrzeć te dane, aby upewnić się co konkretnie dzieje się pod maską.

Podsumowując, przeglądarka wysyła żądanie pod konkretny adres (opcjonalnie dołączając dane użytkownika pochodzące chociażby z formularza), serwer odpowiada w określonym formacie (HTML, XML, JSON, czysty tekst).

Czym jest AJAX?

Skrót AJAX oznacza Asynchronous JavaScript and XML i jest to zbiór technologii, które mają za zadanie wykonać to, o czym pisałem wcześniej – wysłać żądanie i przetworzyć odpowiedź. W jakich celach korzystamy z AJAX?

- stworzenie interaktywnej witryny na której dane przetwarzane są bez przeładowania całej strony
- pobieranie danych np. do wykresów, o użytkownikach, o dostępnych towarach w sklepie
- przedłużanie sesji w tle dla aktywnego użytkownika
- pobieranie danych z zewnętrznego API

W języku JavaScript żądanie można zrealizować za pomocą dwóch technologii:
- XMLHttpRequest – w skrócie XHR
- FetchAPI – następcy XHR

To od użytkownika zależy którą technikę wybierze.

Wracając do samego skrótu AJAX, co oznacza asynchroniczność? W ten właśnie asynchroniczny sposób wysyłane są domyślnie wszystkie żądania. Asynchroniczność powoduje, iż skrypt nie blokuje działania przeglądarki – dane wysyłane są w tle jako oddzielny proces, przeglądarka nie wstrzymuje wykonywania reszty skryptów na stronie, nie czeka na odpowiedź serwera. Dalsze działania, typu przetworzenie danych z odpowiedzi, wykonywane są gdy XHR albo FetchAPI zakończą działanie. Zwiększa to oczywiście szybkość działania przeglądarki – można przykładowo podczas ładowania strony wysłać 2 różne żądania, w tym samym czasie reszta strony będzie dalej regularnie parsowana. Gdyby zmienić działanie na synchroniczne, przeglądarka musiałaby zaczekać na odpowiedź z obu żądań, i dopiero po jej uzyskaniu, strona mogłaby być dalej parsowana.

Podsumowując, AJAX umożliwia asynchroniczne wysłanie zapytania (przy użyciu języka JavaScript) pod wskazany adres i przetworzenie odpowiedzi.

AJAX w praktyce

Większość popularnych bibliotek JS jak Angular, VueJS czy jQuery posiadają własne funkcje, które pozwalają w wygodny sposób korzystać z XHR lub FetchAPI. Dla przykładu biblioteka jQuery posiada metodę jQuery.ajax, której podstawowa definicja jest następująca:

$.ajax({
    url: 'jakiś adres',
    method: 'POST',
    data: {
        id: 1,
        imie: $('input[name="imie"]').val()
    }
  })
  // odpowiedź poprawna, domyślnie kod 200
  .done(function(data, textStatus, jqXHR) {
      // zmienna data będzie zawierać dane wysłane przez serwer w odpowiedzi
  })
  // odpowiedź błędna, np. kod 500
  .fail(function(jqXHR, textStatus, errorThrown) {
  });

Wykonując powyższe żądanie, robimy nic innego jak imitację wysłania danych z formularza. Wskazaliśmy metodę POST (większość formularzy jest w ten sposób wywoływana), wskazaliśmy URL pod który dane mają zostać wysłane. Załączyliśmy też dwie przykładowe dane: `id` zapisane na sztywno jako `1` oraz `imie` – pobrane z jakiegoś pola `input name=“imie”` formularza. Przy użyciu JS żądanie takie można wysłać po wykonaniu przez użytkownika konkretnej akcji – może to być kliknięcie przycisku, wpisanie danych w formularzu, czy po prostu równocześnie z załadowaniem strony. Po stronie serwera żądanie takie należy odpowiednio obsłużyć. Pisałem już wcześniej artykuł o żądaniach JSON z wykorzystaniem języka PHP. JSON jest bardzo popularnym formatem przy takich operacjach – jest czytelny dla użytkownika, można go łatwo wygenerować we wszystkich językach programowania, to uznany oraz uniwersalny format a przy tym nie jest zbytnio nadmiarowy (w przeciwieństwie do XML).

Podsumowanie

Technologia AJAX umożliwia tworzenie dynamicznych stron w dość prosty sposób. Nie wykonuje nic poza tym, co przezroczyście robi przeglądarka przez cały okres działania – wysyła żądanie i przetwarza odpowiedź. Jedno wiem na pewno – nie ma co się bać tej technologii gdyż jest prosta w użyciu, odciąża serwer przez generowanie małej porcji danych i jest szeroko stosowana przy programowaniu webowym.

• sieć
• http
• apache
• ssl
• php
• composer
• javascript
• jquery
• ajax
• html
• css
• pdo
• sql
• mysql
• postresql
• mongodb
• spl
• sql server
• psr
• programowanie
• regex