Ajax (programowanie)
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 / eɪ dʒ æ 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
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:
- HTML (lub XHTML ) i CSS do prezentacji
- Document Object Model (DOM) do dynamicznego wyświetlania danych i interakcji z nimi
- JSON lub XML do wymiany danych i XSLT do manipulacji XML
- Obiekt XMLHttpRequest do komunikacji asynchronicznej
- JavaScript, aby połączyć te 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ń nasame-origin
. Firefox zmienił się od wersji 61.0b13.)
Zobacz też
- ActionScript
- Kometa (programowanie) (znana również jako Reverse Ajax)
- Google Instant
- HTTP/2
- Lista frameworków Ajax
- Node.js
- Zdalne skryptowanie
- Bogata aplikacja internetowa
- WebSocket
- HTML5
- Ramy sieciowe
- biblioteka JavaScriptu
Linki zewnętrzne
- [1] Ajax: A New Approach to Web Applications - artykuł, który ukuł termin Ajax oraz pytania i odpowiedzi
- Ajax (programowanie) w Curlie
- Samouczek Ajax z przykładami GET, POST, tekstowymi i XML.