Was sind die Unterschiede zwischen der Verwendung von readyState und status in Ajax?

Dieses Mal erkläre ich Ihnen, was die Unterschiede zwischen der Verwendung von readyState und status in Ajax sind und welche Vorsichtsmaßnahmen bei der Verwendung von readyState und status in Ajax gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

In den vorherigen Artikeln habe ich die Ajax-Asynchronität und die Ausnahmebehandlung analysiert. Ich habe das Gefühl, dass der ReadyState und der Status von Ajax nicht klar erklärt wurden. Lassen Sie uns heute über den Ajax-Status sprechen.

Der Quellcode der Jquery-Ajax-Funktion sieht folgendermaßen aus:

var getXmlHttpRequest = function () {
  if (window.XMLHttpRequest) {
    //主流浏览器提供了XMLHttpRequest对象
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    //低版本的IE浏览器没有提供XMLHttpRequest对象
    //所以必须使用IE浏览器的特定实现ActiveXObject
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    //获取成功后执行操作
    //数据在xhr.responseText
  }
};
xhr.open("TYPE", "URL", true);
xhr.send("");

Was ist readyState?

readyState ist das XMLHttpRequest-Objekt Ein Attribut, 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, wie in der folgenden Tabelle gezeigt:

0 Nicht initialisierter Status: Zu diesem Zeitpunkt ist es Es wurde ein XMLHttpRequest-Objekt

1 Status „Bereit zum Senden“ erstellt: Zu diesem Zeitpunkt wurde die offene Methode des XMLHttpRequest-Objekts aufgerufen und das XMLHttpRequest-Objekt ist bereit, eine Anfrage an den Server zu senden

2 Status „Bereits gesendet“: Zu diesem Zeitpunkt wurde eine Anfrage über die Sendemethode an den Server gesendet, es wurde jedoch keine Antwort empfangen

3 Status „Empfangen“: Zu diesem Zeitpunkt die HTTP-Antwort-Header-Informationen wurde empfangen, aber der Nachrichtentextteil ist noch nicht vollständig empfangen

4 Antwortstatus abgeschlossen: Zu diesem Zeitpunkt wurde der Empfang der HTTP-Antwort abgeschlossen

Was ist Status

Status ist ein Attribut des XMLHttpRequest-Objekts, das den HTTP-Statuscode der Antwort angibt.

Unter dem HTTP1.1-Protokoll können HTTP-Statuscodes in 5 Kategorien unterteilt werden, wie in der folgenden Tabelle dargestellt:

1XX Der Server hat die Anfrage empfangen und muss mit der Verarbeitung fortfahren. Der Statuscode 101 bedeutet beispielsweise, dass der Server den -Client benachrichtigt, eine höhere Version des HTTP-Protokolls zu verwenden.

2XX Die Anfrage war erfolgreich. Ein Statuscode 200 gibt beispielsweise an, dass der von der Anfrage erwartete Antwortheader oder Datentext mit dieser Antwort zurückgegeben wird.

3XX-Weiterleitung. Der Statuscode 302 weist beispielsweise auf eine temporäre Umleitung hin. Die Anfrage enthält eine neue URL-Adresse und der Client stellt eine GET-Anfrage für die neue Adresse.

4XX Client-Fehler. Der Statuscode 404 zeigt beispielsweise an, dass die vom Client angeforderte Ressource nicht vorhanden ist.

5XX Serverfehler. Beispielsweise weist der Statuscode 500 darauf hin, dass der Server auf eine unerwartete Situation gestoßen ist, die ihn daran gehindert hat, die Antwort abzuschließen. Im Allgemeinen tritt dieses Problem auf, wenn ein Fehler im Programmcode auftritt.

Stellen Sie eine Frage

Warum muss die Funktionsimplementierung von onreadystatechange gleichzeitig readyState und Status ermitteln?

Wir wissen, dass readyState === 4 bereits angezeigt hat, dass die Anforderungsantwort erfolgreich war. Warum gibt es einen nachfolgenden Status? Lassen Sie uns mit Blick auf die Fragen mit einigen Experimenten beginnen.

Verwenden Sie nur readyState zur Beurteilung

　Der Implementierungscode auf der Javascript-Seite lautet wie folgt:

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

Wir lösen eine Ausnahme auf dem Server aus Seite :

public partial class data : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    throw new Exception("Error");
  }
}

Führen Sie den Javascript-Code aus und das Eingabeaufforderungsfenster erscheint wie folgt:

Die Serviceantwort hat eine Fehler, aber die Informationen werden trotzdem zurückgegeben. Dies ist nicht das gewünschte Ergebnis. Wenn Sie die Fiddler-Überwachung öffnen, können Sie sehen, dass data.aspx eine 500-Antwort zurückgibt. Da jedoch nur Readystate zur Beurteilung verwendet wird, ist es egal, ob das zurückgegebene Ergebnis 500 oder 200 ist. Solange die Antwort erfolgreich zurückgegeben wird, ist es die nächste Es wird Javascript-Code ausgeführt. Das Ergebnis sind verschiedene unvorhersehbare Fehler. Es wird also nicht funktionieren, nur readyState zur Beurteilung zu verwenden.

Wenn der Statuscode 200 zurückgibt, bedeutet dies, dass die Antwort erfolgreich ist. Können wir also nicht readyState verwenden und nur den Status verwenden, um Urteile zu fällen? Okay, mit den Fragen im Hinterkopf, lasst uns das Experiment fortsetzen.

Status nur zur Beurteilung verwenden

Der Code auf der JavaScript-Seite ist wie folgt implementiert:

var getXmlHttpRequest = function () {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.status === 200) {
    alert("readyState=" + xhr.readyState + xhr.responseText);
  }
};
xhr.open("GET", "/data.aspx", true);
xhr.send("");

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

进一步思考

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

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

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

推荐阅读：

jQuery+Ajax判断输入的验证码是否通过

Ajax怎么做出智能搜索框的提示功能

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen der Verwendung von readyState und status in Ajax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!