Worüber ich sprechen werde, ist sehr grundlegend, daher sollten Experten es nicht lesen. Wenn Sie es lesen, teilen Sie mir bitte Ihre Meinung mit. Anfänger oder Leute, die nicht viel über Grundkenntnisse wissen, können es lesen, um ihr Verständnis und ihr Gedächtnis zu verbessern.
Das XMLHttpRequest-Objekt ist der Kern der AJAX-Funktion. Um ein AJAX-Programm zu entwickeln, müssen Sie zunächst das XMLHttpRequest-Objekt verstehen.
Um das XMLHttpRequest-Objekt zu verstehen, beginnen Sie mit der Erstellung des XMLHttpRequest-Objekts in verschiedenen Browsern.
Schauen Sie sich zunächst die Methode an, mit der der IE das XMLHttpRequest-Objekt erstellt (Methode 1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //Eine neuere Version von IE verwenden, um ein IE-kompatibles Objekt zu erstellen (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Eine ältere Version von IE verwenden, um ein IE-kompatibles Objekt zu erstellen (Microsoft.XMLHTTP)
Mozilla, Opera, Safari und die meisten Nicht-IE-Browser verwenden die folgende Methode (Methode 2), um XMLHttpRequest-Objekte zu erstellen:
var xmlhttp = new XMLHttpRequest();
Internet Explorer verwendet tatsächlich ein Objekt namens XMLHttp anstelle des XMLHttpRequest-Objekts, das Mozilla, Opera, Safari und die meisten Nicht-Microsoft-Browser verwenden (im Folgenden gemeinsam als XMLHttpRequest-Objekt bezeichnet). IE7 begann auch, das XMLHttpRequest-Objekt zu verwenden.
Wenn verschiedene Browser beim Erstellen des XMLHttpRequest-Objekts falsche Methoden verwenden, meldet der Browser einen Fehler und das Objekt kann nicht verwendet werden. Wir benötigen also eine Methode zum Erstellen eines XMLHttpRequest-Objekts, das mit verschiedenen Browsern kompatibel ist:
Erstellen Sie eine XMLHttpRequest-Objektmethode, die mit mehreren Browsern kompatibel ist
var xmlhttp = false; //Eine neue Variablenanforderung erstellen und ihr den Wert false zuweisen. Verwenden Sie „false“ als Beurteilungsbedingung, was bedeutet, dass das XMLHttpRequest-Objekt noch nicht erstellt wurde.
Funktion CreateXMLHttp(){
versuchen{
xmlhttp = new XMLHttpRequest(); //Versuchen Sie, ein XMLHttpRequest-Objekt zu erstellen. Browser außer IE unterstützen diese Methode.
}
fangen (e){
versuchen{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Eine neuere Version von IE verwenden, um ein IE-kompatibles Objekt zu erstellen (Msxml2.XMLHTTP)
}
fangen (e){
versuchen{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Verwenden Sie eine ältere Version von IE, um ein IE-kompatibles Objekt zu erstellen (Microsoft.XMLHTTP).
}
fangen (fehlgeschlagen){
xmlhttp = false; //Wenn es fehlschlägt, stellen Sie sicher, dass der Wert der Anfrage immer noch falsch ist.
}
}
}
return xmlhttp;
}
Es ist sehr einfach zu beurteilen, ob die Erstellung erfolgreich ist,
wenn (!xmlhttp){
//XMLHttpRequest-Objekt konnte nicht erstellt werden!
}
anders{
//Erfolgreich erstellt!
}
Nachdem wir das XMLHttpRequest-Objekt erstellt haben, werfen wir einen Blick auf die Methoden, Eigenschaften und den wichtigsten onreadystatechange-Ereignishandler dieses Objekts.
Methode:
open() Beschreibung: HTTP-Anforderungsparameter wie URL und HTTP-Methode initialisieren, die Anforderung jedoch nicht senden.
abort() Beschreibung: Brechen Sie die aktuelle Antwort ab, schließen Sie die Verbindung und beenden Sie alle ausstehenden Netzwerkaktivitäten.
getAllResponseHeaders() Beschreibung: Gibt HTTP-Antwortheader als nicht geparste Zeichenfolgen zurück.
getResponseHeader() Beschreibung: Gibt den Wert des angegebenen HTTP-Antwortheaders zurück.
send() Beschreibung: Sendet eine HTTP-Anfrage unter Verwendung der an die Methode open() übergebenen Parameter und des optionalen Anforderungstexts, der an die Methode übergeben wird.
setRequestHeader() Beschreibung: Setzt oder fügt eine HTTP-Anfrage zu einer offenen, aber nicht gesendeten Anfrage hinzu.
Attribute:
readyState Beschreibung: Der Status der HTTP-Anfrage.
Antworttext Beschreibung: Der bisher vom Server empfangene Antworttext (ohne Header) oder eine leere Zeichenfolge, wenn keine Daten empfangen wurden.
ResponseXML-Beschreibung: Die Antwort auf die Anfrage, in XML geparst und als Document-Objekt zurückgegeben.
Status Beschreibung: Vom Server zurückgegebener HTTP-Statuscode.
statusText Beschreibung: Dieses Attribut gibt den HTTP-Statuscode der Anfrage unter Verwendung eines Namens anstelle einer Nummer an.
onreadystatechange ist die Ereignishandlerfunktion, die jedes Mal aufgerufen wird, wenn sich die Eigenschaft readyState ändert.
Lassen Sie uns das XMLHttpRequest-Objekt aus dem Prozess des Sendens einer Anfrage und der Verarbeitung der Anfrageergebnisse verstehen.
Natürlich wird vor dem Senden der Anfrage ein XMLHttpRequest-Objekt generiert. Es ist nicht erforderlich, weiteren Code zu schreiben, wenn dieser bereits vorhanden ist.
Generieren Sie ein XMLHttpRequest-Objekt.
var xmlhttp = CreateXMLHttp();
An welche Website möchten wir die Anfrage senden, nachdem wir das XMLHttpRequest-Objekt erstellt haben? Wählen wir den RSS auf der Homepage des Blogparks aus. Wie lege ich also die Website-Adresse fest, die ich anfordern möchte? Verwenden Sie die Methode open().
open(Methode, URL, asynchron, Benutzername, Passwort)
Diese Methode hat 5 Parameter. Die spezifische Bedeutung können Sie hier sehen: http://www.w3school.com.cn/xmldom/dom_http.asp
Das nutzen wir.
xmlHttp.open("get"," http://www.cnblogs.com",true );
Der get-Parameter bedeutet, dass die get-Methode verwendet wird. Der zweite ist natürlich die Zieladresse, die Homepage des Blogparks. Der dritte bedeutet, ob sie asynchron ist. Spezifische Parameterbeschreibungen finden Sie auch unter http://www.w3school.com.cn .
Okay, das Ziel ist festgelegt, wie es gesendet werden soll. Verwenden Sie die send()-Methode.
send(body), die send()-Methode hat nur einen Parameter, der das DOM-Objekt darstellt. Das nächste Mal müssen wir nur noch schreiben
xmlhttp.send(null);
Das ist es. Okay, es wurde gesendet. Wie gehe ich mit den zurückgegebenen Ergebnissen um? Zu diesem Zeitpunkt wird das wichtigste Element des XMLHttpRequest-Objekts verwendet, nämlich das onreadystatechange-Ereignishandle. Was bedeutet das? Dann müssen wir den readyState des XMLHttpRequest-Objekts erklären. Es gibt 5 Zustände von readyState, dargestellt durch die Zahlen 0 bis 4.
Beschreibung des Statusnamens
0 Nicht initialisierter Initialisierungsstatus. Das XMLHttpRequest-Objekt wurde erstellt (bevor open() aufgerufen wurde) oder durch die abort()-Methode zurückgesetzt.
1 Open Die Methode open() wurde aufgerufen, die Methode send() jedoch nicht. Die Anfrage wurde noch nicht gesendet.
2 Die Methode Sent Send() wurde aufgerufen und die HTTP-Anfrage an den Webserver gesendet. Keine Antwort erhalten.
3 Empfangen Alle Antwortheader wurden empfangen. Der Antworttext wurde empfangen, aber noch nicht abgeschlossen.
4 Die geladene HTTP-Antwort wurde vollständig empfangen.
Es ist jedoch zu beachten, dass die Zustände, die verschiedene Browser im Ereignishandle onreadystatechange verarbeiten können, nicht konsistent sind. IE und FireFox können die Zustände 1 bis 4 verarbeiten, während Safari die Zustände 2 bis 4 und Opera die Zustände 3 und 4 verarbeiten kann . Der Status 0 ist grundsätzlich nutzlos, da die open()-Methode unmittelbar nach der Erstellung des XMLHttpRequest-Objekts aufgerufen wird und der Status zu diesem Zeitpunkt 1 wird, es sei denn, Sie möchten natürlich feststellen, ob das Objekt durch Abbruch abgebrochen wurde (), aber diese Situation kommt immer noch sehr selten vor. In den meisten Fällen reicht es aus, festzustellen, ob der Status 4 (akzeptiert und abgeschlossen) ist.
Okay, ich verstehe, dass readyState 5 Zustände hat. Dann besteht das Verarbeitungsergebnis darin, zu sehen, ob sich der Zustand in verschiedene Zustände ändert, und wir können dem XMLHttpRequest-Objekt mitteilen, wer die Änderung verarbeiten soll, wenn sich der Zustand ändert. Es gibt zwei Möglichkeiten zum Schreiben: Eine besteht darin, eine anonyme Methode zu verwenden, die andere darin, eine Methode anzugeben. Tatsächlich handelt es sich lediglich um unterschiedliche Schreibmethoden mit demselben Effekt. Schauen Sie sich den Code an:
xmlhttp.onReadyStateChange = function (){
//Code zum Behandeln von Statusänderungen
}
//oder
xmlhttp.onReadyStateChange = getResult;
Funktion getResult(){
///Code zum Behandeln von Statusänderungen
}
// Der Name des Handles ist übrigens relativ lang. Sie können sich das so merken, dass die Anforderung gesendet wurde, als sich der Lesestatus änderte, und auch die Verarbeitungsmethode angegeben ist Inhalt? Es gibt zwei Attribute: ResponseText und ResponseXML. Ich werde später darauf eingehen, um zu sehen, was zurückgegeben wird.
warning(xmlhttp.responseText); //Überprüfen Sie, ob der HTML-Code der Homepage zurückgegeben wird. Sie sind es, die Erfolg haben.
Der gesamte Prozess ist: XMLHttpRequest-Objekt erstellen -> Sendeadresse und Sendemethode angeben -> Anforderung senden -> Verarbeitungsmethode angeben und das Rückgabeergebnis verarbeiten. Es sollte jedoch beachtet werden, dass unser normales Verständnis dies ist, die angegebene Verarbeitungsmethode des onreadystatechange-Ereignishandles jedoch vor dem Senden angegeben werden muss, da sonst das Statusänderungsereignis nicht verarbeitet werden kann.
Wir sollten uns also an den folgenden Prozess erinnern: Erstellen Sie ein XMLHttpRequest-Objekt -> geben Sie die Sendeadresse und die Sendemethode an -> geben Sie die Verarbeitungsmethode für die Statusänderung an -> senden Sie die Anforderung automatisch Wird aufgerufen, wenn sich der Status ändert.
Okay, schauen wir uns den fertigen Code an.
fertiger Code
var xmlhttp = false; //Eine neue Variablenanforderung erstellen und ihr den Wert false zuweisen. Verwenden Sie „false“ als Beurteilungsbedingung, was bedeutet, dass das XMLHttpRequest-Objekt noch nicht erstellt wurde.
Funktion CreateXMLHttp(){
versuchen{
xmlhttp = new XMLHttpRequest(); //Versuchen Sie, ein XMLHttpRequest-Objekt zu erstellen. Browser außer IE unterstützen diese Methode.
}
fangen (e){
versuchen{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Eine neuere Version von IE verwenden, um ein IE-kompatibles Objekt zu erstellen (Msxml2.XMLHTTP)
}
fangen (e){
versuchen{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //Verwenden Sie eine ältere Version von IE, um ein IE-kompatibles Objekt zu erstellen (Microsoft.XMLHTTP).
}
fangen (fehlgeschlagen){
xmlhttp = false; //Wenn es fehlschlägt, stellen Sie sicher, dass der Wert der Anfrage immer noch falsch ist.
}
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get"," http://www.cnblogs.com",true );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(null);
Funktion getResult(){
if(xmlhttp.readyState == 4){
alarm(xmlhttp.responseText);
}
}
Alles scheint in Ordnung zu sein, aber haben Sie jemals darüber nachgedacht, was passieren würde, wenn der HTML-Code während der Netzwerkübertragung schief geht oder die von uns angegebene Adresse ungültig wird? Zu diesem Zeitpunkt müssen Sie das Statusattribut verwenden, bei dem es sich um den vom Server zurückgegebenen HTTP-Statuscode handelt. Wenn xmlhttp.status gleich 200 ist, bedeutet dies, dass der Übertragungsvorgang abgeschlossen und fehlerfrei ist. Informationen zur spezifischen Bedeutung des HTTP-Statuscodes finden Sie auf der Website der W3C-Organisation unter der Adresse http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 .
Ich denke, es ist wirklich in Ordnung, die Methode getResult() wie folgt zu schreiben.
Funktion getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alarm(xmlhttp.responseText);
}
}
Okay, etwas, das ursprünglich recht einfach war, scheint sehr wortreich zu sein, nachdem ich so viel darüber geschrieben habe. Ich halte es jedoch für sehr wichtig, den grundlegenden Inhalt der Programmierung zu verstehen. Heutzutage werden viele JS-Bibliotheken zum Entwickeln von AJAX-Programmen verwendet, und es besteht keine Notwendigkeit, solchen grundlegenden Code direkt zu schreiben. Wenn wir zum Beispiel das berühmte jQuery verwenden, uns aber mit den grundlegenden Dingen gut auskennen, dann melden diese Bibliotheken Fehler, oder wenn es ein Problem gibt, können wir sehr schnell erkennen, wo der Fehler liegt, und Änderungen schneller vornehmen Lassen Sie das Programm normal laufen.