Akronim AJAX (Asynchronous JavaScript And XML) brzmi nieporęcznie, ale opisuje prostą koncepcję: aktualizację części strony internetowej bez ponownego ładowania całej strony.
Wcześniej, jeśli potrzebowałeś nowych danych, musiałeś poczekać. Kliknąłeś na link. Ekran zamarł. Strona zrobiła się biała. Następnie wszystko zostało pobrane ponownie.
AJAX zmienił tę regułę. Pozwoliło to przeglądarkom komunikować się z serwerami w tle. Możesz wpisać wyszukiwane hasło i natychmiast zobaczyć wyniki. Żadnego ponownego uruchomienia. Brak białego ekranu. Tylko dane.
Nie był to nowy wynalazek. Było to połączenie istniejących narzędzi wykorzystanych w nowy sposób.
Podstawowe technologie asynchronicznego projektowania stron internetowych
AJAX to nie tylko jedna technologia. To jest przepływ pracy. Opiera się na koordynacji standardowych technologii sieciowych.
Opiera się na obiekcie XMLHttpRequest. Jest to wbudowana funkcja JavaScript. Umożliwia skryptom klienta inicjowanie żądań HTTP (takich jak GET lub POST) do serwera. Przeglądarka wysyła żądanie i nie czeka na odpowiedź przed kontynuowaniem renderowania strony. To jest część „asynchroniczna”.
Gdy serwer odpowie, JavaScript otrzyma dane. Analizuje je. Aktualizuje model dokumentu (DOM). Użytkownik widzi zmiany bez konieczności opuszczania strony.
„AJAX charakteryzuje się architekturą, w której kod klienta zarządza pobieraniem, interpretacją i adaptacją wyświetlania danych w czasie rzeczywistym, bez całkowitego przeładowania lub utraty interaktywności”.
Przez długi czas dane te były dostarczane w formacie XML. Stąd nazwa. XML jest zbędny. Jest ciężki.
Później został zastąpiony przez JSON (notacja obiektu JavaScript). JSON jest łatwiejszy. Łatwiej jest to obsługiwać za pomocą JavaScript. Nowoczesne frameworki, takie jak jQuery i API „fetch”, jeszcze bardziej ułatwiły zarządzanie tymi żądaniami. Ale podstawowa zasada pozostaje ta sama: oddziel interfejs użytkownika i komunikację z serwerem.
Dlaczego zgodność przeglądarki kiedyś miała znaczenie
Na początku ery było to trudne.
Nie wszystkie przeglądarki obsługują XMLHttpRequest. Albo zaimplementowali to inaczej.
Przeglądarka Internet Explorer 5 i nowsze wersje ostatecznie dogoniła konkurencję. Następnie pojawiła się Mozilla Firefox. Później do tego procesu dołączyły Safari i Chrome. Obecnie każda nowoczesna przeglądarka obsługuje te funkcje natywnie.
Ta zbieżność umożliwiła programistom tworzenie złożonych interakcji, które działały wszędzie. Wcześniej trzeba było pisać „kule”, aby kod działał w przeglądarce Firefox, ale nie w IE. Lub odwrotnie.
Dziś uwaga skupiła się na logice, a nie na hackach dotyczących zgodności.
Prawdziwe aplikacje, które definiują wrażenia użytkownika
Używałeś AJAX tysiące razy. Pewnie nawet o tym nie myślisz.
Weźmy Gmaila. Po otwarciu skrzynki pocztowej nie musisz ponownie ładować strony, aby przeczytać nową wiadomość e-mail. Strona klienta pobiera najnowsze wiadomości w tle. Możesz przeciągać, usuwać i archiwizować wiadomości e-mail. Strona pozostaje na swoim miejscu. Trwa aktualizacja danych.
Usługa Windows Live Hotmail na początku robiła coś podobnego. Mapy Google cały czas korzystają z tej technologii. Przesuwasz mapę. Przeglądarka żąda nowych fragmentów mapy. Pojawiają się natychmiast. Nie czekasz, aż strona się w pełni załaduje.
LiveSearch to klasyczny przykład. Po wpisaniu słów kluczowych wyszukiwarka wysyła zapytanie do serwera. Wyniki pojawią się na liście. Klikasz na jeden z nich. Strona przewinie się do wyniku. Wszystko to dzieje się poprzez wywołania AJAX.
Obszary zastosowań są nieograniczone.
- Dynamiczne sekcje komentarzy
- Formularze z funkcją automatycznego zapisywania
- Notowania giełdowe w czasie rzeczywistym
- Niekończący się kanał informacyjny
Funkcje te sprawiają wrażenie „aplikacji jednostronicowej” (SPA). Strona zachowuje się bardziej jak aplikacja komputerowa. Jest responsywny. Wydaje się, że żyje.
Przejście na aplikacje jednostronicowe (SPA)
AJAX utorował drogę SPA.
Na tradycyjnej stronie internetowej każde kliknięcie oznacza załadowanie nowej strony. Przeglądarka odrzuca stary model DOM i tworzy nowy.
W SPA strona główna ładuje się raz. JavaScript obsługuje całą późniejszą nawigację. Dynamicznie zmienia treść. Adres URL może się zmienić, ale strona nie ładuje się ponownie.
Wymaga to bardziej złożonego kodu klienta. Musimy zarządzać państwem. Należy zadbać o routing. Ale doświadczenie użytkownika jest lepsze niż tradycyjne.
Na tym opierają się media społecznościowe. Gdy opublikujesz aktualizację statusu, kanał zostanie zaktualizowany. Ładuje się Twoje zdjęcie profilowe. Pojawiają się powiadomienia. Żaden z tych procesów nie wymaga twardego ponownego uruchomienia.
Dziedzictwo komunikacji asynchronicznej
Akronim AJAX jest nieco przestarzały. Deweloperzy rzadko używają dziś tego terminu. Nazywamy to po prostu „tworzeniem stron internetowych”.
Ale technologia żyje. XMLHttpRequest został w dużej mierze zastąpiony przez API fetch. JSON stał się standardowym formatem danych.
Nie można zaprzeczyć wpływowi technologii. Podniosło to oczekiwania użytkowników. Teraz oczekujemy natychmiastowej informacji zwrotnej. Oczekujemy płynnych przejść. Oczekujemy, że aplikacje internetowe będą przypominać oprogramowanie natywne.
Jeśli witryna ładuje się ponownie po każdym kliknięciu przycisku, wygląda na to, że jest uszkodzona. Wydaje się przestarzałe.
AJAX udowodnił, że sieć może być czymś więcej niż tylko statycznymi dokumentami. Może stać się platformą dla złożonych, interaktywnych aplikacji.
Ewolucja na tym się nie skończyła. Frameworki takie jak React, Angular i Vue zbudowały swoje rozwiązania na tych fundamentach. Automatyzują aktualizację DOM. Zarządzają państwem.
Ale podstawowa idea pozostaje ta sama.
Komunikuj się z serwerem w tle. Odśwież swój ekran. Przesuń użytkownika dalej.
Wciąż udoskonalamy to podejście. Nieskończone przewijanie. Współpraca w czasie rzeczywistym. Podgląd w czasie rzeczywistym. Możliwości pozostają w dużej mierze niewykorzystane.
Co dalej? Prawdopodobnie mniej kliknięć. Więcej transmisji strumieniowych. Więcej bezpośredniości.
Strona pozostaje. Dane się poruszają.
AJAX to nie magia. To kompromis.
Zyskasz prędkość. Otrzymujesz płynne interfejsy. Ale boli Cię też głowa.
Największym problemem nie jest kod. To jest bezpieczeństwo. Mianowicie – Polityka tego samego pochodzenia (SOP). Domyślnie przeglądarki blokują żądania AJAX. Wchodzą w interakcję tylko z domeną, w której aktualnie znajduje się użytkownik. Zapobiega to kradzieży danych ze strony internetowej Twojego banku przez złośliwy skrypt z evil.com. To trudna bariera.
Ale twórcy musieli przebić się przez tę ścianę.
CORS (Cross-Origin Resource Sharing) pojawia się w obrazie. Jest to mechanizm pozwalający różnym domenom komunikować się ze sobą. Konfigurujesz to na serwerze. Jeśli zrobisz to źle, narazisz swoje dane na ryzyko. Jeśli zrobisz to dobrze, będziesz zasilać nowoczesne aplikacje rozproszone. Poprzeczka jest wysoka. Konfiguracja musi być ścisła.
Dochodzi jeszcze kwestia historii przeglądarki.
Kiedy odświeżysz stronę bez ponownego ładowania, adres URL nie ulegnie zmianie. Lub zmienia się, ale użytkownik tego nie zauważa. Kliknij „Wstecz”. Nic się nie dzieje. Lub, co gorsza, strona ładuje się ponownie i traci cały stan. To psuje model mentalny użytkownika.
To musi zostać naprawione.
Jawnie zarządzaj stosem historii. Skorzystaj z API historii HTML5. Dodaj stany. Posłuchaj wydarzeń popstate. To męczące. To jest konieczne. Wcześniej ludzie używali hashbangów („#!”). To zadziałało. Ale to nie było ładne.
Dostępność to kolejna pułapka.
Treść dynamiczna nie zawsze ostrzega czytniki ekranu. Jeśli zastąpisz tekst za pomocą AJAX, technologie wspomagające mogą tego nie zauważyć. Musisz zaktualizować atrybuty ARIA. Musisz wywołać zdarzenia. W przeciwnym razie tworzysz witrynę, która działa tylko dla użytkowników myszy.
Krajobraz się zmienia.
fetch pobiera nieprzetworzone żądania XHR. Posługuje się obietnicami. Jest czyściej. Jest bardziej nowoczesny. WebSockets umożliwiają dwukierunkową komunikację w czasie rzeczywistym. Nie musisz już odpytywać serwera. Aktualizacje otrzymujesz w trybie push.
Ale AJAX pozostaje podstawą.
Wprowadził ten wzór. Asynchroniczny. Modułowy. Nieblokujący.
Technologie chmurowe posunęły się do przodu. Urządzenia mobilne opanowały rynek. Progresywne aplikacje internetowe (PWA) wymagały funkcjonalności offline i dużej szybkości. Wszystkie opierają się na tych podstawowych zasadach.
Czy AJAX umarł? Nie.
Stała się po prostu warstwą leżącą u podstaw nowszych narzędzi. Maszynownia.
Twórcy wciąż go optymalizują. Nadal zależy im na zarządzaniu chorobą, do rozwiązania której nas zmusił. Innowacja w projektowaniu interfejsów? Są zbudowane na tym historycznym fundamencie.
Stale ulepszamy doświadczenie użytkownika. Cel pozostaje ten sam.
Szybko. Czuły. Niezauważone.
Ale stawka jest teraz wyższa. Bezpieczeństwo stało się bardziej rygorystyczne. Użytkownicy oczekują zachowań natywnych. A kod powinien być dostępny dla każdego.
To stała równowaga. Proces, którego nigdy tak naprawdę nie dokończysz.
