Probleme mit asynchronen Ajax-Anfragen im XMLHttpRequest-Objekt-js-Tutorial-php.cn

XMLHttpRequ est Objekt

1. XMLHttpRequest-Objekt

1 basiert auf XMLHttpRequest in JavaScript

2. Das XMLHttpRequest-Objekt ist ein abstraktes Objekt, das es Skripten ermöglicht, zurückgegebene eXML-Daten vom Server abzurufen oder Daten an den Server zu senden

5.

Sie müssen ein XMLHttpRequest-Objekt erstellen, bevor Sie XMLHttpRequest verwenden, um Anfragen zu senden und Antworten zu verarbeiten

6.XMLHttpRequest ist kein W3C-Standard und kann erstellt werden Verwendung von JavaScript auf vielfältige Weise XMLHttpRequest-Instanz 7.

In IE wird XMLHttpRequest als ActiveX-Steuerelement implementiert, während andere Browser es als integriertes JavaScript-Objekt implementieren

2. XMLHttpRequest-Objekt erstellen <script type=

"text/javascript" >

3. XMLHttpRequest-Objekteigenschaften (aktuellen Status empfangen und anzeigen) 1.readySate- Zeichnet den Status der zurückgegebenen Anfrage auf

. 0 – für die Initialisierung: Das Objekt wurde erstellt, die Einheit wurde initialisiert und die offene Methode wurde nicht aufgerufen;

1-Initialisierung: Das Objekt wurde erstellt, aber die Sendemethode wurde nicht aufgerufen, um die Anfrage zu senden .

2-Daten senden: Die Sendemethode wurde aufgerufen, aber der HTTP-Header ist unbekannt. 3-Datenübertragung: Teildaten wurden akzeptiert, aber die Antwort ist unvollständig

. 4-Abgeschlossen: Die Datenannahme ist abgeschlossen und die vollständigen Rückgabedaten können zu diesem Zeitpunkt abgerufen werden 2.responseText-Empfangen Sie den Textinhalt der HTTP-Antwort des Clients

. Nur lesen

. Wenn readySate 1/2 ist, ist der ResponseText-Wert eine leere Zeichenfolge

. Wenn readyState 3 ist, werden die Antwortinformationen empfangen und sind noch nicht abgeschlossen

. Wenn readyState 4 ist, bedeutet dies, dass die Antwortinformationen empfangen wurden

. xmlHttp-Standard-Antwortdatenkodierung ist UTF-8 3.responseXML-Nachdem send() ausgeführt wurde, werden die zurückgegebenen Informationen in ein XML-Dokumentobjekt formatiert

. Der durch Content-Type angegebene MIME-Typ sollte text/HTML

sein. Wenn Content-Type diesen Typ nicht enthält, erhält ResponseXML beim Empfang von

einen Nullwert. 4. Status – Nachdem send() ausgeführt wurde, kann Status zum Lesen des Status von Dingen

. Lange ganzzahlige Daten . Gibt den

HTTP-Statuscode der aktuellen Anfrage zurück. Dieses Attribut wird nur verwendet, wenn

readyState 3 oder 4 ist, andernfalls tritt beim Lesen des Status

ein Fehler auf.

100 – Der Kunde muss die Anfrage weiter senden .

200-Transaktion erfolgreich .

400-Bad Request .

403 – Anfrage nicht zulässig .

404-Datei, Abfrage, URL nicht gefunden.

Interner 500-Server-Fehler

. 502-Server ist vorübergehend nicht verfügbar

. 505 – Der Server unterstützt die HTTP-Version im Anforderungsheader nicht oder lehnt sie ab

5 Nachdem statusText-send() ausgeführt wurde, kann der Status des Dings über statusText

. Gibt die Statuszeile

der aktuellen HTTP-Anfrage zurück. Dieses Attribut kann nur verwendet werden, wenn readyState 3 oder 4 ist, andernfalls tritt beim Lesen des Status

6 ein Fehler auf . Normalerweise wird der Name der Handlerfunktion onreadystatechange zugewiesen, um die Ereignisbehandlung

