Ajax (Programmierung)

"Ajax" leitet hier weiter. Für andere Verwendungen siehe Ajax (Disambiguierung).
Asynchroner JavaScript und XML
Erstmals erschienen März 1999
Dateiname -Erweiterungen .js
Dateiformate JavaScript
Beeinflusst von
JavaScript und Xml

Ajax (Auch Ajax /ˈeɪdʒæks/; kurz für "Asynchron JavaScript und Xml"))[1][2] ist ein Satz von Web Entwicklung Techniken, die verschiedene Web -Technologien verwenden Client-Seite Asynchron erstellen Web Applikationen. Mit AJAX können Webanwendungen Daten von a senden und abrufen Server Asynchron (im Hintergrund), ohne die Anzeige und das Verhalten der vorhandenen Seite zu stören. Durch die Entkopplung der Datenaustauschschicht aus der Präsentationsebene ermöglicht AJAX Webseiten und damit auch Webanwendungen, den Inhalt dynamisch zu ändern, ohne die gesamte Seite neu zu laden.[3] In der Praxis nutzen moderne Implementierungen häufig JSON anstelle von xml.

Ajax ist keine Technologie, sondern ein Programmierkonzept. Html und CSS Kann in Kombination verwendet werden, um Informationen zu markieren und zu stilieren. Die Webseite kann durch JavaScript so geändert werden, dass sie dynamisch angezeigt werden - und dem Benutzer kann es ermöglichen, mit den neuen Informationen zu interagieren. Das eingebaute Xmlhttprequest Das Objekt wird verwendet, um AJAX auf Webseiten auszuführen, sodass Websites Inhalte auf dem Bildschirm laden können, ohne die Seite zu aktualisieren. Ajax ist weder eine neue Technologie noch eine neue Sprache. Stattdessen sind es vorhandene Technologien, die auf neue Weise verwendet werden.

Geschichte

In den frühen bis mittleren 1990er Jahren basierten die meisten Websites auf vollständigen HTML-Seiten. Jede Benutzeraktion erforderte eine vollständige neue Seite, um vom Server geladen zu werden. Dieser Prozess war ineffizient, wie sich die Benutzererfahrung widerspiegelte: Alle Seiteninhalte verschwanden, dann erschien die neue Seite. Jedes Mal, wenn der Browser aufgrund einer teilweisen Änderung eine Seite neu lastete, mussten alle Inhalte neu eingestellt werden, obwohl sich nur einige der Informationen geändert hatten. Dadurch wurde zusätzliche Last auf dem Server gelegt und erstellt Bandbreite Ein limitierender Leistungsfaktor.

Im Jahr 1996 die iframe Tag wurde von vorgestellt von Internet Explorer; wie Objekt Element kann Inhalte asynchron geladen oder abrufen. 1998 microsoft Outlook Web Access Das Team entwickelte das Konzept hinter dem Xmlhttprequest Skriptobjekt.[4] Es erschien in der zweiten Version der zweiten Version als xmlhttp MSXML Bibliothek,[4][5] die mit Internet Explorer 5.0 Im März 1999.[6]

Die Funktionalität des Windows XMLHTTP ActiveX Die Kontrolle in IE 5 wurde später von implementiert von Mozilla Firefox, Safari, Oper, Google Chromeund andere Browser als XMLHTTPrequest JavaScript -Objekt.[7] Microsoft übernahm das native XMLHTTPrequest -Modell als von von Internet Explorer 7. Die ActiveX -Version wird immer noch im Internet Explorer unterstützt, aber nicht in Microsoft Edge. Die Nützlichkeit dieser Hintergrund Http Anfragen und asynchrone Webtechnologien blieben ziemlich dunkel, bis sie in großen Online -Anwendungen wie Outlook Web Access (2000) angegriffen wurden.[8] und Ungerade Post (2002).

Google machte einen breiten Einsatz von Standards-konformen, Cross Browser Ajax mit Google Mail (2004) und Google Maps (2005).[9] Im Oktober 2004 Kayak.com"Die öffentliche Beta-Veröffentlichung gehörte zu den ersten groß angelegten E-Commerce-Verwendungen, die ihre Entwickler zu dieser Zeit" The XML HTTP-Ding "bezeichneten.[10] Dieses Interesse an AJAX unter Webprogrammentwicklern.

Der Begriff Ajax wurde am 18. Februar 2005 von öffentlich genutzt von Jesse James Garrett in einem Artikel mit dem Titel " AJAX: Ein neuer Ansatz für Webanwendungenbasierend auf Techniken, die auf Google Pages verwendet werden.[1]

Am 5. April 2006 die World Wide Web Konsortium (W3C) veröffentlichte die erste Entwurfsspezifikation für das XMLHTTPrequest -Objekt, um einen Beamten zu erstellen Webstandard.[11] Der jüngste Entwurf des XMLHTTPrequest -Objekts wurde am 6. Oktober 2016 veröffentlicht.[12] und die xmlhttprequest -Spezifikation ist jetzt a Lebensstandard.[13]

Technologien

Das herkömmliche Modell für a Internetanwendung gegen eine Anwendung mit AJAX

Der Begriff Ajax hat eine breite Gruppe von Web -Technologien dargestellt, mit denen eine Webanwendung implementiert werden kann, die mit einem Server im Hintergrund kommuniziert, ohne den aktuellen Status der Seite zu stören. In dem Artikel, in dem der Begriff Ajax geprägt wurde,[1][3] Jesse James Garrett erklärte, dass die folgenden Technologien aufgenommen werden:

Seitdem gab es jedoch eine Reihe von Entwicklungen in den Technologien, die in einer AJAX -Anwendung und in der Definition des Begriffs Ajax selbst verwendet wurden. XML ist für den Datenaustausch nicht mehr erforderlich und daher ist XSLT für die Manipulation von Daten nicht mehr erforderlich. JavaScript-Objekt-Notation (JSON) wird häufig als alternatives Format für den Datenaustausch verwendet,[14] Obwohl auch andere Formate wie vorformatiertes HTML oder einfacher Text verwendet werden können.[15] Eine Vielzahl beliebter JavaScript -Bibliotheken, einschließlich JQuery, enthält Abstraktionen, die bei der Ausführung von AJAX -Anfragen behilflich sind.

Beispiele

JavaScript -Beispiel

Ein Beispiel für eine einfache AJAX -Anforderung mit der ERHALTEN Methode, geschrieben in JavaScript.

get-ajax-data.js:

// Dies ist das clientseitige Skript. // Initialisieren Sie die HTTP -Anfrage. Lassen xhr = Neu Xmlhttprequest(); // die Anfrage definieren xhr.offen('ERHALTEN', 'send-ajax-data.php'); // Verfolgen Sie die Zustandsänderungen der Anfrage. xhr.onreadyStatechange = Funktion () { 	Const ERLEDIGT = 4; // ReadyState 4 bedeutet, dass die Anfrage durchgeführt wird. 	Const OK = 200; // Status 200 ist eine erfolgreiche Rückkehr. 	wenn (xhr.ReadyState === ERLEDIGT) { 		wenn (xhr.Status === OK) { 			Konsole.Protokoll(xhr.Responsext); // 'Dies ist die Ausgabe.' 		} anders { 			Konsole.Protokoll('Fehler: ' + xhr.Status); // Bei der Anfrage ist ein Fehler aufgetreten. 		} 	} }; // Sende die Anfrage an send-ajax-data.php xhr.senden(Null);

send-ajax-data.php:

 // Dies ist das serverseitige Skript. // Setzen Sie den Inhaltstyp. Header('Inhaltstyp: Text/Ebene'); // die Daten zurücksenden. Echo "Das ist die Ausgabe."; ?>

Beispiel holen

Fetch ist eine neue native JavaScript -API.[16] Entsprechend Dokumentation von Google Developers"Fetch erleichtert es, Webanfragen und Antworten zu erstellen als mit dem älteren XMLHTTPrequest."

bringen('send-ajax-data.php')  .dann(Daten => Konsole.Protokoll(Daten))  .Fang (Error => Konsole.Protokoll('Fehler:' + Error));

ES7 Async/Warte Beispiel 

Async Funktion doajax1() {  Versuchen {  Const res = erwarten bringen('send-ajax-data.php');  Const Daten = erwarten res.Text();  Konsole.Protokoll(Daten);  } Fang (Error) {  Konsole.Protokoll('Fehler:' + Error);  } } doajax1();

Fetch stützt sich auf JavaScript Versprechen.

