AJAX (Asynchronous JavaScript and XML) nie jest zbyt znanym pojęciem. A co ciekawe, niemal każdy użytkownik Internetu korzysta z wymienionej technologii kilka, a nawet kilkanaście razy dziennie. To właśnie Ajax sprawia, że przydzielane w mediach społecznościowych laki widoczne są od razu, a koszyk w e-commerce aktualizuje się bez potrzeby przeładowywania strony. Co jeszcze warto wiedzieć na ten temat? Czym dokładnie jest Ajax i jak działa?
Czym jest Ajax?
AJAX to skrót od ang. Asynchronous JavaScript and XML, co tłumaczymy jako asynchroniczny JavaScript i XML. Jest to technologia umożliwiająca przesyłanie danych między przeglądarką a serwerem w tle, bez konieczności przeładowywania całej strony WWW. Komunikację z serwerem w tle umożliwia obiekt XMLHttpRequest.
Dzięki asynchroniczności zapytań, aktywność użytkownika nie jest zakłócana, a witryna działa wydajnie i płynnie. W czasach, w których użytkownicy wyszukiwarki oczekują natychmiastowych odpowiedzi i płynnego działania aplikacji, opisywane rozwiązanie może okazać się dobrym wyborem.
Jak działa Ajax?
Gdy użytkownik przeprowadza określoną akcję, np. klika przycisk, zawierająca kod JavaScript witryna wysyła na serwer żądanie HTTP. Serwer przetwarza otrzymane żądanie i zwraca odpowiedź w formacie JSON, XML lub HTML.
JavaScript, przetworzeniu odpowiedzi, dynamicznie aktualizuje odpowiedni fragment strony, a następnie wyświetla nowe dane lub zmienia zawartość witryny. Użytkownik natychmiast widzi rezultaty przeprowadzonych działań.
Takie rozwiązanie sprawia, że strony działają szybciej, są bardziej responsywne i przyjazne dla użytkownika.
| Działanie użytkownika | Tradycyjne ładowanie strony | AJAX |
|---|---|---|
| Załadowanie strony głównej | 2.5 s | 1.0 s |
| Przesłanie formularza kontaktowego | 3.2 s | 1.2 s |
| Odświeżenie sekcji komentarzy | 3.0 s | 0.8 s |
| Dynamiczne filtrowanie wyników wyszukiwania | 4.0 s | 1.5 s |
| Dodanie produktu do koszyka | 3.5 s | 1.2 s |
Ajax – technologie
Asynchroniczna komunikacja między przeglądarką a serwerem wymaga wykorzystania odpowiednich rozwiązań i języków programowania, są to XMLHttpRequest, HTML, CSS, JavaScript, JSON, XML.
XMLHttpRequest
Obiekt XMLHttpRequest to klasa umożliwiająca asynchroniczną wymianę danych między przeglądarką a serwerem. Jest to kluczowy element technologii Ajax, dzięki któremu możliwe jest wysyłanie żądań http, przetwarzanie danych oraz wyświetlanie rezultatów działań bez konieczności przeładowywania całej strony.
JavaScript
JavaScript, w skrócie JS, to język programowania umożliwiający tworzenie interaktywnych stron internetowych. JS pozwala na obsługę zdarzeń, manipulowanie elementami HTML i CSS, integrację z API oraz tworzenie złożonych aplikacji webowych.
XML (eXtensible Markup Language)
XML (eXtensible Markup Language) to uniwersalny język znaczników wykorzystywany do formatowania danych. Choć XML w aplikacjach internetowych często zastępowany jest przez JSON to, nadal znajduje zastosowanie, na przykład w aplikacjach biznesowych.
JSON (JavaScript Object Notation)
JSON (JavaScript Object Notation) to lekki format wymiany danych, który bazuje na podzbiorze JS. JSON umożliwia przesyłanie danych strukturalnych w formacie tekstowym. JSON często wykorzystywany jest w aplikacjach internetowych, głównie do przesyłania danych między klientem a serwerem, jest także standardem w nowoczesnych technologiach internetowych i API.
HTML
HTML, z ang. HyperText Markup Language, to hipertekstowy język znaczników. HTML opisuje strukturę i zawartość strony www za pomocą znaczników (tagów), takich jak <h1> dla nagłówków, <p> dla akapitów czy <a> dla linków. HTML definiuje, jakie elementy mają być wyświetlane w przeglądarce, a w połączeniu z CSS i JavaScript umożliwia tworzenie atrakcyjnych i interaktywnych witryn.
CSS
CSS, po rozwinięciu Cascading Style Sheets, czyli kaskadowe arkusze stylów, umożliwia opisywanie wyglądu i formatu stron internetowych stworzonych w HTML. CSS pozwala na kontrolowanie takich elementów jak kolory, czcionki, układ, odstępy czy animacje.
Jakie są główne zalety technologii Ajax?
AJAX ma wiele zalet, które sprawiają, że jest technologią, która odgrywa ważną rolę w tworzeniu nowoczesnych aplikacji internetowych.
- Dzięki asynchronicznej komunikacji, nie ma konieczności odświeżania strony www, aplikacja płynnie, jest ważnym czynnikiem UX.
- Aplikacje pobierają z serwera wyłącznie niezbędne dane, nie całą zawartość strony. Redukuje to ilość przesyłanych danych i przyspiesza czas ładowania witryny.
- AJAX działa w tle, użytkownik może kontynuować interakcję ze stroną, w momencie, w którym następuje przetwarzanie i pobieranie danych.
- AJAX wpływa także na interfejs użytkownika (UI), sprawia, że aplikacje są responsywne, działają dynamicznie i są bardziej intuicyjne w obsłudze.
- Technologia sprawdza się w różnego rodzaju aplikacjach internetowych, od e-commerce, przez media społecznościowe, aż po aplikacje biznesowe i systemy zarządzania treścią (CMS).
Czy AJAX ma wady?
Choć AJAX ma wiele zalet, nie możemy pominąć pewnych wad. Wśród minusów znajdują się:
- Bezpieczeństwo
Jeśli chodzi o bezpieczeństwo, pojawi się ryzyko ataków typu XSS. Takie ataki polegają na wstrzyknięciu fragmentu kodu JavaScript i przejęciu kontroli na daną witryną. Wyróżniamy różne rodzaje ataków XSS, są to: reflected, stored XSS, Based DOM XSS.
Zastosowanie technologii AJAX może utrudnić indeksowanie strony, co przełoży się na spadek widoczności witryny w organicznych wynikach wyszukiwania. W dobie Internetu nawet niewielki spadek może skutkować startą klientów i obniżeniem konwersji.
- Zaawansowane umiejętności
Implementacja AJAX wymaga dodatkowego programowania, co zwiększa złożoność kodu i jest większym wyzwaniem dla programistów.
- Obciążenie serwera
Zbyt duża liczba użytkowników korzystających z aplikacji, może spowodować nadmiernie obciążenie serwera i sprawić, że aplikacja będzie działać mniej wydajnie.
Działanie technologii AJAX w praktyce
Poniżej kilka przykładów, które pokażą, jak Ajax działa w praktyce.
- Koszyk zakupowy
Z technologią AJAX mamy do czynienia, podczas robienia zakupów w sklepach e-commerce. Podczas dodawania produktów do koszyka, liczba artykułów jest aktualizowana automatycznie – od razu widzimy zmienione dane.
- Formularze kontaktowe
Po uzupełnieniu formularzy kontaktowych, dane sprawdzane są automatycznie – bez konieczności przeładowania strony. W przypadku wykrycia błędów, serwer zwraca komunikat o błędzie. Po wprowadzeniu odpowiednich zmian, skrypt AJAX-a odbiera odpowiedź i dynamicznie aktualizuje treść strony. Wyświetlany jest odpowiedni komunikat, np. Wiadomość została wysłana pomyślnie!
- Media społecznościowe
Użytkowników, którzy regularnie korzystają z mediów społecznościowych nie brakuje – AJAX działa również tam. Po kliknięciu „lubię to”, polubienie jest widoczne od razu – także nie ma konieczności przeładowania strony.
- Dynamiczne ładowanie, czyli infinite scroll
Dynamiczne ładowanie treści (infinite scroll,) sprawia, że nowe komentarze, posty i inne treści pojawiają się stopniowo, wraz z przewijaniem strony www – także nie ma potrzeby przeładowywania. Każdy z nas spotkał się z takim rozwiązaniem podczas scrolowania Facebooka, komentarzy pod artykułem, webinaerm, wideo.
Ajax – podsumowanie
Ajax, czyli asynchronous javascript and xml, to technologia, która opiera się na asynchronicznym przetwarzaniu danych. Oznacza to, że po wykonaniu przez użytkownika określonej akcji, na przykład po przydzieleniu lajka w social mediach, nie ma potrzeby przeładowywania strony. Korzyści płynące z zastosowania omawianej technologii to między innymi szybsze ładowanie strony www, dynamiczne działanie aplikacji, wszystko to przekłada się na lepsze doświadczenie użytkownika. Ajax odgrywa ważną rolę w tworzeniu nowoczesnych aplikacji internetowych.
