Eine wichtige Technologie (Werkzeug), die beim Entwerfen von AJAX verwendet wird, ist das XMLHTTPRequest-Objekt. Das XMLHttpRequest-Objekt ist heute die technische Grundlage für alle AJAX- und Web 2.0-Anwendungen. Obwohl Softwareanbieter und Open-Source-Communities mittlerweile verschiedene AJAX-Frameworks bereitstellen, um die Verwendung des XMLHttpRequest-Objekts weiter zu vereinfachen, ist es dennoch erforderlich, dass wir die Eigenschaften und Methoden dieses Objekts verstehen.
1. Was ist das XMLHTTPRequest-Objekt?
Die gebräuchlichste Definition lautet: XmlHttp ist eine Reihe von APIs, die XML und andere Daten über das http-Protokoll in JavaScript, VbScript, Jscript und anderen Skriptsprachen übertragen oder empfangen können. Der größte Nutzen von XmlHttp besteht darin, dass es einen Teil des Inhalts einer Webseite aktualisieren kann, ohne die gesamte Seite zu aktualisieren. (Diese Funktion ist eine der Hauptfunktionen von AJAX)
Erklärung von MSDN: XmlHttp stellt ein Protokoll für den Client zur Kommunikation mit dem http-Server bereit. Der Client kann über das XmlHttp-Objekt (MSXML2.XMLHTTP.3.0) eine Anfrage an den HTTP-Server senden und das Microsoft XML Document Object Model (DOM) verwenden, um die Antwort zu verarbeiten.
Lassen Sie mich hier abschweifen. Tatsächlich gab es in der Vergangenheit keine ausreichende Browserunterstützung, sodass die meisten WEB-Programmierer sie nicht sehr oft nutzten hat sich stark verändert, Mozilla und Safari haben es als De-facto-Standard übernommen und Mainstream-Browser begannen, das XMLHTTPRequest-Objekt zu unterstützen. Hier muss jedoch betont werden, dass XMLHTTPRequest noch kein W3C-Standard ist, sodass die Leistung auf verschiedenen Browsern leicht unterschiedlich ist.
2. Erstellen Sie ein XMLHTTPRequest-Objekt.
Apropos Unterschiede: Schauen wir uns an, wie es deklariert (verwendet) wird. Bevor wir das XMLHTTPRequest-Objekt zum Senden von Anforderungen und zum Verarbeiten von Antworten verwenden, müssen wir Javascript verwenden, um ein XMLHTTPRequest-Objekt zu erstellen. (IE implementiert XMLHTTPRequest als ActiveX-Objekt und andere Browser [wie Firefox/Safari/Opear] implementieren es als natives Javascript-Objekt). Schauen wir uns an, wie man es mit JavaScript erstellt:
Das Folgende ist ein Zitat:
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
//XMLHTTPRequest-Objekt erstellen
Funktion createXMLHTTPRequest(){
if(window.ActiveXObject){ // Bestimmen Sie, ob ActiveX-Steuerelement unterstützt wird
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // Erstellen Sie ein XMLHTTPRequest-Objekt, indem Sie eine neue Instanz von ActiveXObject instanziieren
}
else if(window.XMLHTTPRequest){ // Bestimmen Sie, ob XMLHTTPRequest als lokales Javascript-Objekt implementiert werden soll
xmlhttp = new XMLHTTPRequest(); // Eine Instanz von XMLHTTPRequest erstellen (lokales Javascript-Objekt)
}
}
//-->
</script>3. Da es zu viele Dinge gibt, werde ich diese Seite verwenden, um die Methoden und Attribute später aufzulisten (hauptsächlich, weil ich auch lerne).
<html>
<Kopf>
<title>Beschreibung des XMLHTTPRequest-Objekts DEMO</title>
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
//Erstelle ein XMLHTTPRequest-Objekt
Funktion createXMLHTTPRequext(){
if(window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
sonst if(window.XMLHTTPRequest){
xmlhttp = new XMLHTTPRequest();
}
}
Funktion PostOrder(xmldoc)
{
createXMLHTTPRequext();
// Methode: offen
//Erstellen Sie eine neue http-Anfrage und geben Sie die Anfragemethode, die URL und die Verifizierungsinformationen an
// Syntax: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//Parameter
// bstrMethod
//http-Methoden wie: POST, GET, PUT und PROPFIND. Groß-/Kleinschreibung wird nicht beachtet.
// bstrUrl
//Die angeforderte URL-Adresse kann eine absolute Adresse oder eine relative Adresse sein.
// varAsync[optional]
// Boolescher Typ, gibt an, ob diese Anfrage asynchron ist. Der Standardwert ist true. Bei „true“ wird die durch das Attribut „onreadystatechange“ angegebene Rückruffunktion aufgerufen, wenn sich der Status ändert.
// bstrUser[optional]
// Wenn der Server eine Verifizierung erfordert, geben Sie hier den Benutzernamen an. Wenn nicht angegeben, wird ein Verifizierungsfenster angezeigt, wenn der Server eine Verifizierung erfordert.
// bstrPassword[optional]
// Der Passwortteil der Verifizierungsinformationen. Wenn der Benutzername leer ist, wird dieser Wert ignoriert.
// Hinweis: Nach dem Aufruf dieser Methode können Sie die Sendemethode aufrufen, um Daten an den Server zu senden.
xmlhttp.Open("get", " http://localhost/example.htm ", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// alarm(book.xml);
// Attribut: onreadystatechange
//onreadystatechange: Geben Sie den Ereignishandler an, wenn sich die Eigenschaft readyState ändert
// Syntax: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// Das folgende Beispiel veranschaulicht den Aufruf der HandleStateChange-Funktion, wenn sich die readyState-Eigenschaft des XMLHTTPRequest-Objekts ändert.
// Wenn die Daten empfangen werden (readystate == 4), wird eine Schaltfläche auf dieser Seite aktiviert
// Hinweis: Diese Eigenschaft ist schreibgeschützt und eine Erweiterung des W3C Document Object Model.
xmlhttp.onreadystatechange= HandleStateChange;
// Methode: senden
//Anfrage an http-Server senden und Antwort erhalten
// Syntax: oXMLHttpRequest.send(varBody);
// Parameter: varBody (Daten, die über diese Anfrage gesendet werden sollen.)
// Hinweis: Der synchrone oder asynchrone Modus dieser Methode hängt vom bAsync-Parameter in der offenen Methode ab. Wenn bAsync == False, wartet diese Methode, bis die Anforderung abgeschlossen ist oder eine Zeitüberschreitung auftritt, bevor sie zurückkehrt werde sofort wiederkommen.
// Diese Methode benötigt einen optionalen Parameter, nämlich den zu verwendenden requestBody. Die zulässigen VARIANT-Eingabetypen sind BSTR, SAFEARRAY von UI1 (vorzeichenlose Bytes), IDispatch für ein XML Document Object Model (DOM)-Objekt und IStream * Verwenden Sie beim Senden von IStream *-Eingabetypen nur die Chunked-Codierung. Die Komponente legt den Content-Length-Header automatisch für alle außer IStream *-Eingabetypen fest.
// Wenn die gesendeten Daten BSTR sind, wird die Antwort als utf-8 codiert und ein Dokumenttyp-Header mit einem Zeichensatz muss an der entsprechenden Position gesetzt werden.
// Wenn der Eingabetyp ein SAFEARRAY von UI1 ist, wird die Antwort unverändert ohne zusätzliche Codierung gesendet. Der Aufrufer muss einen Content-Type-Header mit dem entsprechenden Inhaltstyp festlegen.
// Wenn es sich bei den gesendeten Daten um ein XML-DOM-Objekt handelt, wird die Antwort gemäß der im XML-Dokument deklarierten Codierung codiert. Wenn im XML-Dokument keine Codierung deklariert ist, wird das Standard-UTF-8 verwendet.
// Wenn der Eingabetyp ein IStream * ist, wird die Antwort unverändert ohne zusätzliche Codierung gesendet. Der Aufrufer muss einen Content-Type-Header mit dem entsprechenden Inhaltstyp festlegen.
xmlhttp.Send(xmldoc);
// Methode: getAllResponseHeaders
// Alle http-Header der Antwort abrufen
// Syntax: strValue = oXMLHttpRequest.getAllResponseHeaders();
// Hinweis: Jeder http-Header-Name und -Wert wird durch einen Doppelpunkt getrennt und endet mit rn. Diese Methode kann erst aufgerufen werden, nachdem die Sendemethode abgeschlossen ist.
alarm(xmlhttp.getAllResponseHeaders());
// Methode: getResponseHeader
// Den angegebenen http-Header aus den Antwortinformationen abrufen
// Syntax: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// Hinweis: Diese Methode kann erst aufgerufen werden, nachdem die Sendemethode erfolgreich war. Wenn der vom Server zurückgegebene Dokumenttyp „text/xml“ ist, dann dieser Satz
// xmlhttp.getResponseHeader("Content-Type"); gibt die Zeichenfolge "text/xml" zurück. Sie können die Methode getAllResponseHeaders verwenden, um vollständige http-Header-Informationen abzurufen.
Alert(xmlhttp.getResponseHeader("Content-Type")); // Ausgabe der Content-Type-Spalte im http-Header: die Version und der Name des aktuellen Webservers.
document.frmTest.myButton.disabled = true;
// Methode: abbrechen
//Aktuelle Anfrage abbrechen
// Syntax: oXMLHttpRequest.abort();
// Hinweis: Nach dem Aufruf dieser Methode gibt die aktuelle Anfrage den Status UNINITIALIZED zurück.
//xmlhttp.abort();
// Methode: setRequestHeader
// Geben Sie separat einen bestimmten http-Header der Anfrage an
// Syntax: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// Parameter: bstrHeader (String, Header-Name.)
// bstrValue(String, Wert.)
// Hinweis: Wenn bereits ein http-Header mit diesem Namen vorhanden ist, wird dieser überschrieben. Diese Methode muss nach der open-Methode aufgerufen werden.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
Funktion HandleStateChange()
{
//Attribut: readyState
// Gibt den aktuellen Status der XMLHTTP-Anfrage zurück
// Syntax: lValue = oXMLHttpRequest.readyState;
// Anmerkungen: Variable, dieses Attribut ist schreibgeschützt und der Status wird durch eine Ganzzahl der Länge 4 dargestellt. Die Definition lautet wie folgt:
// 0 (nicht initialisiert) Das Objekt wurde erstellt, aber nicht initialisiert (die Open-Methode wurde noch nicht aufgerufen)
// 1 (Initialisierung) Das Objekt wurde erstellt und die Sendemethode wurde noch nicht aufgerufen.
// 2 (Daten senden) Die Sendemethode wurde aufgerufen, aber der aktuelle Status und der HTTP-Header sind unbekannt
// 3 (Daten werden übertragen) Ein Teil der Daten wurde empfangen. Da die Antwort- und HTTP-Header unvollständig sind, tritt beim Abrufen eines Teils der Daten über ResponseBody und ResponseText ein Fehler auf.
// 4 (Complete) Der Datenempfang ist abgeschlossen. Zu diesem Zeitpunkt können die vollständigen Antwortdaten über ResponseBody und ResponseText abgerufen werden.
if (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = false;
// Attribut: ResponseBody
// Antwortdaten des Servers in einem bestimmten Format zurückgeben
// Syntax: strValue = oXMLHttpRequest.responseBody;
// Anmerkungen: Variable, diese Eigenschaft ist schreibgeschützt und stellt die nicht dekodierten Binärdaten dar, die direkt vom Server im vorzeichenlosen Array-Format zurückgegeben werden.
alarm(xmlhttp.responseBody);
//Eigenschaft: ResponseStream
//Antwortinformationen in Form eines Ado Stream-Objekts zurückgeben
// Syntax: strValue = oXMLHttpRequest.responseStream;
// Anmerkungen: Variable, diese Eigenschaft ist schreibgeschützt und gibt Antwortinformationen in Form eines Ado Stream-Objekts zurück.
alarm(xmlhttp.responseStream);
//Attribut: ResponseText
// Antwortinformationen als String zurückgeben
// Syntax: strValue = oXMLHttpRequest.responseText;
// Anmerkungen: Variable, diese Eigenschaft ist schreibgeschützt und gibt die Antwortinformationen als Zeichenfolge zurück. XMLHTTP versucht, die Antwortinformationen in einen Unicode-String zu dekodieren.
// XMLHTTP legt die Codierung der Antwortdaten standardmäßig auf UTF-8 fest. Wenn die vom Server zurückgegebenen Daten BOM (Byte-Order Mark) enthalten, kann XMLHTTP dies tun
// Um alle UCS-2- (Big oder Little Endian) oder UCS-4-Daten zu dekodieren. Beachten Sie, dass dieses Attribut gilt, wenn der Server ein XML-Dokument zurückgibt
// Eigenschaften verarbeiten keine Codierungsdeklarationen in XML-Dokumenten. Sie müssen ResponseXML verwenden, um damit umzugehen.
alarm(xmlhttp.responseText);
//Attribut: ResponseXML
//Formatieren Sie die Antwortinformationen in ein XML-Dokumentobjekt und geben Sie es zurück
// Syntax: var objDispatch = oXMLHttpRequest.responseXML;
// Anmerkungen: Variable, diese Eigenschaft ist schreibgeschützt. Formatieren Sie die Antwortinformationen in ein XML-Dokumentobjekt und geben Sie sie zurück. Wenn es sich bei den Antwortdaten nicht um ein gültiges XML-Dokument handelt,
// Diese Eigenschaft selbst gibt kein XMLDOMParseError zurück, und Fehlerinformationen können über das verarbeitete DOMDocument-Objekt abgerufen werden.
alarm("Result = " + xmlhttp.responseXML.xml);
//Attribut: Status
// Gibt den http-Statuscode der aktuellen Anfrage zurück
// Syntax: lValue = oXMLHttpRequest.status;
// Rückgabewert: langer Standard-HTTP-Statuscode, definiert wie folgt:
//Nummer:Beschreibung
// 100:Weiter
// 101:Protokolle wechseln
// 200:OK
// 201:Erstellt
// 202:Akzeptiert
// 203: Nicht verbindliche Informationen
// 204:Kein Inhalt
// 205:Inhalt zurücksetzen
// 206: Teilinhalt
// 300:Mehrere Auswahlmöglichkeiten
// 301:Dauerhaft verschoben
// 302:Gefunden
// 303: Siehe Andere
// 304: Nicht geändert
// 305:Proxy verwenden
// 307: Temporäre Weiterleitung
// 400: Ungültige Anfrage
// 401: Nicht autorisiert
// 402:Zahlung erforderlich
// 403:Verboten
// 404: Nicht gefunden
// 405:Methode nicht zulässig
// 406: Nicht akzeptabel
// 407: Proxy-Authentifizierung erforderlich
// 408:Zeitüberschreitung bei Anforderung
// 409:Konflikt
// 410: Weg
// 411:Länge erforderlich
// 412: Vorbedingung fehlgeschlagen
// 413:Anforderungsentität zu groß
// 414:Request-URI zu lang
// 415:Nicht unterstützter Medientyp
// 416: Angeforderter Bereich nicht geeignet
// 417:Erwartung fehlgeschlagen
// 500: Interner Serverfehler
// 501: Nicht implementiert
// 502: Schlechtes Gateway
// 503: Dienst nicht verfügbar
// 504:Gateway-Timeout
// 505:HTTP-Version wird nicht unterstützt
// Hinweis: Lange Ganzzahl, diese Eigenschaft ist schreibgeschützt und gibt den HTTP-Statuscode der aktuellen Anforderung zurück. Diese Eigenschaft kann erst abgerufen werden, nachdem die Daten gesendet und empfangen wurden.
Alert(xmlhttp.status);
//Attribut: statusText
// Den Antwortzeilenstatus der aktuellen Anfrage zurückgeben
// Syntax: strValue = oXMLHttpRequest.statusText;
// Anmerkungen: Zeichenfolge, diese Eigenschaft ist schreibgeschützt. Sie gibt den Antwortzeilenstatus der aktuellen Anforderung in BSTR zurück. Diese Eigenschaft kann erst abgerufen werden, nachdem die Daten gesendet und empfangen wurden.
Alert(xmlhttp.statusText);
}
}
//-->
</script>
</head>
<Körper>
<form name="frmTest">
<input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');">
</form>
</body>
</html>