für das XMLHttpRequest-Objekt anzugeben. Führen Sie in der Ereignisverarbeitungsfunktion die entsprechende Verarbeitung

basierend auf dem Statuswert von readyState durch. Beispiel:

4. XMLHttpRequest-Objektmethode (dynamische Verarbeitung verschiedener Informationen: Senden und Empfangen von Daten, Verarbeitung von Anfragen und Antworten usw.)

1.abort()-terminate der aktuelle Vorgang function test(){ xmlHttp.onreadystatechange=showInfo; var url=”/ajax/urlInfo”;//请求路径 xmlHttp.open(“GET”,url,true); xmlHttp.send(null); } Function showInfo(){ If(xmlHttp.readyState==4){ alert(“success”); } } Nach dem Login kopieren

. Stoppen Sie die vom XMLHttpRequest-Objekt gestellte HTTP-Anfrage und stellen Sie das Objekt in seinem ursprünglichen Zustand wieder her

2.open()-xmlHttp.open(method,url,mode,user,pwd)

. Erstellen Sie eine neue HTTP-Anfrage und geben Sie die Anfragemethode, URL, Verifizierungsinformationen usw. an.

. Methode: POST, GET, PUT (Groß-/Kleinschreibung kann ignoriert werden)

. URL: Angefragte Zieladresse

. Modus: Gibt an, ob die Anforderung asynchron ist. Der Standardwert ist „true“. Wenn sich der Status ändert, wird die durch das Attribut „onreadystatechange“ angegebene Verarbeitungsfunktion

aufgerufen. Nach dem Aufruf von open() setzt das XMLHttpRequest-Objekt das Attribut readyState auf 1, stellt die Anfangswerte von ResponseText, ResponseXML, Status, StatusText und anderen Attributen wieder her und setzt die Anforderungsheaderinformationen zurück

Aufrufe Wenn open(), readyState 4 ist, setzt das XMLHttpRequest-Objekt den obigen Wert zurück

3.send()-xmlHttp.send(content) . Senden Sie eine Anfrage an den Server und akzeptieren Sie die Antwort

4.setRequestHeader()-setRequestHeader(header, value)

. Legen Sie die HTTP-Header-Informationen

individuell für eine Anfrage fest. Wenn readyState 1 ist, kann diese Methode nach send() aufgerufen werden, andernfalls wird eine Ausnahme

zurückgegeben. Wenn bereits ein HTTP-Header mit diesem Namen vorhanden ist, werden die ursprünglichen Informationen mit

überschrieben. Header-Header-Name: Zeichenfolgentyp

. Wert – Der Wert des Header-Namens: Zeichenfolgentyp

5.getResponseHeader() – Liest den Header der vom Server gesendeten Nachricht

. HEAD-Anfragen ignorieren Inhalte, daher sind ihre Antworten kleiner als Antworten auf GET oder POST

Inhalt abrufen:

. Inhaltstyp: Inhaltstyp

. Inhaltslänge: Inhaltslänge

. Last-Modify: Das Datum der letzten Änderung

. Beispiel: Funktion getHeadInfo() {

. Beim Abrufen von Header-Informationen können nicht alle Informationen abgerufen werden

6.getAllResponseHeaders()-Alle Header-Informationen abrufen if(xmlHttp.readyState==4){ if(headeyType==”Content-Type”){ window.alert(“Content-Type:”+xmlHttp.getResponseHeader(“Content-Type”); } else if(headType==”Content-Length”){ window.alert(“Content-Length:”+xmlHttp,getResponseHeader(“Content-Length”); } else if(headType==”Last-Modify”){ window.alert(“Last-Modify:”+xmlHttp.getResponseHeader); } } } Nach dem Login kopieren 。在获取时只用 HEAD即可获取

。例 :fuction headRequest(){

creatXMLHttpRequest(); xmlHttp.onreadystatechange=getHeadInfo; xmlHttp.open(“HEAD”,”url”,false); xmlHttp.send(null); } function getHeadInfo(){ if(readyState==4){ Alter(xmlHttp.getAllResponseHeaders()); } Nach dem Login kopieren

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Probleme mit asynchronen Ajax-Anfragen im XMLHttpRequest-Objekt