Das bringen Die Spezifikation unterscheidet sich von Ajax Auf folgende signifikante Weise:

  • Das Versprechen kehrte zurück von bringen() Der HTTP -Fehlerstatus lehnt nicht ab Auch wenn die Antwort ein HTTP 404 oder 500 ist. Statt OK Eigenschaft der Antwort auf false Wenn die Antwort nicht im Bereich von 200–299 liegt) und nur beim Netzwerkfehler abgelehnt oder wenn etwas die Anfrage abgeschlossen hat.
  • bringen() Senden Sie keine Cross-Origin-Kekse Es sei denn, Sie setzen die Referenzen Init -Option. (Seit April 2018. Die Spezifikation änderte die Ausfallnachweisrichtlinienrichtlinie auf gleichorientiert. Firefox veränderte sich seit 61.0b13.)

Siehe auch

Verweise

  1. ^ a b c Jesse James Garrett (18. Februar 2005). "Ajax: Ein neuer Ansatz für Webanwendungen". AdaptivePath.com. Archiviert Aus dem Original am 10. September 2015. Abgerufen 19. Juni 2008.
  2. ^ "Ajax - Webentwicklerführer". MDN Web Docs. Archiviert Aus dem Original am 28. Februar 2018. Abgerufen 27. Februar 2018.
  3. ^ a b Ullman, Chris (März 2007). Ajax beginnen. Wrox. ISBN 978-0-470-10675-4. Archiviert Aus dem Original am 5. Juli 2008. Abgerufen 24. Juni 2008.
  4. ^ a b "Artikel über die Geschichte von XMLHTTP durch einen ursprünglichen Entwickler". Alexhopmann.com. 31. Januar 2007. archiviert von das Original am 23. Juni 2007. Abgerufen 14. Juli 2009.
  5. ^ "Spezifikation der IxmlHttprequest -Schnittstelle vom Microsoft Developer -Netzwerk". Msdn.microsoft.com. Archiviert vom Original am 26. Mai 2016. Abgerufen 14. Juli 2009.
  6. ^ Dutta, Sunava (23. Januar 2006). "Native xmlhttprequest -Objekt". Ieblog. Microsoft. Archiviert Aus dem Original am 6. März 2010. Abgerufen 30. November 2006.
  7. ^ "Dynamisches HTML und XML: Das XMLHTTPrequest -Objekt". Apple Inc. Archiviert Aus dem Original am 9. Mai 2008. Abgerufen 25. Juni 2008.
  8. ^ Hopmann, Alex. "Geschichte von xmlhttp". Alex Hopmanns Blog. Archiviert von das Original am 30. März 2010. Abgerufen 17. Mai 2010.
  9. ^ "Eine kurze Geschichte von Ajax". Aaron Swartz. 22. Dezember 2005. Archiviert Aus dem Original am 3. Juni 2010. Abgerufen 4. August 2009.
  10. ^ Englisch, Paul (12. April 2006). "Kajak -Benutzeroberfläche". Offizieller kayak.com Technoblog. Archiviert vom Original am 23. Mai 2014. Abgerufen 22. Mai 2014.
  11. ^ Van Kesteren, Anne; Jackson, Dean (5. April 2006). "Das xmlhttprequest -Objekt". W3.org. World Wide Web Konsortium. Archiviert Aus dem Original am 16. Mai 2008. Abgerufen 25. Juni 2008.
  12. ^ Kesteren, Anne; Aubourg, Julian; Lied, Jungkee; Steen, Hallvord R. M. "Xmlhttprequest Level 1". W3.org. W3c. Archiviert Aus dem Original am 13. Juli 2017. Abgerufen 19. Februar 2019.
  13. ^ "Xmlhttprequest Standard". xhr.spec.whatwg.org. Abgerufen 21. April 2020.
  14. ^ "JavaScript-Objekt-Notation". Apache.org. Archiviert Aus dem Original am 16. Juni 2008. Abgerufen 4. Juli 2008.
  15. ^ "Beschleunigen Sie Ihre AJAX-basierten Apps mit JSON". Devx.com. Archiviert von das Original am 4. Juli 2008. Abgerufen 4. Juli 2008.
  16. ^ "API - Web -APIs abrufen". Mdn. Archiviert vom Original am 29. Mai 2019. Abgerufen 30. Mai 2019.

Externe Links

  • [1] AJAX: Ein neuer Ansatz für Webanwendungen - Artikel, in dem der Ajax -Begriff und die Fragen und Antworten geprägt wurden
  • Ajax (Programmierung) bei Curlie
  • Ajax Tutorial Mit Get-, Post-, Text- und XML -Beispielen.