AJAX ist ein wichtiges Tool in der modernen Webanwendungsentwicklung. Sie können Daten asynchron an den Server senden und empfangen und dann in JavaScript analysieren. Ajax ist die Abkürzung von asynchronem JavaScript und XML (asynchrones JavaScript und XML).
Der Name der AJAX -Kernspezifikation wird aus dem JavaScript -Objekt geerbt, das zum Erstellen und Initiieren von Anforderungen verwendet wird: xmlhttprequest. Es gibt zwei Ebenen dieser Spezifikation. Alle Mainstream -Browser implementieren die erste Ebene, was die grundlegende Funktionsniveau darstellt. Die zweite Ebene erweitert die anfängliche Spezifikation, enthält zusätzliche Ereignisse und einige Funktionen, um die Zusammenarbeit mit Formularelementen zu vereinfachen und einige verwandte Spezifikationen zu unterstützen.
1. Ajax beginnt
Der Schlüssel zu Ajax liegt im XMLHTTPrequest -Objekt, und der Weg, dieses Objekt zu verstehen, besteht darin, ein Beispiel zu betrachten. Der folgende Code zeigt die einfache Verwendung des XMLHTTPrequest -Objekts:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Beispiel </title> </head> <body> <div> <button> apples </button> <button> cherries </button> buttht-type> </div> </div> </div> </div> </div> <div id = "Ziel". var buttons = document.getElementsByTagName ("Schaltfläche"); für (var i = 0; i <buttons.length; i ++) {buttons [i] .onclick = handbuttonpress; } // Das Skript ruft diese Funktion auf, um auf die Schaltflächensteuerung zu reagieren. Ereignisfunktion Handbuch (e) {// Erstellen Sie ein neues XMLHTTTPREQUEST -Objekt var httprequest = new Xmlhttprequest (); // Setzen Sie einen Ereignishandler für das OnReadyStatechange -Ereignis httprequest.onReadyStatechange = Handlesponse; // Verwenden Sie die offene Methode, um die HTTP -Methode und die URL anzugeben (dh dem HTTPREquest -Objekt, was Sie tun möchten). // Hier werden keine Daten an den Server gesendet, sodass die Send -Methode keine Parameter enthält httprequest.send (); } // Verarbeitung der Antwort // Sobald das Skript die Sendenmethode aufruft, sendet der Browser eine Anforderung an den Server im Hintergrund. Da die Anfrage im Hintergrund bearbeitet wird, stützt sich AJAX auf Ereignisse, um den Fortschritt der Anfrage zu informieren. Funktion Handlesponse (e) {// Wenn das Ereignis von OnReadyStatechange ausgelöst wird, wird der Browser ein Ereignisobjekt an die angegebene Handlerfunktion übergeben, und die Zieleigenschaft wird auf das mit diesem Ereignis assoziierte XMLHTTTPREquest -Funktion des Ereignisses if (e.target.Ready.Tatus == xmlhttprequest.done && e.target.Status == 200) {/// /upfoughy.done && e.tart.status == 8) {// /bootuelly /bootuellhy.done && e.tart.status == 8) gesetzt. document.GetElementById ("Ziel"). InnerHtml = E.Target.responsetext; // Zeigen Sie den Inhalt des angeforderten Dokuments an}} </script> </body> </html>Drei weitere Dokumentationen sind sehr einfach:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> apples </title> <style> img {float: links; padding: 2px; Rand: 5px; Border: Medium Double Black; Hintergrundfarbe: Lightgrey; Breite: 100px; Höhe: 100px;} </style> </head> <body> <p> <img src = "../ img/show-page/img_apples.jpg"/> für Äpfel. </p> </body> </html>Der Effekt ist in der folgenden Abbildung dargestellt:
Wenn der Benutzer auf jede Fruchttaste klickt, führt der Browser asynchron aus und ruft das angeforderte Dokument ab, während das Hauptdokument nicht neu geladen wird. Dies ist ein typisches Ajax -Verhalten.
2. Verwenden Sie AJAX -Ereignisse
Nachdem Sie ein einfaches Beispiel erstellt und untersucht haben, können Sie sich mit den von dem XMLHTTPrequest -Objekt unterstützten Funktionen befassen und die Verwendung in Ihrer Anfrage verwenden. Der Ausgangspunkt sind die zusätzlichen Ereignisse, die in der Spezifikation der zweiten Ebene definiert sind:
Die meisten dieser Ereignisse werden zu einem bestimmten Zeitpunkt während der Anfrage ausgelöst. Die beiden Ereignisse sind Ausnahmen, ReadyStatechange und Fortschritt, die mehrmals ausgelöst werden können, um Fortschrittsaktualisierungen bereitzustellen.
Wenn diese Ereignisse geplant sind, verwendet der Browser ein regelmäßiges Ereignisobjekt für das Ereignis von ReadyStatechange und ein Fortschritts -Event -Objekt für andere Ereignisse. Das ProgressEvent -Objekt definiert alle Mitglieder des Ereignisobjekts und fügt diese in der folgenden Abbildung beschriebenen Mitglieder hinzu:
Der folgende Code zeigt, wie diese Ereignisse verwendet werden:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Beispiel </title> <style> Tabelle {Margin: 10px; Border-Collapse: Collapse; float: left;} div{margin: 10px;} td,th{padding: 4px;} </style></head><body><div> <button>apples</button> <button>cherries</button> <button>bananas</button></div><table id="events"></table><div id="target"> Press a button</div><script type = "application/javaScript"> var buttons = document.getElementsByTagName ("button"); für (var i = 0; i <buttons.length; i ++) {buttons [i] .onclick = handbuttonpress; } var httprequest; Funktionshandbuttonpress (e) {ClearEventDetails (); httprequest = new xmlhttprequest (); httprequest.onReadyStatechange = Handlesponse; httprequest.onError = HandleError; httprequest.onload = Handlelad ;; httprequest.onloadend = Handleloadend; httprequest.onloadStart = HandleloadStart ;; httprequest.onprogress = HandleProgress; httprequest.open ("get", e.target.innerhtml+". html"); httprequest.send (); } function Handlesponse (e) {displayEventDetails ("ReadyState ("+httprequest.ReadyState+")") if (e.target.ReadyState == xmlhttprequest.done && e.target.status == 200) {document. }} Funktion handleError (e) {displayEventDetails ("error", e);} Funktion handleload (e) {displayEventDetails ("load", e);} Funktion Handloadend (e) {displayEventDetetEdetails ("loadend", e); HandleloadStart (e) {displayEventDetails ("loadStart", e);} Funktion Handle -Progress (e) {displayEventDetails ("progreshit", e); "<tr> <Th> Ereignis </th> <Th> Länge computable </th> <Th> geladen </th> <th> Gesamt </th>"; } Funktion displayEventDetails (Ereignisname, e) {if (e) {document.getElementById ("Ereignisse"). InnerHtml+= "<tr> <td>"+eventName+"</td> <td>"+E.LengthComputable+"</td> <td>"+E.Lode+"</td>" </td> "+E. E.Total+"</td> </tr>"; } else {document.getElementById ("Ereignisse"). InnerHtml+= "<tr> <td>"+Ereignisname+"</td> <td> na </td> <td> na </td> <td> na </td> <td> na </td> </tr>"; }} </script> </body> </html>Dies ist eine Variation des vorherigen Beispiels, bei der ein Handler für einige Ereignisse registriert und ein Datensatz für jedes in einem Tabellenelement verarbeitete Ereignis erstellt wird. Aus dem folgenden Bild können Sie sehen, wie der Firefox -Browser diese Ereignisse auslöst.
3.. Behandeln Sie Fehler
Bei der Verwendung von AJAX müssen zwei Arten von Fehlern beachtet werden. Der Unterschied zwischen ihnen ergibt sich aus unterschiedlichen Perspektiven.
Der erste Fehlertyp ist ein Problem, das aus der Perspektive des XMLHTTPREquest -Objekts zu sehen ist: Einige Faktoren verhindern, dass die Anforderung an den Server gesendet wird. Zum Beispiel kann DNS Hostname nicht beheben, die Verbindungsanforderung abgelehnt oder die URL ungültig ist.
Die zweite Art von Problem ist das Problem, das aus der Anwendungsperspektive zu sehen ist, nicht das XMLHTTPrequest -Objekt. Sie treten auf, wenn die Anfrage erfolgreich an den Server gesendet wird, wodurch die Anforderung, Prozesse und eine Antwort generiert wird. Die Antwort zeigt jedoch nicht auf das, was Sie erwarten. Wenn die angeforderte URL beispielsweise nicht vorhanden ist, tritt diese Art von Problem auf.
Es gibt drei Möglichkeiten, diese Fehler zu behandeln, wie im folgenden Code gezeigt:
3.1 Fehlereinstellungsfehler
Die erste Art von Problem, die behandelt werden muss, besteht darin, falsche Daten an das XMLHTTPresquest -Objekt wie eine falsche URL weiterzugeben. Sie sind extrem anfällig für die Erzeugung von URLs auf der Grundlage der Benutzereingabe. Um diese Art von Problem zu simulieren, verfügt das obige Dokument über eine Schaltfläche, die ein Tag -schlechter URL (falsche URL) hinzufügt. Wenn Sie diese Taste drücken, werden die geöffneten Methode in der folgenden Form aufgerufen:
httprequest.open ("get", "http: //")
Dies ist ein Fehler, der verhindert, dass die Anforderung ausgeführt wird, und ein Fehler wird geworfen, wenn ein Ereignis wie dieses im XMLHTTPrequest -Objekt auftritt. Dies bedeutet, dass ein Versuch ... Catch -Anweisung erforderlich ist, um den Code zu umgeben, der die Anfrage festlegt, wie folgt:
try {... httprequest.open ("get", "http: //") ... httprequest.send (); } catch (error) {displayrormsg ("try/catch", error.message)}}Die Fangklausel gibt Ihnen die Möglichkeit, sich von dem Fehler wiederherzustellen. Sie können den Benutzer für einen Wert auffordern oder auf die Standard -URL zurückgreifen oder einfach die Anforderung verwerfen. In diesem Beispiel wird die DILDErMSG -Funktion aufgerufen, um die Fehlermeldung anzuzeigen.
3.2 Fehleranforderungsfehler
Der zweite Fehlertyp tritt auf, wenn die Anforderung generiert wurde, es gibt jedoch andere Fehler. Um diese Art von Problem zu simulieren, wurde im Beispiel eine Schaltfläche mit dem Bezeichnung "Bad Host (Fehlerhost)) hinzugefügt. Wenn diese Taste gedrückt wird, wird die offene Methode aufgerufen, um auf eine nicht verfügbare URL zuzugreifen:
httprequest.open ("get", http: //www.ycdoitt.com/nopage.html)Es gibt zwei Probleme mit dieser URL. Das erste Problem ist, dass der Hostname von DNS nicht behoben werden kann, sodass der Browser keine Serververbindung generieren kann. Dieses Problem weiß, dass das XMLHTTPREquest -Objekt erst offensichtlich wird, wenn es die Anforderung generiert, sodass Fehler auf zwei Arten signalisiert. Wenn Sie einen Hörer für ein Fehlerereignis registrieren, sendet der Browser ein Ereignisobjekt an Ihren Hörer. Hier sind die im Beispiel verwendeten Funktionen:
Funktion handleError (e) {displayrormsg ("Fehlerereignis", httprequest.status + httprequest.StatUntext); }Wenn solche Fehler auftreten, hängt der Informationsgrad, der aus dem XMLHTTPrequest -Objekt erhalten werden kann, vom Browser ab. Leider wird in den meisten Fällen der Status mit einem Wert von 0 und einem leeren StatuStext -Wert erhalten.
Das zweite Problem ist, dass die URL und die generierte Anforderung unterschiedliche Quellen haben, was standardmäßig nicht zulässig ist. Normalerweise können Sie AJAX-Anfragen nur an die gleichorientierte URL senden, die das Skript lädt. Wenn ein Browser dieses Problem meldet, kann ein Fehler geworfen oder ein Fehlerereignis ausgelöst werden. Verschiedene Browser verarbeiten es anders. Verschiedene Browser überprüfen auch die Quelle zu unterschiedlichen Zeitpunkten, was bedeutet, dass der Browser möglicherweise nicht immer das gleiche Problem hervorhebt. Cross-Origin-Ressourcenfreigabe kann verwendet werden, um homologe Einschränkungen zu umgehen.
3.3 Beantragungsfehler
Der letzte Fehlertyp tritt auf, wenn die Anforderung erfolgreich abgeschlossen ist (aus der Perspektive des XMLHTTPrequest -Objekts), die gewünschten Daten jedoch nicht zurückgibt. Um solche Probleme zu erstellen, fügen Sie im obigen Beispiel eine Schaltfläche mit der Beschriftungsgurke hinzu. Wenn Sie diese Taste drücken, wird eine Anforderungs -URL generiert, die den Schaltflächen von Äpfeln, Kirschen und Bananen ähnelt. Das Dokument von GUCUMBER.HTML gibt es jedoch nicht auf dem Server.
Es gibt keinen Fehler in diesem Prozess selbst (da die Anfrage abgeschlossen wurde) und es ist erforderlich, zu bestimmen, was auf dem Statusattribut geschieht. Bei Anforderung eines vorhandenen Dokuments wird der Statuscode 404 erhalten, was bedeutet, dass der Server das angeforderte Dokument nicht finden kann. Sie können sehen, wie das Beispiel Statuscodes als 200 (was bedeutet OK):
if (httprequest.status == 200) {target.innerhtml = httprequest.responseText; } else {document.getElementById ("statusmsg"). InnerHtml = "Status:" + httprequest.status + "" + httprequest.StatUntext; }In diesem Beispiel werden die Werte von Status und Statusext einfach angezeigt. In realen Anwendungen muss die Wiederherstellung auf nützliche und aussagekräftige Weise durchgeführt werden (z. B. Anzeigen alternativer Inhalte oder Warnung der Benutzer, dass es ein Problem gibt, je nachdem, welcher für die Anwendung besser geeignet ist).
4. Holen Sie sich und setzen Sie Header
Mit dem XMLHTTPREquest -Objekt können Sie den an den Server gesendeten Anforderungsheader und den Header in der Serverantwort festlegen.
4.1 Überschreiben Sie die HTTP -Methode für Anforderungen
Es ist normalerweise nicht erforderlich, den Header in der AJAX -Anfrage hinzuzufügen oder zu ändern. Der Browser weiß, was er senden soll, und der Server weiß, wie er reagiert. Es gibt jedoch mehrere Ausnahmen. Der erste ist der X-HTTP-Methode-Override-Header.
Der HTTP -Standard wird häufig verwendet, um HTML -Dokumente im Internet anzufordern und zu übertragen, und definiert viele Methoden. Die meisten Leute wissen über Get and Post, weil sie am weitesten verbraucht sind. Es gibt jedoch andere Methoden (einschließlich Put und Delete), die der URL, die dem Server angefordert wurde, eine Bedeutung vermitteln, und diese Verwendung steigt. Wenn Sie beispielsweise einen Benutzerdatensatz anzeigen möchten, können Sie eine solche Anfrage erstellen:
httprequest.open ("get", "http: // myserver/records/freeman/adam");Hier werden nur die HTTP -Methode und die angeforderte URL angezeigt. Damit diese Anfrage reibungslos funktioniert, muss die Serverseite die Anforderung durch die Anwendung verstehen und in ein geeignetes Datenstück umwandeln, das an den Server zurückgesendet werden soll. Wenn Sie die Daten löschen möchten, können Sie sie so schreiben:
httprequest.open (" delete ", "http: // myserver/records/freeman/adam");Der Schlüssel hier besteht darin, auszudrücken, was der Server über HTTP erledigen soll, anstatt ihn in irgendeiner Weise in die URL zu codieren.
Das Problem bei der Verwendung von HTTP -Methoden auf diese Weise ist, dass viele Mainstream -Web -Technologien nur Get und Post unterstützen und viele Firewalls nur zulassen, dass Get und Post -Anfragen bestehen werden. Es gibt einen idiomatischen Ansatz, um diese Einschränkung zu vermeiden, bei der der X-HTTP-Methode-Override-Header verwendet wird, um die HTTP-Methode anzugeben, die Sie verwenden möchten. Das Formular wird jedoch vermarktet und eine Postanforderung gesendet. Die Codedemonstration lautet wie folgt:
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> Beispiel </title> </head> <body> <div> <button> apples </button> <button> cherries </button> bananas </buttht </butth. document.getElementsByTagName ("Button"); für (var i = 0; i <buttons.length; i ++) {buttons [i] .onclick = handbuttonpress; } var httprequest; Funktionshandbuttonpress (e) {httprequest = new XmlHttprequest (); httprequest.onReadyStatechange = Handlesponse; httprequest.open ("get", e.target.innerhtml+". html"); httprequest.setRequestheader ("x-http-method-override", "delete"); httprequest.send (); } function handleError (e) {displayrormSg ("Fehlerereignis", httprequest.status+httprequest.StatUntext); } function HandleResponse () {if (httprequest.readystate == 4 && httprequest.status == 200) {document.getElementById ("Ziel"). InnerHtml = httprequest.responseteText; }} </script> </body> </html>In diesem Beispiel wird die SetRequestHeader -Methode im XMLHTTPREquest -Objekt verwendet, um anzuzeigen, dass die Anforderung in Form einer HTTP -Löschmethode verarbeitet werden soll. Bitte beachten Sie, dass ich diesen Header erst festgelegt habe, nachdem ich die offene Methode aufgerufen habe. Wenn Sie versuchen, die SetRequestHeader -Methode vor der offenen Methode zu verwenden, wirft das XMLHTTPREquest -Objekt einen Fehler aus.
PS: Überschreibe HTTP erfordert das serverseitige Webanwendungs-Framework, um die Konvention von X-HTTP-Methode-Override zu verstehen, und Ihre serverseitige Anwendung muss festgelegt werden, um diese weniger HTTP-Methoden zu finden und zu verstehen.
4.2 Inhaltsdachende deaktivieren
Der zweite nützliche Header, der zu AJAX-Anforderungen hinzugefügt werden kann, ist die Cache-Control, die besonders beim Schreiben und Debuggen von Skripten nützlich ist. Einige Browser -Cache -Inhalte, die über AJAX -Anfragen erhalten wurden, werden während der Browsersitzung nicht erneut anfordern. Für das vorherige Beispiel bedeutet dies, dass Änderungen an apples.html, cherries.html und bananas.html nicht sofort im Browser reflektiert werden. Der folgende Code zeigt, wie Sie Header einstellen, um dies zu vermeiden:
httprequest = new xmlhttprequest (); httprequest.onReadyStatechange = Handlesponse; httprequest.open ("get", e.target.innerhtml+". html"); httprequest.setRequestHeader ("Cache-Control", "No-Cache"); httprequest.send ();Die Möglichkeit, den Header festzulegen, ist der gleiche wie im vorherigen Beispiel, aber diesmal ist der Header Cache-Kontroll und der gewünschte Wert ist No-Cache. Nach der Platzierung dieser Anweisung wird das nächste Mal, wenn das Dokument angefordert wird.
4.3 Lesen Sie den Antwortheader
Der vom Server gesendete HTTP -Header, der auf eine AJAX -Anforderung reagiert, kann über die GetResponseHeader und die GetAllResponseHeaders -Methoden gelesen werden. In den meisten Fällen müssen Sie sich nicht darum kümmern, was sich im Header befindet, da sie Teil der interaktiven Transaktionen zwischen dem Browser und dem Server sind. Der folgende Code zeigt, wie diese Eigenschaft verwendet wird:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <meta content = "width = Geräte-width, Benutzer-skalierbar = no" name = "viewPort" /> <meta name = "Autor content =" ye chaoluka " /> <meta name =" href = "../ img/ycdoit.ico" type = "image/x-icon" rel = "Shortcut icon"/> <style> #Allheaders, #Cheader {Border: Medium Solid Black; Padding: 2px; Rand: 2PX; <Taste> bananen </button> </div> <div id = "Cheader"> </div> <div id = "Allheaders"> </div> <div id = "target"> drücken Sie eine Taste </div> <skript> var buttons = document.getElementsByTagName ("Button"); für (var i = 0; i <buttons.length; i ++) {buttons [i] .onclick = handbuttonpress; } var httprequest; Funktionshandbuttonpress (e) {httprequest = new XmlHttprequest (); httprequest.onReadyStatechange = Handlesponse; httprequest.open ("get", e.target.innerhtml+". html"); httprequest.setRequestHeader ("Cache-Control", "No-Cache"); httprequest.send (); } function HandleResponse () {if (httprequest.readystate == 2) {document.getElementById ("AllheaDers"). InnerHtml = httprequest.getallResponseHeaderers (); document.getElementById ("Cheader"). InnerHtml = httprequest.getResponseHeader ("Content-Type"); } else if (httprequest.readystate == 4 && httprequest.status == 200) {document.getElementById ("Ziel"). InnerHtml = httprequest.responSetExt; }} </script> </body> </html>Die Renderings sind wie folgt:
Nach dieser Abbildung können wir feststellen, dass die Webserver -Software, die der Entwicklungsserver ausführt, intellij idee 15.0.4 ist, und das letzte Mal, als das Dokument apples.html geändert wurde, war der 27. Juni (der Screenshot war der 5. Juli).