Ausführliche Erklärung der Funktionsweise von AJAX und seiner Vor- und Nachteile

In diesem Artikel werden das Funktionsprinzip von Ajax und die damit verbundenen Inhalte erläutert.

1. AJAX steht für „Asynchronous JavaScript and XML“, eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen. Es verwendet:

Verwenden Sie XHTML+CSS, um die Darstellung zu standardisieren.

Verwenden Sie XML und XSLT für den Datenaustausch und verwandte Vorgänge Das XMLHttpRequest-Objekt kommuniziert asynchrone Daten mit dem Webserver.

verwendet JavaScript, um das Dokumentobjektmodell für die dynamische Anzeige und Interaktion zu betreiben.

verwendet JavaScript, um alle Daten zu binden und zu verarbeiten.

2. Bei der herkömmlichen Webanwendungsinteraktion löst der Benutzer eine HTTP-Anfrage an den Server aus und sendet dann eine neue HTHL-Seite an den Client zurück Der Client kann nur im Leerlauf warten, und selbst wenn es sich nur um eine kleine Interaktion handelt und nur ein einfaches Datenelement vom Server abgerufen werden muss, muss eine vollständige HTML-Seite zurückgegeben werden, und der Benutzer muss Zeit und Bandbreite für das erneute Lesen verschwenden Nehmen Sie es jedes Mal. Dieser Ansatz verschwendet viel Bandbreite. Da jede Anwendungsinteraktion das Senden einer Anfrage an den Server erfordert, hängt die Antwortzeit der Anwendung von der Antwortzeit des Servers ab. Dies führt zu einer Benutzeroberfläche, die viel weniger reagiert als native Apps.

Im Gegensatz dazu kann eine AJAX-Anwendung nur die erforderlichen Daten an den Server senden und abrufen. Sie verwendet SOAP oder eine andere XML-basierte Webdienstschnittstelle und verwendet JavaScript auf dem Client, um die Daten zu verarbeiten von der Serverantwort. Da weniger Daten zwischen Server und Browser ausgetauscht werden, sehen wir im Ergebnis reaktionsschnellere Anwendungen. Gleichzeitig kann auf dem Client-Rechner, der die Anfrage stellt, eine Menge Verarbeitungsarbeit erledigt werden, sodass auch die Verarbeitungszeit des Webservers verkürzt wird.

3. Das Funktionsprinzip von AJAX: Das Funktionsprinzip von Ajax entspricht dem Hinzufügen einer Zwischenschicht (AJAX-Engine) zwischen dem Benutzer und dem Server, wodurch Benutzervorgänge und Serverantworten asynchron werden. Nicht alle Benutzeranfragen werden an den Server gesendet. Nur wenn festgestellt wird, dass neue Daten vom Server gelesen werden müssen, sendet die Ajax-Engine die Anfrage an den Server in seinem Namen.

Der Kern von Ajax besteht aus JavaScript-, XMLHTTPRequest- und DOM-Objekten. Es sendet asynchrone Anforderungen an den Server über das XmlHttpRequest-Objekt, ruft Daten vom Server ab und verwendet dann JavaScript, um das DOM zu betreiben und zu aktualisieren Seite. Der wichtigste Schritt dabei ist das Abrufen der Anforderungsdaten vom Server. Lassen Sie uns etwas über diese Objekte lernen.

(1).XMLHTTPRequest-Objekt

Eines der größten Features von Ajax ist, dass es Daten an den Server übertragen oder lesen und schreiben kann, ohne die Seite zu aktualisieren (auch bekannt als Aktualisieren der Seite ohne). Diese Funktion ist hauptsächlich der XMLHTTP-Komponente XMLHTTPRequest-Objekt zu verdanken.

XMLHttpRequest-Objektmethodenbeschreibung:

abort(): Aktuelle Anfrage stoppen

getAllResponseHeaders(): Alle Antwortheader der HTTP-Anfrage als Schlüssel/Wert zurückgeben Paare

