Ajax (programowanie) - Ajax (programming)

Asynchroniczny JavaScript i XML
Po raz pierwszy pojawiły się Marzec 1999
Rozszerzenia nazw plików .js
Formaty plików JavaScript
Wpływem
JavaScript i XML

Ajax (również AJAX / ć k s / ; skrót od „ Asynchronous JavaScript i XML ”) jest zbiorem rozwoju internetowych technik, które wykorzystuje różne technologie internetowe na stronie klienta do tworzenia asynchronicznych aplikacji internetowych . Dzięki 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 warstwę wymiany danych od warstwy prezentacji, Ajax umożliwia stronom internetowym i, 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 w połączeniu do oznaczania i stylizowania informacji. Strona internetowa może być modyfikowana przez JavaScript, aby wyświetlać się dynamicznie — i umożliwić użytkownikowi interakcję z nowymi informacjami. Wbudowany obiekt XMLHttpRequest służy do wykonywania Ajax na stronach internetowych, umożliwiając stronom internetowym ł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 dziewięćdziesiątych większość witryn internetowych była oparta na pełnych stronach HTML. Każda czynność użytkownika wymagała załadowania z serwera całkowicie nowej strony. Proces ten był nieefektywny, o czym świadczy wrażenia użytkownika: cała zawartość strony zniknęła, a następnie pojawiła się nowa strona. Za każdym razem, gdy przeglądarka ponownie ładowała stronę z powodu częściowej zmiany, cała zawartość musiała zostać ponownie wysłana, mimo że zmieniły się tylko niektóre informacje. Spowodowało to dodatkowe obciążenie serwera i uczyniło przepustowość czynnikiem ograniczającym wydajność.

W 1996 roku w Internet Explorerze wprowadzono tag iframe ; podobnie jak element obiektu , może ładować lub pobierać zawartość asynchronicznie. W 1998 roku zespół 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. Microsoft zaadoptował natywny model XMLHttpRequest od Internet Explorera 7 . Wersja ActiveX jest nadal obsługiwana w przeglądarce Internet Explorer, ale nie w Microsoft Edge . Użyteczność tych działających w tle żądań HTTP i asynchronicznych technologii internetowych pozostawała dość niejasna, dopóki nie zaczęły pojawiać się w aplikacjach internetowych na dużą skalę, takich jak Outlook Web Access (2000) i Oddpost (2002).

Google dokonał szerokiego wdrożenia zgodnego ze standardami, wieloprzeglądarki Ajax z Gmailem (2004) i Google Maps (2005). W październiku 2004 r. publiczne wydanie beta Kayak.com było jednym z pierwszych na dużą skalę zastosowań e-commerce tego, co ich programiści w tamtych czasach nazywali „xml http”. Zwiększyło to zainteresowanie Ajaxem 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.

5 kwietnia 2006 roku World Wide Web Consortium (W3C) opublikowało pierwszy szkic specyfikacji dla obiektu XMLHttpRequest, próbując stworzyć oficjalny standard sieciowy . 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 w porównaniu z aplikacją korzystającą z Ajax

Termin Ajax zaczął reprezentować szeroką grupę technologii internetowych, które można wykorzystać do implementacji aplikacji internetowej, która komunikuje 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 włączono następujące technologie:

Od tego czasu nastąpiło jednak wiele zmian w technologiach wykorzystywanych w aplikacjach Ajax, a także 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 preformatowany HTML lub zwykły tekst. Wiele popularnych bibliotek JavaScript, w tym JQuery, zawiera abstrakcje, które pomagają w wykonywaniu żądań Ajax.

Przykłady

Przykład JavaScript

Przykład prostego żądania ajaxowego z wykorzystaniem metody GET , napisanego w JavaScript .

get-ajax-data.js:

// This is the client-side script.

// Initialize the HTTP request.
var xhr = new XMLHttpRequest();
// define the request
xhr.open('GET', 'send-ajax-data.php');

// Track the state changes of the request.
xhr.onreadystatechange = function () {
	var DONE = 4; // readyState 4 means the request is done.
	var OK = 200; // status 200 is a successful return.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // 'This is the output.'
		} else {
			console.log('Error: ' + xhr.status); // An error occurred during the request.
		}
	}
};

// Send the request to send-ajax-data.php
xhr.send(null);

send-ajax-data.php:

<?php
// This is the server-side script.

// Set the content type.
header('Content-Type: text/plain');

// Send the data back.
echo "This is the output.";
?>

Pobierz przykład

Pobierz to nowy natywny interfejs API JavaScript. Według dokumentacji Google Developers „Fetch ułatwia tworzenie żądań internetowych i obsługę odpowiedzi niż w przypadku starszego XMLHttpRequest”.

fetch('send-ajax-data.php')
    .then(data => console.log(data))
    .catch (error => console.log('Error:' + error));

Przykład ES7 asynchroniczny/oczekujący

async function doAjax() {
    try {
        const res = await fetch('send-ajax-data.php');
        const data = await res.text();
        console.log(data);
    } catch (error) {
        console.log('Error:' + error);
    }
}

doAjax();

Fetch opiera się na obietnicach JavaScript .

W fetchspecyfikacji, różni się od Ajaxw następujących istotnych sposobów:

  • Promise zwrócony z fetch() nie odrzuci statusu błędu HTTP, nawet jeśli odpowiedź jest HTTP 404 lub 500. Zamiast tego, gdy tylko serwer odpowie nagłówkami, Promise zostanie rozwiązany normalnie (z okwłaściwością odpowiedzi ustawioną na false, jeśli odpowiedź nie mieści się w zakresie 200–299) i zostanie odrzucona tylko w przypadku awarii sieci lub jeśli cokolwiek uniemożliwiło zakończenie żądania.
  • fetch() nie będzie wysyłać plików cookie z różnych źródeł, chyba że ustawisz opcję inicjowania poświadczeń . (Od kwietnia 2018 r. Specyfikacja zmieniła domyślną politykę poświadczeń na same-origin. Firefox zmienił się od 61.0b13.)

Zobacz też

Bibliografia

Zewnętrzne linki