Ajax (programowanie)

Asynchroniczny JavaScript i XML
Po raz pierwszy pojawiły się marzec 1999 r
Rozszerzenia nazw plików .js
Formaty plików JavaScript
Pod wpływem
JavaScript i XML

Ajax (również AJAX / æ k s aplikacji / ; skrót od „ Asynchronous JavaScript and XML ”) to zestaw technik tworzenia stron internetowych , który wykorzystuje różne technologie internetowe po stronie klienta do tworzenia asynchronicznych internetowych . Dzięki technologii Ajax aplikacje internetowe mogą wysyłać i pobierać dane z serwera asynchronicznie (w tle) bez ingerencji w wyświetlanie i zachowanie istniejącej strony. Oddzielając wymiany danych od warstwy prezentacji, Ajax umożliwia stronom internetowym, a co za tym idzie, aplikacjom internetowym dynamiczną zmianę treści bez konieczności ponownego ładowania całej strony. W praktyce nowoczesne implementacje często wykorzystują JSON zamiast XML.

Ajax nie jest technologią, ale raczej koncepcją programistyczną. HTML i CSS mogą być używane łącznie do oznaczania i stylizowania informacji. Strona internetowa może być modyfikowana przez JavaScript, aby wyświetlała się dynamicznie i pozwalała użytkownikowi na interakcję z nowymi informacjami. Wbudowany XMLHttpRequest służy do wykonywania Ajax na stronach internetowych, umożliwiając stronom ładowanie treści na ekran bez odświeżania strony. Ajax nie jest nową technologią ani nowym językiem. Zamiast tego są to istniejące technologie wykorzystywane w nowy sposób.

Historia

Od początku do połowy lat 90. większość witryn internetowych opierała się na kompletnych stronach HTML. Każda akcja użytkownika wymagała załadowania z serwera zupełnie nowej strony. Proces ten był nieefektywny, co odzwierciedlają doświadczenia użytkowników: cała zawartość strony zniknęła, a następnie pojawiła się nowa strona. Za każdym razem, gdy przeglądarka przeładowywała stronę z powodu częściowej zmiany, cała zawartość musiała zostać przesłana ponownie, mimo że tylko część informacji uległa zmianie. Spowodowało to dodatkowe obciążenie serwera i sprawiło, że przepustowość stała się czynnikiem ograniczającym wydajność.

W 1996 roku Internet Explorer wprowadził znacznik iframe ; podobnie jak object , może ładować lub pobierać zawartość asynchronicznie. W 1998 roku zespół programu Microsoft Outlook Web Access opracował koncepcję obiektu skryptowego XMLHttpRequest . Pojawił się jako XMLHTTP w drugiej wersji biblioteki MSXML , która została dostarczona z Internet Explorerem 5.0 w marcu 1999 roku.

Funkcjonalność formantu Windows XMLHTTP ActiveX w IE 5 została później zaimplementowana przez Mozilla Firefox , Safari , Opera , Google Chrome i inne przeglądarki jako obiekt XMLHttpRequest JavaScript. Firma Microsoft przyjęła natywny model XMLHttpRequest od wersji Internet Explorer 7 . Wersja ActiveX jest nadal obsługiwana w przeglądarce Internet Explorer, ale nie w przeglądarce Microsoft Edge . Użyteczność tych HTTP w tle i asynchronicznych technologii internetowych pozostawała dość niejasna, dopóki nie zaczęła pojawiać się w aplikacjach internetowych na dużą skalę, takich jak Outlook Web Access (2000) i Oddpost (2002).

Google szeroko wdrożył zgodny ze standardami, wieloprzeglądowy Ajax z Gmailem (2004) i Google Maps (2005). W październiku 2004 r. publiczna wersja beta Kayak.com była jednym z pierwszych zastosowań e-commerce na dużą skalę tego, co ich programiści w tamtym czasie nazywali „rzeczą xml http” . To wzrosło zainteresowanie Ajaksem wśród twórców programów internetowych.

Termin AJAX został publicznie użyty 18 lutego 2005 r. przez Jesse Jamesa Garretta w artykule zatytułowanym Ajax: A New Approach to Web Applications , opartym na technikach stosowanych na stronach Google.

W dniu 5 kwietnia 2006 r. Konsorcjum World Wide Web (W3C) opublikowało pierwszy szkic specyfikacji obiektu XMLHttpRequest w celu stworzenia oficjalnego standardu sieciowego . Najnowsza wersja robocza obiektu XMLHttpRequest została opublikowana 6 października 2016 r., a specyfikacja XMLHttpRequest jest obecnie żywym standardem .

Technologie

