AJAX

grupa powiązanych technologii budowania stron internetowych

Asynchroniczny JavaScript i XML (ang. Asynchronous JavaScript and XML, AJAX) – technika tworzenia aplikacji internetowych, w których interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML. Terminal AJAX został wymyślony przez Jesse Jamesa Garretta(inne języki)[1].

Podstawowe elementy AJAX

edytuj

Na technikę tę składa się kilka elementów:

  • XMLHttpRequest – klasa umożliwiająca asynchroniczne przesyłanie danych; dzięki asynchroniczności w trakcie pobierania danych użytkownik może wykonywać inne czynności, można także pobierać dane jednocześnie z wielu miejsc. Aktualnie w jej miejsce używa się nowego API – fetch[2].
  • JavaScript – mimo użycia w nazwie, może to być de facto dowolny język skryptowy funkcjonujący po stronie użytkownika (np. JScript czy VBScript).
  • XMLjęzyk znaczników, poprzez który miałyby być opisane odbierane informacje. W praktyce jednak dane często przekazywane są w innym formacie, przy czym odbierane są wtedy jako tekst. Mogą to być zarówno gotowe fragmenty HTML, jak i fragmenty kodu JavaScript (zob. JSON), może to być też format specyficzny dla danego zastosowania.

Teoretycznie są to wszystkie wymagane elementy, jednak w praktyce używane są jeszcze odpowiednie skrypty funkcjonujące po stronie serwera i współpracujące z bazą danych. Można sobie jednak bez nich poradzić, jeśli wszystkie potrzebne dane zostały już wcześniej wygenerowane (np. zawartość poszczególnych stron prostego serwisu).

Wady i ograniczenia

edytuj
  • Udostępnianie treści strony poprzez język skryptowy ogranicza dostęp do niej dla części użytkowników. Dotyczy to zarówno osób celowo blokujących sobie skrypty (np. ze względu na wysokie obciążenie komputera), jak i używających czytników ekranowych (w których obsługa skryptów może być mocno ograniczona). Problem ten można obejść, udostępniając alternatywne, bardziej tradycyjne rozwiązania przynajmniej dla podstawowych funkcji serwisu internetowego. To jednak znacząco zwiększa koszty wprowadzania nowych rozwiązań i np. portale posiadające obsługę kont pocztowych udostępniają czasem starsze wersje interfejsu.
  • Utrudnione jest automatyczne pobieranie stron, gdyż programy takie nie interpretują zwykle języków skryptowych. Możliwość dowolnego pobierania zawartości serwisu nie musi być jednak korzystna z punktu widzenia właścicieli serwisu.
  • Bezpośrednie indeksowanie przez serwisy wyszukujące może być utrudnione, jednak wystarczy zadbać o dostarczanie linków wyświetlających całą treść strony lub stworzyć mapę witryny(inne języki).
  • Część starych skryptów do analizy ruchu na stronie oparta jest na klasycznym modelu udostępniania całych stron (konieczność odświeżenia całości). Nowsze skrypty potrafią jednak uwzględnić właściwy pomiar oglądalności stron. Można również bez przeszkód analizować logi żądań wysyłanych do serwera WWW.
  • Wadą rozwiązań w znaczącym stopniu opartych na AJAX jest fakt, że przestaje funkcjonować tradycyjny schemat przeglądania stron umożliwiający swobodne poruszanie się w przód i w tył. Na przykład jeśli kliknięcie w link powoduje wywołanie skryptu zmieniającego wnętrze strony (menu pozostaje bez zmian), to użytkownik nie będzie mógł się cofnąć, korzystając z przycisku „Wstecz” przeglądarki. Twórcy serwisu WWW mogą jednak zbudować analogiczny mechanizm, rozwijając go nawet do wycofywania zmian w konkretnym fragmencie strony.
  • Utrudnione głębokie linkowanie – utworzenie bezpośredniego odnośnika do niektórych treści może być niemożliwe[3].

Przykład utworzenia nowego obiektu XMLHttpRequest

edytuj
function ajaxFunction(){
  var xmlHttp;
  try{
    // Utworzenie obiektu XMLHttpRequest (silnik Gecko, WebKit, Presto, Trident w IE>6)
    xmlHttp=new XMLHttpRequest();
  } catch(e) {
    // Wyłapuje błąd jeśli JavaScript nie posiada obiektu XMLHttpRequest
    try {
      // Utworzenie obiektu ActiveXObject, który jest zawarty w kontrolce ActiveX IE
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        // Utworzenie obiektu ActiveXObject, dla innych wersji IE
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        // Wyświetlenie błędu o braku obsługi obiektu XMLHttpRequest
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
  // zwrócenie obiektu
  return xmlHttp;
}

Przykład pobierania danych JSON przez XHR

edytuj

Uproszczone pobieranie w przeglądarkach wspierających standardowe tworzenie obiektu XHR oraz parsowanie JSON.

function pobierzDane(onLoad) {
	var request = new XMLHttpRequest();
	request.open('GET', 'data.json');
	request.onload = function () {
		var data = JSON.parse(request.responseText);
		onLoad(data);
	};
	request.send();
}

Przykład użycia API fetch

edytuj

Funkcja fetch to nowe API dostępne w przeglądarkach, które upraszcza wysyłanie zapytań HTTP. Funkcja fetch zwraca obietnicę.

fetch('data.json').then(response => {
    return response.json();
}).then(data => {
   console.log(data);
});

Biblioteki AJAX

edytuj
Popularne biblioteki JavaScript powiązane z AJAX-em
  • Prototype – biblioteka ułatwiająca korzystanie z możliwości oferowanych przez AJAX
  • jQuery – biblioteka ułatwiająca korzystanie z możliwości oferowanych przez AJAX
  • Ext(inne języki) – dawniej rozszerzenie Prototype, Jquery oraz YUI obecnie samodzielna biblioteka
  • Script.aculo.us – rozszerza Prototype, ułatwiając tworzenie animacji i interfejsów
  • MooTools – modułowa biblioteka AJAX zawierająca również ułatwienia do tworzenia efektów wizualnych
  • Yahoo! UI Library(inne języki) – biblioteka narzędziowa ogólnie dla DHTML
  • Dojo Toolkit – biblioteka narzędziowa ogólnie dla DHTML
  • AJAX.OOP – biblioteka narzędziowa stworzona dla AJAX
  • picoAjax – prosta i szybka biblioteka JavaScript ułatwiająca korzystanie z możliwości oferowanych przez technikę AJAX.
Popularne frameworki zawierające skrypty działające po stronie serwera
Nazwa Język skryptów Uwagi
Echo(inne języki) Java
Google Web Toolkit Java
IT Mill Toolkit(inne języki) Java
ItsNat Java
OpenXava Java
ZK Framework(inne języki) Java
Ajax.NET Professional ASP.NET
ASP.NET AJAX ASP.NET
Sajax PHP
Symfony PHP
PRADO PHP
Tigermouse PHP
Xajax PHP
Pyjamas(inne języki) Python

Zobacz też

edytuj

Przypisy

edytuj
  1. Jesse James Garrett: Ajax: A New Approach to Web Applications. Adaptive path. [zarchiwizowane z tego adresu (2008-07-02)]. (ang.).
  2. Fetch API. Mozilla Developer Network. [dostęp 2022-09-04].
  3. Louis Lazaris: Deep Linking in JavaScript and Ajax Applications. [w:] impressivewebs.com [on-line]. 17 grudnia 2009. [dostęp 2024-02-10].

Linki zewnętrzne

edytuj