getResponseHeader("header"): Gibt den Zeichenfolgenwert des angegebenen Headers zurück

open("method","URL",[asyncFlag],["userName"],[" Passwort"] ): Stellt einen Anruf zum Server her. Der Methodenparameter kann GET, POST oder PUT sein. Der URL-Parameter kann eine relative URL oder eine absolute URL sein. Diese Methode enthält auch 3 optionale Parameter: asynchron, Benutzername, Passwort

send(content): Eine Anfrage an den Server senden

setRequestHeader("header", "value"): Setzt den angegebenen Header auf den angegebenen Wert. open() muss aufgerufen werden, bevor Header gesetzt werden. Legen Sie den Header fest und senden Sie ihn zusammen mit der Anfrage (Methode „post“ ist erforderlich)

XMLHttpRequest-Objektattributbeschreibung:

onreadystatechange: Ereignisauslöser für Statusänderung, jedes Mal, wenn sich der Status ändert Das Auslösen dieses Ereignishandlers ruft normalerweise eine JavaScript-Funktion

readyState auf: den Status der Anfrage. Es gibt 5 mögliche Werte: 0 = Nicht initialisiert, das Objekt wurde erstellt, aber nicht initialisiert (die Open-Methode wurde nicht aufgerufen), 1 = Wird geladen, das Objekt wurde erstellt und die Sendemethode wurde nicht aufgerufen , 2 = Geladen, die Sendemethode wurde aufgerufen. Der aktuelle Status und die HTTP-Header sind jedoch unbekannt. 3 = Während der Interaktion wurden einige Daten empfangen. Da die Antwort und die HTTP-Header unvollständig sind, treten beim Abrufen einiger Daten Fehler auf Daten über ResponseBody und ResponseText. 4 = Abgeschlossen, der Datenempfang ist abgeschlossen und Sie können die vollständigen Antwortdaten über ResponseXml und ResponseText abrufen

ResponseText: die Antwort des Servers, der Text der zurückgegebenen Daten.

responseXML: Die Antwort des Servers gibt ein DOM-kompatibles XML-Dokumentobjekt mit Daten zurück. Dieses Objekt kann in ein DOM-Objekt analysiert werden.

responseBody: der vom Server zurückgegebene Betreff (Nicht-Textformat)

responseStream: der vom Server zurückgegebene Datenstrom

status: der HTTP-Statuscode des Servers (z. B. 404 = „Datei nicht gefunden“, 200 „Erfolg“ usw.)

statusText: vom Server zurückgegebene Statustextinformationen, entsprechender Text des HTTP-Statuscodes (OK oder Nicht). Gefunden (nicht gefunden) usw.)

Die Ajax-Engine ist eigentlich eine relativ komplexe JavaScript-Anwendung, die zum Verarbeiten von Benutzeranfragen, zum Lesen und Schreiben von Servern und zum Ändern von DOM-Inhalten verwendet wird. Die Ajax-Engine von JavaScript liest die Informationen und schreibt das DOM interaktiv neu. Dadurch können Webseiten nahtlos rekonstruiert werden, d. Aber um eine Webseite wirklich dynamisch zu machen, ist nicht nur interne Interaktion erforderlich, sondern auch die Datenerfassung von außen. Früher ließen wir Benutzer Daten eingeben und den Inhalt der Webseite über das DOM ändern, aber jetzt ermöglicht XMLHTTPRequest ermöglicht es uns, Daten auf dem Server zu lesen und zu schreiben, ohne die Seite neu laden zu müssen, wodurch Benutzereingaben minimiert werden.

Ajax trennt die Schnittstelle und die Anwendung im WEB (man kann auch sagen, dass es Daten und Präsentation trennt). In der Vergangenheit gab es keine klare Grenze zwischen den beiden ist förderlich für die Arbeitsteilung, reduziert WEB-Anwendungsfehler, die durch das Ändern von Seiten durch nichttechnisches Personal verursacht werden, verbessert die Effizienz und ist besser für aktuelle Veröffentlichungssysteme geeignet. Sie können auch einen Teil der bisherigen vom Server belasteten Arbeit auf den Client übertragen, was sich positiv auf die ungenutzte Rechenleistung des Clients auswirkt.

