Ajax ist keine neue Programmiersprache, sondern ein neuer Ansatz, der vorhandene Standards verwendet. AJAX kann Daten mit dem Server austauschen, ohne die gesamte Seite neu zu laden. Mit dieser asynchronen Interaktionsmethode können Benutzer neue Daten erhalten, ohne die Seite nach dem Klicken aktualisieren zu müssen.
XmlHttprequest -Objekt
Der Kern von AJAX ist das XMLHTTPREquest -Objekt (XHR). XHR bietet eine Schnittstelle zum Senden von Anforderungen an den Server und das Auflösen von Serverantworten. Fähigkeit, neue Daten vom Server auf asynchrone Weise zu erhalten.
Erstellen Sie Objekte im Browser (unterstützen Sie nur IE7 und höher):
var xhr = new xmlhttprequest ();
So verwenden Sie XHR
Das erste, was Sie vorstellen sollten, ist die Open () -Methode. Es empfängt 3 Parameter:
• Die Art der Anforderung zu senden (Post, Get usw.)
• Angeforderte URL
• Bolean -Wert, der angibt, ob die Anfrage asynchron gesendet wird
Aufrufen von Open () Beispiel:
xhr.open ("get", "index.jsp", false);
Nehmen Sie die Anfrage für index.jsp. Die URL ist relativ zur aktuellen Seite, auf der der Code ausgeführt wird. Wenn Sie die Open () -Methode aufrufen, senden Sie die Anfrage nicht, sondern startet nur eine Anfrage zum Senden.
Rufen Sie send () an, um die Anfrage zu senden:
xhr.send (null);
SEND () erhält einen Parameter, dh die Daten, die als Antragsbehörde gesendet werden sollen. Wenn keine Daten über die Anforderungsbehörde gesendet werden müssen, muss Null übergeben werden.
Die entsprechenden Daten werden mit den relevanten Eigenschaften des XHR -Objekts gefüllt:
• Responsext: Der Text wurde als Antwortkörper zurückgegeben
• reACTURXML: Der Inhaltstyp als Antwort lautet "Text/XML" oder "Anwendung/XML"
• Status: Der HTTP -Status der Antwort
• StatuStext: Beschreibung des HTTP -Status
Überprüfen Sie nach Erhalt der Antwort zunächst das Statusattribut und bestätigen Sie, dass die Antwort zurückgegeben wurde. Im Allgemeinen wird 200 als Erfolgszeichen verwendet. Der Statuscode 304 zeigt an, dass die Ressource nicht geändert wurde und die zwischengespeicherte Version im Browser direkt verwendet werden kann.
Um eine geeignete Antwort zu erhalten, sollten zwei Statuscodes auf folgende Weise erkannt werden:
xhr.open ("get", "index.jsp", false); xhr.send (null); if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.Respons);Durch Erkennen der ReadyState -Eigenschaft kann die aktuelle aktive Phase des Anforderung/Antwortprozesses ermittelt werden.
• 0: nicht initialisiert. Die Open () -Methode wurde nicht aufgerufen
• 1: Starten Sie. Die Open () -Methode wurde aufgerufen und die Send () -Methode wurde nicht aufgerufen.
• 2: Senden. Die Send () -Methode wurde aufgerufen, keine Antwort wurde empfangen
• 3: Empfangen. Einige Daten wurden empfangen
• 4: abgeschlossen. Alle Daten wurden empfangen und können auf der Clientseite verwendet werden
Wenn sich der Wert der ReadyState -Eigenschaft ändert, wird ein ReadyStatechange -Ereignis ausgelöst. Um die Browserkompatibilität zu gewährleisten, geben Sie den Event -Handler von OnReadyStatechange an, bevor Sie Open () anrufen.
var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {alert(xhr.responseText);} else {alert("Request Erfolgreich: " + xhr.status);}}}; xhr.open (" get "," index.jsp ", true); xhr.send (null);Die asynchrone Anfrage kann storniert werden, bevor die Antwort erhalten wird:
xhr.abort ();
HTTP -Headerinformationen
XHR -Objekte bieten Methoden zur Manipulation von Anforderungsheadern und zur Beantwortung von Header -Informationen.
Standardmäßig werden beim Senden einer XHR -Anfrage auch die folgenden Header -Informationen gesendet.
• Akzeptieren: Die Art des Inhalts, den der Browser verarbeiten kann
• Accept-Charset: Der Zeichensatz, den der Browser anzeigen kann
• Akzeptieren: Komprimierte Codierung, die der Browser verarbeiten kann
• Akzeptieren Sie Sprache: Die derzeit vom Browser festgelegte Sprache
• Verbindung: Die Art der Verbindung zwischen dem Browser und dem Server
• Cookie: Alle Cookies, die auf der aktuellen Seite eingestellt sind
• Host: Die Domain, auf der sich die Seite, auf der sich die Anfrage ausgestellt hat, befindet
• Referer: URL der Seite, die die Anfrage ausgestellt hat
• User-Aent: Der User Agent String des Browsers
Verwenden Sie setRequestheader (), um die Headerinformationen für benutzerdefinierte Anforderungen festzulegen. Sie müssen die Open () -Methode anrufen, nachdem Sie sie aufgerufen haben und bevor Sie SEND () anrufen ()
setRequestheader ():
xhr.open ("get", "index.jsp", true); xhr.setRequestheader ("myheader", "myValue"); xhr.send (null);Rufen Sie GetResponseHeader () auf und geben Sie den Feldnamen ein, um die entsprechenden Informationen zu Antwort -Header zu erhalten. getAllresponseHeader () erhält eine lange Zeichenfolge, die alle Header -Informationen enthält.
var myheader = xhr.getResponseHeader ("myheader"); var AllheaDers = xhr.getallResponseHeader ();Anfrage erhalten
Get wird verwendet, um den Server nach bestimmten Informationen abzufragen. Sie können die Parameter der Abfragezeichenfolge an das Ende der URL anhängen. Der Name und der Wert jedes Parameters in der Abfragezeichenfolge müssen unter Verwendung von Encodeuricomponent () codiert werden:
xhr.open ("get", "login.jsp? name1 = value1 & name2 = value2", false); AddurlParam () empfängt drei Parameter: die URL des zugegebenen Parameters, den Namen des Parameters und den Wert des Parameters. var url = "login.jsp"; // Parameter uRl = addurlparam (URL, "Benutzername", "xxyh"); url = addurlparam (url, "password", "xxyh123"); // Initialisieren der Anfrage xhr.open ("Get", url, false);Postanfrage
Die Postanforderung wird verwendet, um Daten an den Server zu senden, der gespeichert werden sollte. Der Körper einer Postanforderung kann viele Daten enthalten, und das Format ist unbegrenzt.
Initialisierungsanfrage:
xhr.open ("post", "login.jsp", true); Setzen Sie zuerst die Headerinformationen vom Typ Content-Typ in Anwendung/X-WWW-Form-Urlencoded und erstellen Sie dann ein String-Format. Wenn Sie die Formulardaten auf der Seite serialisieren und dann über XHR an den Server senden müssen, können Sie die Funktion Serialize () verwenden, um diese Zeichenfolge zu erstellen: xhr.open ("get", "login.jsp", false); xhr.setRequestheader ("Content-type", "Application/X-Www-For-form-URLENSCODED"); document.getElementById ("Benutzer-Info"); xhr.send (Serialize (Form));Das obige ist das eingehende Verständnis von Ajax in JavaScript, das Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!