Xmlhttprequest ist eine Browser -Schnittstelle, mit der JavaScript die HTTP -Kommunikation durchführen kann.
Zuerst hat Microsoft diese Schnittstelle in IE 5 eingeführt. Da sie so nützlich ist, haben andere Browser imitiert und bereitgestellt, sodass Ajax -Operationen geboren wurden.
Diese Schnittstelle wurde jedoch nicht standardisiert, und die Implementierung jedes Browsers ist mehr oder weniger unterschiedlich. Nachdem das Konzept von HTML 5 gebildet worden war, begann W3C, diese Schnittstelle zu standardisieren. Im Februar 2008 wurde der Entwurf der XMLHTTPrequest Level 2 vorgeschlagen.
Diese neue Version von XMLHTTPrequest schlägt viele nützliche neue Funktionen vor, die die Internetinnovation erheblich fördern werden. In diesem Artikel wird diese neue Version im Detail vorgestellt.
1. alte Version des xmlhttprequest -Objekts
Bevor Sie die neue Version vorstellen, überprüfen wir die Verwendung der alten Version.
Erstellen Sie zunächst eine neue Instanz von xmlHttprequest.
var xhr = new xmlhttprequest ();
Anschließend wird dem Remote -Host eine HTTP -Anfrage ausgestellt.
Die Codekopie lautet wie folgt:
xhr.open ('get', 'example.php');
xhr.send ();
Warten Sie dann, bis der Remote -Host antwortet. Zu diesem Zeitpunkt müssen Sie die Statusänderungen des XMLHTTPrequest -Objekts überwachen und die Rückruffunktion angeben.
xhr.onReadyStatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {alert (xhr.responsetext); } else {alert (xhr.StatUntext); }};Der obige Code enthält die Haupteigenschaften der alten Version des XMLHTTPrequest -Objekts:
Die Codekopie lautet wie folgt:
* xhr.readyState: Der Status des XMLHTTPREQUEST -Objekts, gleich 4, bedeutet, dass die Daten empfangen wurden.
* XHR.Status: Der vom Server zurückgegebene Statuscode bedeutet 200 bedeutet, dass alles normal ist.
* xhr.responsetext: vom Server zurückgegebene Textdaten
* XHR.ResponsexML: XML -Formatdaten, die vom Server zurückgegeben wurden
* XHR.StatUntext: Der vom Server zurückgegebene Statustext.
2. Nachteile der alten Version
Die alte Version des XMLHTTPrequest -Objekts hat die folgenden Nachteile:
* Nur die Übertragung von Textdaten wird unterstützt und kann nicht zum Lesen und Hochladen von Binärdateien verwendet werden.
* Beim Übertragen und Empfangen von Daten gibt es keine Fortschrittsinformationen, sodass Sie nur auffordern können, ob sie abgeschlossen sind.
* Aufgrund der "selben Ursprungsrichtlinie "können Sie nur Daten von Servern mit demselben Domänennamen anfordern.
3. Funktionen der neuen Version
Die neue Version des XMLHTTPrequest -Objekts hat die Mängel der alten Version erheblich verbessert.
Die Codekopie lautet wie folgt:
* Sie können das Zeitlimit für HTTP -Anfragen festlegen.
* FormData -Objekte können zum Verwalten von Formulardaten verwendet werden.
* Dateien können hochgeladen werden.
* Sie können Daten unter verschiedenen Domainnamen anfordern (Cross-Domain-Anfrage).
* Sie können Binärdaten auf der Serverseite erhalten.
* Sie können die Fortschrittsinformationen der Datenübertragung erhalten.
Als nächstes werde ich diese neuen Funktionen einzeln vorstellen.
4. Zeitlimit für HTTP -Anfragen
Manchmal sind AJAX-Operationen zeitaufwändig und es ist unmöglich vorherzusagen, wie viel Zeit es braucht. Wenn die Internetgeschwindigkeit sehr langsam ist, müssen Benutzer möglicherweise lange warten.
Die neue Version des XMLHTTPrequest -Objekts hat ein Timeout -Attribut hinzugefügt, mit dem das Zeitlimit für HTTP -Anforderungen festgelegt werden kann.
xhr.timeout = 3000;
Die obige Anweisung legt die maximale Wartezeit auf 3000 Millisekunden fest. Nachdem dieses Zeitlimit übergeben wurde, wird die HTTP -Anfrage automatisch gestoppt. Es gibt auch ein Timeout -Ereignis, das die Rückruffunktion angibt.
Die Codekopie lautet wie folgt:
xhr.ontimeout = function (Ereignis) {
alarm ('Anfrage Timeout!');
}
Derzeit unterstützen Opera, Firefox und IE 10 diese Eigenschaft. Diese Eigenschaft von IE 8 und IE 9 gehört zum XdomainRequest -Objekt, während Chrome und Safari es nicht unterstützen.
5. FormData -Objekt
Ajax -Operationen werden häufig verwendet, um Formaten zu übergeben. Zur Erleichterung der Form des Formulars hat HTML 5 ein Formulardata -Objekt zu Scheinformen hinzugefügt.
Erstellen Sie zunächst ein neues Formdata -Objekt.
var formdata = new formData ();
Fügen Sie dann ein Formular Element hinzu.
FormData.Append ('Benutzername', 'Zhang San');
FormData.Append ('ID', 123456);
Schließlich übertragen Sie dieses Formulardata -Objekt direkt. Dies ist genau das gleiche wie das Senden eines Webformulars.
Xhr.Send (FormData);
Das FormatData -Objekt kann auch verwendet werden, um den Wert eines Webformulars zu erhalten.
Die Codekopie lautet wie folgt:
var form = document.getElementById ('myForm');
var formdata = new FormData (Form);
FormData.Append ('Secret', '123456'); // Fügen Sie ein Formular Element hinzu
xhr.open ('post', form.action);
Xhr.Send (FormData);
6. Dateien hochladen
Die neue Version des XMLHTTPrequest -Objekts kann nicht nur Textinformationen senden, sondern auch Dateien hochladen.
Unter der Annahme, dass Dateien ein Formularelement sind (input [type = "file"]) von "Datei auswählen", laden wir es in das FormularData -Objekt.
Die Codekopie lautet wie folgt:
var formdata = new formData ();
für (var i = 0; i <files.length; i ++) {
FormData.Append ('Dateien []', Dateien [i]);
}
Senden Sie dann dieses FormularData -Objekt.
Xhr.Send (FormData);
7. Cross-Domänen-Ressourcenfreigabe (CORS)
Die neue Version des XMLHTTPrequest -Objekts kann HTTP -Anforderungen an Server mit unterschiedlichen Domainnamen ausstellen. Dies wird als "Cross-Origin-Ressourcenfreigabe" (CORS) bezeichnet.
Die Voraussetzung für die Verwendung von "Cross-Domain-Ressourcenfreigabe" ist, dass der Browser diese Funktion unterstützen muss und der Server dieser "Cross-Domain" zustimmen muss. Wenn die oben genannten Bedingungen erfüllt werden können, ist der Code genauso wie der von Nicht-Cross-Domain-Anfragen geschrieben.
xhr.open ('get', 'http: //other.server/and/path/to/script');
Derzeit unterstützen die Mainstream -Browser zusätzlich zu IE 8 und IE 9 CORs, und der IE 10 wird diese Funktion ebenfalls unterstützen. Für serverseitige Einstellungen finden Sie unter "Server-Seite-Zugriffskontrolle".
8. Binärdaten empfangen (Methode A: Mimetyp umschreiben)
Die alte Version des XMLHTTPrequest -Objekts kann nur Textdaten vom Server abrufen (ansonsten beginnt sein Name nicht mit XML), während die neue Version binäre Daten abrufen kann.
Hier sind zwei verschiedene Arten. Der ältere Ansatz besteht darin, den Mimetyp der Daten zu überschreiben, die vom Server zurückgegebenen Binärdaten als Textdaten zu verkleiden und dem Browser mitzuteilen, dass dies ein benutzerdefinierter Zeichensatz ist.
xhr.overridemimetype ("text/plain; charset = x-user-definiert");
Verwenden Sie dann die ResponText -Eigenschaft, um die vom Server zurückgegebenen Binärdaten zu empfangen.
var binstr = xhr.responsetext;
Da der Browser es zu diesem Zeitpunkt als Textdaten behandelt, muss er nacheinander in binäre Daten wiederhergestellt werden.
Die Codekopie lautet wie folgt:
für (var i = 0, len = Binstr.length; i <len; ++ i) {
var c = binstr.charCodeat (i);
var byte = c & 0xff;
}
Die Bit -Operation "C & 0xff" der letzten Zeile bedeutet, dass unter den beiden Bytes jedes Zeichens nur das nächste Byte beibehalten wird und das vorherige Byte weggeworfen wird. Der Grund dafür ist, dass der Browser-Zeichen die Zeichen automatisch in den Abschnitt 0xF700-0xf7ff von Unicode interpretiert.
8. Binärdaten empfangen (Methode B: ResponseType -Eigenschaft)
Die neuere Möglichkeit, Binärdaten vom Server abzurufen, besteht darin, die neu hinzugefügte ResponType -Eigenschaft zu verwenden. Wenn der Server Textdaten zurückgibt, ist der Wert dieser Eigenschaft "Text", was der Standardwert ist. Neuere Browser unterstützen auch andere Werte, dh sie können Daten in anderen Formaten empfangen.
Sie können den ResponseType auf Blob festlegen, was bedeutet, dass der Server ein binäres Objekt zurücksendet.
Die Codekopie lautet wie folgt:
var xhr = new xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
xhr.responsetype = 'blob';
Verwenden Sie beim Empfangen von Daten einfach das Blob -Objekt, das mit Ihrem Browser geliefert wird.
var blob = neuer Blob ([xhr.response], {type: 'image/png'});
Beachten Sie, dass es XHR.Response lesen soll, nicht xhr.responsetext.
Sie können den ResponType auch auf ArrayBuffer einstellen und die Binärdaten in einem Array installieren.
Die Codekopie lautet wie folgt:
var xhr = new xmlhttprequest ();
xhr.open ('get', '/path/to/image.png');
xhr.responsetype = "arrayBuffer";
Wenn Sie Daten erhalten, müssen Sie dieses Array durchqueren.
Die Codekopie lautet wie folgt:
var arrayBuffer = xhr.response;
if (ArrayBuffer) {
var bytearray = new Uint8Array (ArrayBuffer);
für (var i = 0; i <bytearray.ByTelength; i ++) {
// etwas mach
}
}
Eine detailliertere Diskussion finden Sie in Senden und Empfangen von Binärdaten.
9. Fortschrittsinformationen
Die neue Version des XMLHTTPrequest -Objekts hat ein Fortschrittsereignis bei der Übertragung von Daten, mit der Fortschrittsinformationen zurückgegeben werden.
Es ist in zwei Situationen unterteilt: hochladen und herunterladen. Das heruntergeladene Fortschrittsereignis gehört zum XMLHTTPREquest -Objekt, und das hochgeladene Fortschrittsereignis gehört zum XMLHTTPREquest.Upload -Objekt.
Definieren wir zunächst die Rückruffunktion des Fortschrittsereignisses.
Die Codekopie lautet wie folgt:
xhr.onprogress = updateProgress;
xhr.Upload.onprogress = updateProgress;
Verwenden Sie dann in der Rückruffunktion einige Eigenschaften dieses Ereignisses.
Die Codekopie lautet wie folgt:
Funktion updateProgress (Ereignis) {
if (event.lengthComputable) {
var prozentComplete = event.loaded / event.total;
}
}
Im obigen Code Ereignis.total sind die gesamten Bytes, die übertragen werden müssen, und Ereignis. Wenn Event.LengthComputable nicht wahr ist, ist Event.total gleich 0.
Es gibt fünf weitere Ereignisse im Zusammenhang mit dem Fortschrittsereignis, die die Rückruffunktion separat angeben können:
* Ladenereignis: Die Übertragung erfolgreich abgeschlossen.
* Abrufenereignis: Das Getriebe wurde vom Benutzer abgesagt.
* Fehlerereignis: Während der Übertragung ist ein Fehler aufgetreten.
* LoadStart -Ereignis: Die Übertragung beginnt.
* Loadend -Ereignis: Das Getriebe endet, aber ich weiß nicht, ob es erfolgreich ist oder fehlschlägt.
10. Lesematerial
1. Einführung in XMLHTTPrequest Level 2: Eine umfassende Einführung in neue Funktionen.
2. Neue Tricks in xmlhttprequest 2: Einige Verwendung Einführungen.
3. Verwenden Sie XMLHTTPREQUEST: einige fortgeschrittene Verwendungen, die hauptsächlich auf Firefox -Browser abzielen.
4. HTTP Access Control: CORS -Übersicht.
5. DOM-Zugriffskontrolle mithilfe von Cross-Origin-Ressourcenfreigabe: 9 Arten von HTTP-Headerinformationen von CORs
6. Serverseitige Zugriffskontrolle: Serverseitige CORS-Einstellungen.
7. CORS aktivieren: Server CORS -Einstellungen.