4. Vorteile von AJAX

<1>.

Der größte Vorteil von AJAX besteht darin, dass es mit dem Server kommunizieren kann, um Daten zu verwalten, ohne die gesamte Seite zu aktualisieren. Dadurch können Webanwendungen schneller auf Benutzerinteraktionen reagieren und es wird vermieden, unveränderte Informationen über das Netzwerk zu senden, was die Wartezeit des Benutzers verkürzt und ein sehr gutes Benutzererlebnis bietet.

<2>. Kommunizieren Sie asynchron mit dem Server.

AJAX verwendet eine asynchrone Methode zur Kommunikation mit dem Server, ohne den Betrieb des Benutzers zu unterbrechen, und verfügt über eine schnellere Reaktionsfähigkeit. Optimiert die Kommunikation zwischen Browser und Server und reduziert unnötige Datenübertragung, Zeit und Datenverkehr im Netzwerk.

<3>. Front-End- und Back-End-Lastausgleich.

AJAX kann einen Teil der zuvor vom Server belasteten Arbeit auf den Client übertragen, indem es die ungenutzten Fähigkeiten des Clients für die Verarbeitung nutzt, wodurch die Belastung des Servers und der Bandbreite reduziert wird und Platz und Kosten für die Breitbandmiete gespart werden. Und um die Belastung des Servers zu verringern, besteht das Prinzip von AJAX darin, „Daten nach Bedarf abzurufen“, wodurch die Belastung des Servers durch redundante Anforderungen und Antworten minimiert und die Leistung der Website verbessert werden kann.

<4>. Weitgehend unterstützt, basierend auf Standards.

AJAX basiert auf standardisierter und weithin unterstützter Technologie und erfordert kein Herunterladen von Browser-Plug-Ins oder Applets, erfordert jedoch, dass der Kunde die Ausführung von JavaScript im Browser zulässt. Mit zunehmender Reife von Ajax sind auch einige Programmbibliotheken herausgekommen, die die Verwendung von Ajax vereinfachen. Ebenso ist eine weitere Technologie zur Unterstützung der Programmierung entstanden, die alternative Funktionen für Benutzer bereitstellt, die JavaScript nicht unterstützen.

<5>. Die Schnittstelle ist von der Anwendung getrennt.

Ajax trennt die Schnittstelle und die Anwendung im WEB (man kann auch sagen, dass es Daten und Präsentation trennt), was der Arbeitsteilung und Zusammenarbeit förderlich ist und WEB-Anwendungsfehler reduziert, die durch nichttechnisches Personal verursacht werden, das das ändert Seite, verbessert die Effizienz und ist auch besser für aktuelle Veröffentlichungssysteme geeignet.

5. Nachteile von Ajax

<1>

Bei dynamisch aktualisierten Seiten können Benutzer nicht zum vorherigen Seitenstatus zurückkehren, da sich der Browser nur statische Seiten im Verlauf merken kann. Der Unterschied zwischen einer Seite, die vollständig gelesen wurde, und einer Seite, die dynamisch geändert wurde, ist sehr subtil. Benutzer werden häufig damit rechnen, dass durch Klicken auf die Schaltfläche „Zurück“ der vorherige Vorgang abgebrochen wird. In einer Ajax-Anwendung ist dies jedoch nicht möglich.

Der Zurück-Button ist eine wichtige Funktion einer Standard-Website, funktioniert aber mit js nicht gut. Dies ist ein ernstes Problem, das durch Ajax verursacht wird, da Benutzer häufig hoffen, den vorherigen Vorgang durch Zurückkehren abzubrechen. Gibt es also eine Lösung für dieses Problem? Die Antwort lautet: Ja. Die unter Gmail verwendete Ajax-Technologie löst dieses Problem. Sie ändert jedoch nichts am Mechanismus von Ajax Dies erreichen Sie, indem Sie einen versteckten IFRAME erstellen oder verwenden, um die Änderungen auf der Seite zu reproduzieren, wenn der Benutzer auf die Schaltfläche „Zurück“ klickt, um auf den Verlauf zuzugreifen. (Wenn der Benutzer beispielsweise in Google Maps zurückklickt, sucht es in einem versteckten IFRAME und spiegelt die Suchergebnisse dann im Ajax-Element wider, um den Anwendungsstatus auf den damaligen Stand wiederherzustellen.)

Allerdings Obwohl dieses Problem gelöst werden kann, sind die damit verbundenen Entwicklungskosten sehr hoch und stehen im Widerspruch zur schnellen Entwicklung, die das Ajax-Framework erfordert. Dies ist ein sehr ernstes Problem, das durch Ajax verursacht wird.

Ein damit zusammenhängender Punkt ist, dass die Verwendung dynamischer Seitenaktualisierungen es für Benutzer schwierig macht, einen bestimmten Status in den Favoriten zu speichern. Es wurden auch Lösungen für dieses Problem gefunden, bei denen die meisten URL-Fragment-Identifikatoren (häufig Anker genannt, der Teil nach dem # in der URL) verwenden, um den Überblick zu behalten und dem Benutzer die Rückkehr zu einem bestimmten Anwendungsstatus zu ermöglichen. (Viele Browser ermöglichen JavaScript die dynamische Aktualisierung von Ankern, was es Ajax-Anwendungen ermöglicht, Anker zu aktualisieren und gleichzeitig den angezeigten Inhalt zu aktualisieren.) Diese Lösungen lösen auch viele der Argumente, die dazu führen, dass eine Zurück-Schaltfläche nicht unterstützt wird.

<2>.AJAX-Sicherheitsprobleme.

AJAX-Technologie bietet nicht nur ein gutes Benutzererlebnis für Benutzer, sondern bringt auch neue Sicherheitsbedrohungen für IT-Unternehmen mit sich. Ajax-Technologie ist wie die Einrichtung eines direkten Kanals für Unternehmensdaten. Dadurch können Entwickler unbeabsichtigt mehr Daten und Serverlogik offenlegen als zuvor. Die Ajax-Logik kann vor clientseitigen Sicherheitsscantechnologien verborgen werden, sodass Hacker neue Angriffe von Remote-Servern aus starten können. Es ist auch schwierig, mit Ajax einige bekannte Sicherheitslücken zu vermeiden, wie z. B. Cross-Site-Scripting-Angriffe, SQL-Injection-Angriffe und auf Anmeldeinformationen basierende Sicherheitslücken.

<3>. Schwache Unterstützung für Suchmaschinen.

Die Unterstützung für Suchmaschinen ist relativ schwach. Bei unsachgemäßer Verwendung erhöht AJAX den Datenverkehr im Netzwerk und verringert so die Leistung des gesamten Systems.

<4>. Zerstören Sie den Ausnahmebehandlungsmechanismus des Programms.

Zumindest vorerst zerstören Ajax-Frameworks wie Ajax.dll und Ajaxpro.dll den Ausnahmemechanismus des Programms. Bezüglich dieses Problems bin ich während des Entwicklungsprozesses darauf gestoßen, aber nach Überprüfung gibt es im Internet fast keine relevante Einführung. Später führten wir ein Experiment durch und verwendeten Ajax und herkömmliche Formularübermittlungsmodi, um ein Datenelement zu löschen ... was uns beim Debuggen große Schwierigkeiten bereitete.

<5>. Verstößt gegen die ursprüngliche Absicht der URL- und Ressourcenpositionierung.

Wenn ich Ihnen beispielsweise eine URL-Adresse gebe und Ajax-Technologie verwendet wird, unterscheidet sich möglicherweise das, was Sie unter der URL-Adresse sehen, von dem, was ich unter dieser URL-Adresse sehe. Dies widerspricht der ursprünglichen Absicht der Ressourcenpositionierung.

<6>.AJAX unterstützt mobile Geräte nicht gut.

Einige Handheld-Geräte (z. B. Mobiltelefone, PDAs usw.) unterstützen Ajax derzeit nicht sehr gut. Wenn wir beispielsweise eine Website mit Ajax-Technologie in einem Mobiltelefonbrowser öffnen, wird Ajax derzeit nicht unterstützt Es.

<7>. Der Client ist zu fett und zu viel Client-Code verursacht Entwicklungskosten.

Das Schreiben ist komplex und fehleranfällig; es gibt viel redundanten Code (es ist ein häufiges Problem von AJAX, js-Dateien in Ebenen einzubinden, außerdem war in der Vergangenheit viel serverseitiger Code enthalten). jetzt auf dem Client platziert); es zerstört die ursprünglichen Funktionen des Webstandards.