Konwencjonalny model aplikacji internetowej a aplikacja korzystająca z technologii Ajax

Termin Ajax zaczął reprezentować szeroką grupę technologii internetowych, które można wykorzystać do zaimplementowania aplikacji internetowej komunikującej się z serwerem w tle, bez ingerencji w bieżący stan strony. W artykule, który ukuł termin Ajax, Jesse James Garrett wyjaśnił, że uwzględniono następujące technologie:

Od tego czasu nastąpił jednak szereg zmian w technologiach używanych w aplikacjach Ajax oraz w definicji samego terminu Ajax. XML nie jest już wymagany do wymiany danych, a zatem XSLT nie jest już wymagany do manipulowania danymi. JavaScript Object Notation (JSON) jest często używany jako alternatywny format wymiany danych, chociaż można również używać innych formatów, takich jak wstępnie sformatowany HTML lub zwykły tekst. Wiele popularnych bibliotek JavaScript, w tym JQuery, zawiera abstrakcje pomagające w wykonywaniu żądań Ajax.

Przykłady

Przykład JavaScriptu

Przykład prostego żądania Ajax wykorzystującego metodę GET , napisanego w JavaScript .

get-ajax-data.js:




    

 


    
	    
	    
	    
		    
			 
		  
			   
		
	



 // To jest skrypt po stronie klienta.  // Zainicjuj żądanie HTTP.  niech  xhr  =  nowy  XMLHttpRequest  ();  // zdefiniuj żądanie  xhr  .  otwórz  (  'GET'  ,  'send-ajax-data.php'  );  // Śledź zmiany stanu żądania.  xhr  .  onreadystatechange  =  function  ()  {  const  DONE  =  4  ;  // readyState 4 oznacza, że ​​żądanie zostało wykonane.  stała  OK  =  200  ;  // status 200 oznacza pomyślny powrót.  if  (  xhr  .  readyState  ===  GOTOWE  )  {  if  (  xhr  .  status  ===  OK  )  {  console  .  dziennik  (  xhr.tekst  odpowiedzi  )  ;  // 'To jest wyjście.'  }  else  {  konsola  .  log  ( '   Błąd  :'  +  xhr.status  )  ;  // Wystąpił błąd podczas żądania.  }  }  };  // Wyślij żądanie do send-ajax-data.php  xhr  .  wyślij  (  pusty  ); 

wyślij-ajax-data.php:








 
 <?php  // To jest skrypt po stronie serwera.  // Ustaw typ zawartości.  nagłówek  (  'Typ zawartości: tekst/zwykły'  );  // Wyślij dane z powrotem.  echo  "To jest wynik."  ;  ?> 

Pobierz przykład

Fetch to natywny interfejs API języka JavaScript. Zgodnie z dokumentacją Google Developers Documentation „Fetch ułatwia wysyłanie żądań internetowych i obsługę odpowiedzi niż w przypadku starszego XMLHttpRequest”.


      
          fetch  (  'send-ajax-data.php'  )  .  następnie  (  dane  =>  konsola  .  log  (  dane  ))  .  catch  (  error  =>  console  .  log  (  'Błąd:'  +  błąd  )); 

Przykład asynchronizacji/oczekiwania w ES7

   
     
            
            
        
       
          
    


 funkcja  asynchroniczna  doAjax1  ()  {  try  {  const  res  =  oczekiwanie na  pobranie  (  'send-ajax-data.php'  );  const  dane  =  czekaj na  res  .  tekst  ();  konsola  .  dziennik  (  dane  );  }  catch  (  błąd  )  {  konsola  .  log  (  'Błąd:'  +  błąd  );  }  }  doAjax1  (); 

Fetch opiera się na obietnicach JavaScript .

Specyfikacja pobierania różni się od Ajaksa w następujący znaczący sposób:

  • Obietnica zwrócona przez fetch() nie odrzuci w przypadku błędu HTTP nawet jeśli odpowiedzią jest HTTP 404 lub 500. Zamiast tego, jak tylko serwer odpowie nagłówkami, Obietnica zostanie rozwiązana normalnie (z właściwością ok odpowiedzi ustaw na false, jeśli odpowiedź nie mieści się w zakresie 200–299), i odrzuci tylko w przypadku awarii sieci lub jeśli coś uniemożliwiło wykonanie żądania.
  • fetch() nie wyśle ​​​​ciasteczek z różnych źródeł , chyba że ustawisz opcję init poświadczeń . (Od kwietnia 2018 r. Specyfikacja zmieniła domyślną politykę poświadczeń na same-origin . Firefox zmienił się od wersji 61.0b13.)

Zobacz też

Linki zewnętrzne