Heim  >  Artikel  >  Web-Frontend  >  Besprechen Sie Probleme im Zusammenhang mit readyState und Status in Ajax

Besprechen Sie Probleme im Zusammenhang mit readyState und Status in Ajax

亚连
亚连Original
2018-05-23 16:58:061730Durchsuche

Dieser Artikel stellt hauptsächlich relevante Informationen zu Fragen im Zusammenhang mit readyState (Statuswert) und Status (Statuscode) in Ajax vor. Er ist sehr gut und hat Referenzwert.

Lassen Sie uns darauf zurückgreifen Schauen Sie sich zunächst den folgenden Code an und geben Sie dann eine detaillierte Einführung in die Probleme im Zusammenhang mit readyState (Statuswert) und Status (Statuscode) in Ajax. Der spezifische Inhalt lautet wie folgt:

var getXmlHttpRequest = function () {
try{
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
}catch(e){
//低版本的IE浏览器没有提供XMLHttpRequest对象,IE6以下
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
// readyState 0=>初始化 1=>载入 2=>载入完成 3=>解析 4=>完成
// console.log(xhr.readyState); 0
xhr.open("TYPE", "URL", true);
// console.log(xhr.readyState); 1
xhr.send();
// console.log(xhr.readyState); 1
xhr.onreadystatechange = function () {
// console.log(xhr.status); //HTTP状态吗
// console.log(xhr.readyState); 2 3 4
if(xhr.readyState === 4 && xhr.status === 200){
alert(xhr.responseText);
}
};

1.Ajax: Der Unterschied zwischen readyState (Statuswert) und Status (Statuscode)

readyState bezieht sich auf die Erfahrung beim Ausführen von AJAX. Es wurden mehrere Zustände übergeben, und die Schritte, die unabhängig davon, ob der Zugriff erfolgreich ist, reagieren, können als AJAX-Operationsschritte verstanden werden. Verwenden Sie „ajax.readyState“, um

status, was bedeutet, dass das HTTP-Protokoll unabhängig davon, ob der AJAX-Zugriff erfolgreich ist oder nicht, „ajax.status“ verwendet, um den vom Server zurückgegebenen HTTP-Header-Informationscode basierend auf den übermittelten Informationen abzurufen. Gesamtverständnis: Dies ist möglich einfach verstanden werden, dass der Zustand einen Gesamtstatus darstellt. Und Status ist der spezifische kleine Status unter diesem großen Staat.



2. Was ist readyState readyState ist ein Attribut des XMLHttpRequest-Objekts, das zur Identifizierung des Status des aktuellen XMLHttpRequest verwendet wird Objekt.


readyState hat insgesamt 5 Statuswerte im Bereich von 0 bis 4. Jeder Wert stellt eine andere Bedeutung dar

0: Initialisierung, das XMLHttpRequest-Objekt wurde noch nicht initialisiert

1: Laden, das XMLHttpRequest-Objekt beginnt, die Anfrage zu senden

2: Laden ist abgeschlossen, die Anfrage des XMLHttpRequest-Objekts ist abgeschlossen

3: Parsing, das XMLHttpRequest-Objekt beginnt um die Antwort des Servers zu lesen

4: Abgeschlossen, das XMLHttpRequest-Objekt liest die Serverantwort

3. Was ist StatusStatus ist das XMLHttpRequest-Objekt. Ein Attribut, das den HTTP-Statuscode der Antwort angibt.

Unter dem HTTP1.1-Protokoll können HTTP-Statuscodes in 5 Hauptkategorien unterteilt werden.

1xx: Informationsantwort Kategorie, die angibt, dass die Anfrage empfangen und fortgesetzt wird.

2xx: Antwortklasse für erfolgreiche Verarbeitung, die angibt, dass die Aktion erfolgreich empfangen, verstanden und akzeptiert wurde

3xx: Umleitungsantwortklasse, um Die angegebene Aktion abschließen, die weitere Verarbeitung muss akzeptiert werden

4xx: Client-Fehler, die Client-Anfrage enthält Syntaxfehler oder kann nicht korrekt ausgeführt werden

5xx: Server-Fehler, der Server kann eine korrekte Anfrage nicht ausführen korrekt

100 – Der Client muss fortfahren. Stellen Sie eine Anfrage

101 – Der Client verlangt vom Server, dass er die HTTP-Protokollversion gemäß der Anfrage konvertiert

200 – Die Transaktion ist erfolgreich

201 – Aufforderung zur Angabe der URL der neuen Datei

202 – Akzeptiert und verarbeitet, aber die Verarbeitung ist nicht abgeschlossen

203 – Die Rückgabeinformationen sind unsicher oder unvollständig

204 – Die Anfrage wird empfangen, aber die Rückgabeinformationen sind leer

205 – Der Server hat die Anfrage abgeschlossen, der Benutzeragent muss die aktuell durchsuchten Dateien zurücksetzen

206 – Der Server hat einige der GET-Anfragen des Benutzers abgeschlossen

300 – Angeforderte Ressourcen sind an mehreren Stellen verfügbar

301 – Anfragedaten löschen

302 – Anfrage Daten an anderen Adressen gefunden

303 – Kunden wird empfohlen, andere URLs oder die Methode zu besuchen

304 – Der Client hat GET ausgeführt, aber die Datei hat sich nicht geändert

305 – Die angeforderte Ressource muss von der vom Server angegebenen Adresse abgerufen werden

306 – Bevor Code in einer HTTP-Version verwendet wurde, wird er in der aktuellen Version nicht mehr verwendet

307 – Erklärt, dass die angeforderte Ressource ist Ressource wird vorübergehend gelöscht

400 – Fehleranforderung, z. B. Syntaxfehler

401 – Anforderungsautorisierung fehlgeschlagen

402 – Gültige ChargeTo-Header-Antwort beibehalten

403 – Anfrage nicht erlaubt

404 – Keine Datei, Abfrage oder URL gefunden

405 – Die vom Benutzer im Feld „Request-Line“ definierte Methode ist nicht erlaubt

406 – Laut dem vom Benutzer gesendeten Accept-Drag ist die angeforderte Ressource nicht zugänglich

407 – Ähnlich wie bei 401 muss der Benutzer zuerst auf dem Proxyserver autorisiert werden

408 – Der Client wurde nicht abgeschlossen die Anfrage innerhalb der vom Benutzer angegebenen Zeit

409 - Die Anfrage kann für den aktuellen Ressourcenstatus nicht abgeschlossen werden

410 - Diese Ressource existiert nicht mehr auf dem Server und hat keine weitere Referenzadresse

411 – Der Server hat die benutzerdefinierte Content-Length-Attributanforderung abgelehnt.

412 – Ein oder mehrere Anforderungsheaderfelder sind in der aktuellen Anforderung falsch.

413 – Die angeforderte Ressource ist größer als die vom Server zulässige Größe

414 – Die angeforderte Ressourcen-URL ist länger als die vom Server zulässige Länge

415 – Die angeforderte Ressource unterstützt das Anforderungselementformat nicht

416 – Die Anfrage enthält das Anforderungsheaderfeld „Range“, es gibt keinen Bereichsangabewert innerhalb des aktuellen Anforderungsressourcenbereichs und die Anfrage enthält nicht das Anforderungsheaderfeld „If-Range“

417 - Der Server erfüllt nicht die im Expect-Header-Feld der Anfrage angegebenen Erwartungen. Wenn es sich um einen Proxyserver handelt, kann der Server auf niedrigerer Ebene die Anfrage möglicherweise nicht erfüllen.

500 - Der Server hat eine generiert interner Fehler

501 – Der Server unterstützt die angeforderte Funktion nicht

502 – Der Server ist vorübergehend nicht verfügbar, manchmal um eine Systemüberlastung zu verhindern

503 – Der Server ist überlastet oder wegen Wartungsarbeiten ausgesetzt

504 – Gateway-Überlastung, der Server verwendet ein anderes Gateway oder einen anderen Dienst, um auf den Benutzer zu antworten, und die Wartezeit ist auf einen langen Wert eingestellt

505 – Der Server unterstützt nicht oder weigert sich, die im Anforderungsheader angegebene HTTP-Version zu unterstützen

4.思考问题:为什么onreadystatechange的函数实现要同时判断readyState和status呢?

第一种思考方式:只使用readyState

var getXmlHttpRequest = function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.open("get", "1.txt", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
alert(xhr.responseText);
}
};

服务响应出错了,但还是返回了信息,这并不是我们想要的结果

如果返回不是200,而是404或者500,由于只使用readystate做判断,它不理会放回的结果是200、404还是500,只要响应成功返回了,就执行接下来的javascript代码,结果将造成各种不可预料的错误。所以只使用readyState判断是行不通的。

第二种思考方式:只使用status判断

var getXmlHttpRequest = function () {
try{
return new XMLHttpRequest();
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP");
}
};
var xhr = getXmlHttpRequest();
xhr.open("get", "1.txt", true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.status === 200) {
alert("readyState=" + xhr.readyState + xhr.responseText);
}
};

事实上,结果却不像预期那样。响应码确实是返回了200,但是总共弹出了3次窗口!第一次是“readyState=2”的窗口,第二次是“readyState=3”的窗口,第三次是“readyState=4”的窗口。由此,可见onreadystatechange函数的执行不是只在readyState变为4的时候触发的,而是readyState(2、3、4)的每次变化都会触发,所以就出现了前面说的那种情况。可见,单独使用status判断也是行不通的。

5.由上面的试验,我们可以知道判断的时候readyState和status缺一不可。那么readyState和status的先后判断顺序会不会有影响呢?我们可以将status调到前面先判断,代码如 xhr.status === 200 && xhr.readyState === 4

事实上,这对于最终的结果是没有影响的,但是中间的性能就不同了。由试验我们知道,readyState的每次变化都会触发onreadystatechange函数,假如先判断status,那么每次都会多判断一次status的状态。虽然性能上影响甚微,不过还是应该抱着追求极致代码的想法,把readyState的判断放在前面。

xhr.readyState === 4 && xhr.status === 200

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

全面解析$.Ajax()方法参数(图文教程)

IE8下Ajax缓存问题及解决办法

浅谈ajax请求技术

Das obige ist der detaillierte Inhalt vonBesprechen Sie Probleme im Zusammenhang mit readyState und Status in Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn