JavaScript-Studiennotizen (7) Ajax- und HTTP-Statuscode_Grundkenntnisse

Ajax und wie es funktioniert

AJAX ist eine Technologie, die Daten mit dem Server austauscht, ohne die Webseite zu aktualisieren. Sie wurde zuerst von Google in Google Maps verwendet und erfreute sich schnell großer Beliebtheit.

AJAX kann nicht domänenübergreifend sein, Sie können document.domain='a.com' verwenden oder einen Server-Proxy als Proxy für die XMLHttpRequest-Datei verwenden

AJAX basiert auf bestehenden Internetstandards und nutzt diese in Verbindung:

XMLHttpRequest-Objekt (Daten asynchron mit dem Server austauschen)

JavaScript/DOM (Informationsanzeige/Interaktion)
CSS (Stile für Daten definieren)
XML (als Format zur Datentransformation)

XMLHttpRequest-Objekt erstellen

Alle modernen Browser (IE7, Firefox, Chrome, Safari und Opera) verfügen über integrierte XMLHttpRequest-Objekte.

Ajax-Objekt erstellen:

//IE6 und höher

var oAjax = new XMLHttpRequest();

//IE6

var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
Mit Server verbinden

oAjax.open(Methode, URL, ob asynchron)

Wir alle wissen, dass Ajax „Asynchronous Javascript And XML“ (asynchrones JavaScript und XML) bedeutet und sich auf eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen bezieht. Daher arbeitet Ajax natürlich im asynchronen Modus (asynchron ist wahr, synchron ist falsch)

Synchron und asynchron

Synchronisierung bezieht sich auf die Kommunikationsmethode, bei der der Sender Daten sendet und darauf wartet, dass der Empfänger eine Antwort zurücksendet, bevor er das nächste Datenpaket sendet.

Asynchron bezieht sich auf die Kommunikationsmethode, bei der der Sender Daten sendet, darauf wartet, dass der Empfänger eine Antwort zurücksendet, und dann das nächste Datenpaket sendet.
(Einfach ausgedrückt: Synchronisierung bedeutet, dass Sie nur eine Sache tun können, während asynchron bedeutet, dass Sie mehrere Dinge gleichzeitig tun können)

Anfrage senden send()

Code kopieren Der Code lautet wie folgt:

Daten anfordern

GET oder POST?

Im Vergleich zu POST ist GET einfacher und schneller und funktioniert in den meisten Fällen.

Bitte verwenden Sie jedoch POST-Anfragen in den folgenden Situationen:

Cache-Dateien (Aktualisierung von Dateien oder Datenbanken auf dem Server) können nicht verwendet werden

Senden Sie große Datenmengen an den Server (POST hat keine Datengrößenbeschränkung)
POST ist stabiler und zuverlässiger als GET, wenn Benutzereingaben mit unbekannten Zeichen
gesendet werden Erhalten Sie Rücksendeinformationen

oAjax.onreadystatechange = function(){ //Ereignishandler, der aufgerufen wird, wenn sich der Anforderungsstatus ändert

Alert(oAjax.readystate);

}

Solange sich der Wert des readyState-Attributs ändert, wird ein readyStatechange-Ereignis ausgelöst. Dieses Ereignis kann verwendet werden, um den Wert von readyState nach jeder Zustandsänderung zu erkennen. Normalerweise interessiert uns nur die Phase mit einem readyState-Wert von 4, da zu diesem Zeitpunkt alle Daten bereit sind. Allerdings muss vor dem Aufruf von open() der Ereignishandler onreadystatechange angegeben werden, um die browserübergreifende Kompatibilität sicherzustellen. Schauen wir uns ein Beispiel an:

Code kopieren Der Code lautet wie folgt:

var xhr = createXHR();
xhr.onreadystatechange = function () {
If (xhr.readyState == 4) {
If ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alarm(xhr.statusText);
         } sonst {
Alert("Anfrage war nicht erfolgreich: " xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);

XHR-Objekt

Wenn das XHR-Objekt eine HTTP-Anfrage an den Server sendet, durchläuft es mehrere Zustände, bis die Anfrage verarbeitet wird und dann eine Antwort erhält. readyState ist das Statusattribut der XHR-Anfrage. Es hat 5 Attributwerte:

0 (nicht initialisiert) Die open()-Methode wurde noch nicht aufgerufen
1 (Laden) Die send()-Methode wurde aufgerufen und die Anfrage wird gesendet
2 (Ladevorgang abgeschlossen) Die send()-Methode ist abgeschlossen und der gesamte Antwortinhalt wurde empfangen
3 (Parsing) Antwortinhalt analysieren
4 (Abgeschlossen) Der Antwortinhalt wird analysiert und kann auf dem Client
verwendet werden Status

　Das Statusattribut stellt den vom Server zurückgegebenen Antwortstatuscode dar. Beispiel: 200 bedeutet Erfolg, 404 bedeutet nicht gefunden.

1 Präfix: Nachricht. Diese Art von Statuscode bedeutet, dass die Anfrage angenommen wurde und mit der Verarbeitung fortgefahren werden muss.
2 Präfix: Erfolg. Diese Art von Statuscode bedeutet, dass die Anfrage erfolgreich vom Server empfangen, verstanden und akzeptiert wurde.
Präfix 3: Weiterleiten. Diese Art von Statuscode zeigt an, dass der Client weitere Maßnahmen ergreifen muss, um die Anfrage abzuschließen.
Präfix 4: Clientfehler. Diese Art von Statuscode stellt einen Fehler dar, der scheinbar auf der Clientseite aufgetreten ist und den Server daran hindert, ihn zu verarbeiten.
Präfix 5: Serverfehler. Diese Art von Statuscode gibt an, dass ein Fehler oder ein abnormaler Zustand aufgetreten ist, als der Server die Anfrage verarbeitet hat

Anbei: Detaillierte Erläuterung des http-Statuscodes

statusText

StatusText ist die von der Antwort zurückgegebene Textinformation, die nur verwendet werden kann, wenn der readyState-Wert 3 oder 4 ist. Wenn „readyState“ andere Werte hat, löst der Zugriff der Ansicht auf die Eigenschaft „statusText“ eine Ausnahme aus.

XHR-Methode

方法	描述
abort()	导致当前正在执行的请求被取消
getAllResponseHeaders()	返回包含所有响应头的名称和值的单个字符|串
getResponseHeader(name)	返回响应头中指定的名称和值
open(method,url,async,username,pwd)	设置HTTP方法（get或post）等
send(content)	发出带有指定主体内容的请求
setRequestHeader(name,value)	使用指定的名称和值设置请求头

Code kopieren Der Code lautet wie folgt: