So verwenden Sie readyState und Status in Ajax

Dieses Mal zeige ich Ihnen, wie Sie readyState und Status in Ajax verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von readyState und Status in Ajax?

Sehen 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 mehrere Zustände, die von erlebt werden Ausführen von AJAX, unabhängig davon Die Schritte, die reagieren, ob der Zugriff erfolgreich ist oder nicht, können als AJAX-Ausführungsschritte verstanden werden. Verwenden Sie „ajax.readyState“, um den Status

zu erhalten, was bedeutet, dass der AJAX-Zugriff unabhängig ist Ob erfolgreich oder nicht, das HTTP-Protokoll ermittelt den Status des Servers anhand der übermittelten Informationen. Verwenden Sie für den zurückgegebenen HTTP-Header-Informationen-Code „ajax.status“, um ein
Gesamtverständnis zu erhalten: Es kann 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-Objekts verwendet wird.

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, die zu lesen Antwort des Servers

4: Abgeschlossen, das XMLHttpRequest-Objekt liest die Serverantwort

status ist ein Attribut des XMLHttpRequest-Objekts HTTP-Statuscode, der die Antwort anzeigt

Unter dem HTTP1.1-Protokoll können HTTP-Statuscodes in 5 Hauptkategorien unterteilt werden 1xx : Informationsantwortkategorie, die den Empfang angibt. Anforderung und Verarbeitung fortsetzen

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

3xx: Antwortklasse umleiten, 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: Serverfehler, der Server kann eine korrekte Anfrage nicht korrekt ausführen 100 – Der Client muss die Anfrage weiterhin stellen

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

200 – Transaktion erfolgreich

201 – Aufforderung Kennen Sie die URL der neuen Datei

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

203 – Die Rückgabe Informationen sind unsicher oder unvollständig

204 – Anfrage 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 die GET-Anfragen einiger Benutzer abgeschlossen

300 – Die angeforderte Ressource ist an mehreren Orten verfügbar

301 – Löschen Sie die Anforderungsdaten

302 – Die Anforderungsdaten wurden an einer anderen Adresse gefunden

303 ——Es wird empfohlen, dass Kunden andere URLs oder Zugriffsmethoden 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 – Code, der in der vorherigen Version von HTTP verwendet wurde, wird in der aktuellen Version nicht mehr verwendet

307 – Erklärung, dass die angeforderte Ressource vorübergehend gelöscht wurde

400 – Ungültige Anfrage, z. B. Syntaxfehler

401 – Anforderungsautorisierung fehlgeschlagen

402 – Gültige ChargeTo-Header-Antwort beibehalten

403 – Anfrage nicht zulässig

404 – – Keine Datei, Abfrage oder URL gefunden

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

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

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax+Struts2怎么实现用户输入验证码校验功能

Ajax怎么实现点击时不断开数据加载列表

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