6. AJAX-Hinweispunkte und anwendbare und nicht anwendbare Szenarien

(1) Hinweispunkte

Bei der Entwicklung von Ajax ist die Netzwerkverzögerung der Fall Intervall zwischen der Anfrage eines Benutzers und der Antwort des Servers – muss sorgfältig geprüft werden. Wenn Benutzern keine klare Antwort gegeben wird, Daten nicht ordnungsgemäß vorgelesen werden oder XMLHttpRequest nicht ordnungsgemäß gehandhabt wird, kommt es bei Benutzern zu Verzögerungen, die sie nicht sehen möchten und die sie nicht verstehen können. Eine gängige Lösung besteht darin, eine visuelle Komponente zu verwenden, um dem Benutzer mitzuteilen, dass das System Hintergrundoperationen ausführt und Daten und Inhalte liest.

(2). Ajax anwendbare Szenarien

<1>.

<2>. 3>. Schnelle Benutzer-zu-Benutzer-Kommunikationsreaktion

<4>. Unbedeutende Szenarien wie Abstimmung, Ja/Nein usw.

<5> Filtern und Bearbeiten verwandter Daten

<6>. Gewöhnliche Texteingabeaufforderungen und automatische Vervollständigungsszenarien

(3). ;. Teilweise einfaches Formular

<3>. Einfache Navigation

<4> 🎜><5>. Manipulation der Präsentation

7. In Ajax enthaltene Technologie

Jeder weiß, dass Ajax keine neue Technologie ist, sondern eine Kombination mehrerer origineller Technologien. Es besteht aus den folgenden Technologien.

4. Verwenden Sie Javascript zum Binden und Aufrufen.

Von den oben genannten Technologien basieren alle anderen Technologien mit Ausnahme des XmlHttpRequest-Objekts auf Webstandards und sind weit verbreitet. Obwohl XMLHttpRequest vom W3C noch nicht übernommen wurde, ist es bereits ein De-facto-Standard Fast alle gängigen Browser unterstützen es derzeit.

function    CreateXmlHttp() {
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest) {
xmlhttp =newXmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject) {
try{
xmlhttp =newActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {
try{
xmlhttp =newActiveXObject("msxml2.XMLHTTP");
}
catch(ex) { }
}
}
}
functionUstbwuyi() {
vardata = document.getElementById("username").value;
CreateXmlHttp();
if(!xmlhttp) {
alert("创建xmlhttp对象异常！");
returnfalse;
}
xmlhttp.open("POST", url,false);
xmlhttp.onreadystatechange =function() {
if(xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "数据正在加载...";
if(xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

DOM, ein vollständiger Zusammenfassung des JavaScript-Elements

implementiert JQuery Lazy Loading und kehrt zum Anfang zurück

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Funktionsweise von AJAX und seiner Vor- und Nachteile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!