Quelles sont les différences entre l'utilisation de readyState et de status en Ajax ?

Cette fois, je vais vous expliquer quelles sont les différences entre l'utilisation de readyState et de status en Ajax, et quelles sont les précautions lors de l'utilisation de readyState et de status en Ajax. Voici des cas pratiques, jetons un coup d'oeil.

Dans les articles précédents, j'ai analysé l'asynchrone et la synchronicité ajax de jquery, ainsi que certaines gestions d'exceptions. J'ai l'impression que l'état prêt et le statut d'ajax n'ont pas été expliqués clairement. Aujourd'hui, parlons du statut ajax.

Le code source de la fonction jquery ajax ressemble à ceci :

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("");

Qu'est-ce que readyState

readyState est l'objet XMLHttpRequest Attribut utilisé pour identifier l'état de l'objet XMLHttpRequest actuel.

readyState a un total de 5 valeurs d'état, allant de 0 à 4. Chaque valeur représente une signification différente, comme indiqué dans le tableau suivant :

0 État non initialisé : à ce moment, il a été créé Un objet XMLHttpRequest

1 Statut Prêt à envoyer : A ce moment, la méthode open de l'objet XMLHttpRequest a été appelée, et l'objet XMLHttpRequest est prêt à envoyer une requête au serveur

2 Statut déjà envoyé : À ce moment, une demande a été envoyée au serveur via la méthode d'envoi, mais aucune réponse n'a été reçue

3 Statut de réception : À ce moment, les informations d'en-tête de réponse HTTP a été reçu, mais la partie du corps du message n'est pas encore entièrement reçue

4 Statut de réponse terminée : À ce stade, la réception de la réponse HTTP est terminée

Quoi is status

Status est un attribut de l'objet XMLHttpRequest, indiquant le code d'état HTTP de la réponse.

Sous le protocole HTTP1.1, les codes d'état HTTP peuvent être divisés en 5 catégories, comme indiqué dans le tableau suivant :

1XX Le serveur a reçu la demande et doit poursuivre le traitement. Par exemple, le code d'état 101 signifie que le serveur informera le client d'utiliser une version supérieure du protocole HTTP.

2XX La demande a abouti. Par exemple, un code d'état 200 indique que l'en-tête de réponse ou le corps de données attendu par la requête sera renvoyé avec cette réponse.

Redirection 3XX. Par exemple, le code d'état 302 indique une redirection temporaire. La requête contiendra une nouvelle adresse URL et le client effectuera une requête GET pour la nouvelle adresse.

Erreur client 4XX. Par exemple, le code d'état 404 indique que la ressource demandée par le client n'existe pas.

Erreur du serveur 5XX. Par exemple, un code d'état 500 indique que le serveur a rencontré une situation inattendue qui l'a empêché de terminer la réponse. De manière générale, ce problème se produit lorsqu'une erreur se produit dans le code du programme.

Poser une question

Pourquoi l'implémentation de la fonction onreadystatechange doit-elle déterminer readyState et status en même temps ?

Nous savons que readyState === 4 a déjà indiqué que la réponse à la demande a réussi, pourquoi y a-t-il un statut ultérieur ? En gardant ces questions à l’esprit, commençons par faire quelques expériences.

Utilisez uniquement readyState pour juger

　Le code d'implémentation côté javascript est le suivant :

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("");

Nous lançons une exception sur le serveur côté :

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

Exécutez le code javascript et la fenêtre d'invite apparaît comme suit :

La réponse du service a un erreur, mais les informations sont toujours renvoyées. Ce n'est pas le résultat souhaité. Ouvrez la surveillance Fiddler, vous pouvez voir que data.aspx renvoie une réponse 500, mais comme il utilise uniquement readystate pour porter des jugements, il ne se soucie pas de savoir si le résultat renvoyé est 500 ou 200. Tant que la réponse est renvoyée avec succès, le prochain le code javascript sera exécuté. Le résultat sera diverses erreurs imprévisibles. Donc, utiliser simplement readyState pour juger ne fonctionnera pas.

En y réfléchissant sous un autre angle, si le code d'état renvoie 200, cela signifie que la réponse est réussie. Alors, ne pouvons-nous pas utiliser readyState et utiliser status uniquement pour porter des jugements ? Bon, avec des questions en tête, poursuivons l’expérience.

Utiliser uniquement le statut pour déterminer

Le code côté JavaScript est implémenté comme suit :

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怎么做出智能搜索框的提示功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!