XMLHTTPREquest macht das Senden einer HTTP -Anfrage sehr einfach. Sie müssen nur einfach eine Instanz des Anforderungsobjekts erstellen, eine URL öffnen und dann die Anfrage senden. Nach Abschluss der Übertragung kann der resultierende HTTP -Status und der zurückgegebene Antwortinhalt auch aus dem Anforderungsobjekt erhalten werden.
Anfragen, die von XMLHTTPrequest erzeugt werden, können auf zwei Arten erhalten werden: Asynchroner Modus oder synchroner Modus. Die Art der Anforderung wird durch den Wert von Async, dem dritten Parameter der Open () -Methode dieses XMLHTTPrequest -Objekts, bestimmt. Wenn der Wert dieses Parameters falsch ist, wird die XMLHTTPREquest -Anforderung im synchronen Modus durchgeführt, andernfalls wird der Prozess im asynchronen Modus abgeschlossen.
Zwei Kommunikationsmodi: Synchrone und asynchrone Anfragen:
Anfragen synchronisieren
Synchronisierungsanforderungen im Haupt -Thread blockieren die Seite, und aufgrund schlechter Benutzererfahrung wurden Synchronisierungsanforderungen auf dem Haupt -Thread einiger neuester Browser veraltet. In seltenen Fällen sind XMLHTTPREquests mit dem Synchronmodus besser geeignet als die Verwendung des asynchronen Modus.
1. Bei der Verwendung von XMLHTTPrequest in Worker sind synchrone Anfragen besser geeignet als asynchrone Anfragen.
Code auf der Homepage:
<script type = "text/javaScript"> var omyworker = new Worker ("mytask.js"); omyworker }; omyworker.postMessage ("Hallo"); </script> myFile.txt (die Datei, die das angeforderte XMLHTTPrequest -Objekt synchronisiert): Hallo Welt !!Beinhaltet Arbeitercode: mytask.js
self.onMessage = function (oevent) {if (oevent.data === "Hallo") {var oreq = new Xmlhttprequest (); oreq.open ("get", "myFile.txt", false); // Synchrone Anfrage oreq.send (null); self.postMessage (oreq.responsetext); }};Hinweis: Da der Arbeiter verwendet wird, ist die Anfrage tatsächlich asynchron.
Ähnliche Methoden können verwendet werden, um Skripte zu ermöglichen, mit dem Server im Hintergrund zu interagieren und bestimmte Inhalte vorzuladen. Weitere Informationen finden Sie in der Verwendung von Web Workers, um weitere Informationen zu erhalten
2. Die Situation, in der synchrone Anfragen verwendet werden müssen
In seltenen Fällen können nur Synchronmodus XMLHTTPREquest -Anforderungen verwendet werden. Zum Beispiel im Fenster. Die Verwendung von asynchronem XMLHTTPREquest in der Funktion "Ereignishandler entladen" der Seite verursacht das Problem: Wenn die Antwort zurückgegeben wird, existiert die Seite nicht mehr und alle Variablen und Rückruffunktionen wurden zerstört. Das Ergebnis kann nur einen Fehler verursachen, "Funktion ist nicht definiert". Die Lösung besteht darin, die Anforderung im Synchronisierungsmodus hier zu verwenden, damit die Seite erst geschlossen wird, wenn die Anforderung abgeschlossen ist.
window.onbeforeUpLoad = function () {var oreq = new XmlHttprequest (); oreq.open ("get", "logout.php? nick =" + Escape (myName), false); // Synchrone Anfrage oreq.send (null); if (oreq.responsetext.trim ()! == "beendet"); {// "beendet" ist der zurückgegebene Datenreturn "Exit" fehlgeschlagen, möchten Sie den Ausgang manuell ausführen? "; }};Asynchrone Anfrage
Wenn Sie den asynchronen Modus verwenden und die Daten vollständig angefordert sind, wird eine angegebene Rückruffunktion ausgeführt. Bei der Ausführung der Anforderung kann der Browser normalerweise andere Transaktionen ausführen.
3. Beispiel: Erstellen Sie eine Standardmethode zum Lesen externer Dateien
In einigen Anforderungen müssen mehrere externe Dateien gelesen werden. Dies ist eine Standardfunktion. Diese Funktion verwendet das XMLHTTPrequest -Objekt für asynchrone Anforderungen. Außerdem können Sie eine andere Rückruffunktion angeben, nachdem jede Datei gelesen wurde.
Funktionsloder (Surl, Timeout, fcallback / *, übergeben in Parameter 1, in Parameter 2 usw. * /) {var apassArgs = array.prototype.slice.call (Argumente, 3), oreq = new xmlhttprequest (); oreq.ontimeout = function () {console.log ("Timeout anfordern"); } oreq.onReadyStatechange = function () {if (oreq.readyState === 4) {if (oreq.status === 200) {fcallback.apply (oreq, apassargs); } else {console.log ("error", oreq.Statustext); }}}; oreq.open ("get", surl, wahr); oreq.timeout = timeout; oreq.send (null);}Verwendung der Lastfilmfunktion:
Funktion showsMessage (smsg) {alert (smsg + this.responseText);} loadFile ("message.txt", 200, showMessage, "New Message! // n");Zeile 1 definiert eine Funktion. Nach dem Lesen der Datei wird die FCallback -Funktion mit allen Parametern nach dem dritten Parameter als eigene Parameter aufgerufen.
Zeile 3 verwendet eine Zeitüberschreitungseinstellung, um zu vermeiden, dass Ihr Code eine langfristige Ausführung der Rückgabedaten der Leseanforderung ausführt. Durch die Zuweisung eines Wertes der Timeout -Eigenschaft des XMLHTTPrequest -Objekts der Timeout -Eigenschaft
Das sechste Verhalten von OnReadyStatechange Event -Handle gibt die Rückruffunktion an. Überprüfen Sie, ob die Anforderung bei der Ausführung der Funktion endet (der Anforderungsstatus ist 4). In diesem Fall stellt fest, ob die Anfrage erfolgreich ist (der HTTP -Status beträgt 200). Wenn ja, gibt der Seitenquellcode aus. Wenn ein Fehler auftritt, gibt die Fehlermeldung aus.
Zeile 15 gibt an, dass der dritte Parameter wahr ist und angibt, dass die Anforderung im asynchronen Modus ausgeführt werden sollte.
4. Beispiel: Verwenden Sie asynchrone Anfragen, es werden keine Schließungen verwendet.
Funktion SwitchXhrState () {Switch (this.ReadyState) {case 0: console.log ("Die Open () -Methode wurde noch nicht aufgerufen."); Break; Fall 1: Konsole.log ("Die Send () -Methode wurde noch nicht berufen."); Break; Fall 2: Konsole.log ("Die Send () -Methode wurde aufgerufen, der Antwortkopf und der Antwortstatus wurden zurückgegeben."); Break; Fall 3: Konsole.log ("Download, Teil der Antwortentität wurde erhalten."); Break; Fall 4: Konsole.log ("Anfrage abgeschlossen!"); this.callback.apply (this, this.Arguments); }}; Funktion loadFile (surl, fcallback / *, übergeben in Parameter 1, in Parameter 2 usw. * /) {var oreq = new XmlhttpRequest (); oreq.callback = fcallback; oreq.Arguments = array.prototype.slice.call (Argumente, 2); oreq.onReadyStatechange = SwitchXhrState; oreq.open ("get", surl, wahr); oreq.send (null);}Verwenden Sie Bind:
Funktion SwitchXhrState (fcallback, aargumente) {Switch (this.ReadyState) {case 0: console.log ("Die Open () -Methode wurde nicht genannt."); Break; Fall 1: Konsole.log ("Die Send () -Methode wurde nicht genannt."); Break; Fall 2: Konsole.log ("Die Send () -Methode wurde aufgerufen, der Antwortkopf und der Antwortstatus wurden zurückgegeben."); Break; Fall 3: Konsole.log ("Die Teilantwortentität wurde während des Downloads erhalten."); Break; Fall 4: Konsole.log ("Anfrage abgeschlossen!"); fcallback.apply (this, aarguments); }}; Funktion loadFile (surl, fcallback / *, übergeben in Parameter 1, in Parameter 2 usw. * /) {var oreq = new XmlhttpRequest (); oreq.onReadyStatechange = switchXhrState.bind (oreq, fcallback, array.prototype.slice.call (Argumente, 2)); oreq.open ("get", surl, wahr); oreq.send (null);}Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.