Ajax での readyState と status の使用の違いは何ですか?

今回は、Ajax での readyState と status の使用の違いと、Ajax で readyState と status を使用する際の 注意事項 についてお届けします。実際のケースを見てみましょう。

これまでの記事では、jqueryのajaxの非同期と同期、およびajaxのreadyStateとstatusについて説明が足りなかったと思います。今日はajaxのステータスについて話しましょう。

jquery ajax 関数のソースコードは次のとおりです:

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

readyState とは

ReadyState は XMLHttpRequest オブジェクトの属性であり、現在の XMLHttpRequest オブジェクトの状態を識別するために使用されます。

readyState には、0 から 4 の範囲の合計 5 つのステータス値があります。次の表に示すように、各値は異なる意味を表します:

0 未初期化状態: 現時点では、XMLHttpRequest オブジェクトが作成されています

1送信済みステータスの準備: この時点で、XMLHttpRequest オブジェクトの open メソッドが呼び出されており、XMLHttpRequest オブジェクトはサーバーにリクエストを送信する準備ができています。 2 送信済みステータス: この時点で、リクエストはサーバーに送信されています。 sendメソッドを送信しましたが、まだレスポンスを受信して​​いません

3 受信ステータス: この時点で、HTTP レスポンスヘッダ情報は受信されていますが、メッセージボディは完全に受信されていません

4 完了したレスポンスステータス: 現時点では, HTTP レスポンスの受信が完了しました

ステータスとは

Status は、XMLHttpRequest オブジェクトの属性であり、レスポンスの HTTP ステータス コード

を示します。

HTTP1.1 プロトコルでは、次の表に示すように、HTTP ステータス コードは 5 つの主要なカテゴリに分類できます:

1XX サーバーはリクエストを受信し、処理を続行する必要があります。たとえば、ステータス コード 101 は、サーバーがクライアントに、より上位のバージョンの HTTP プロトコルを使用するように通知することを意味します。

2XX リクエストは成功しました。たとえば、ステータス コード 200 は、要求で予期された応答ヘッダーまたはデータ本体がこの応答とともに返されることを示します。

3XX リダイレクト。たとえば、302 ステータス コードは、リクエストに新しい URL アドレスが含まれることを示し、クライアントは新しいアドレスに対して GET リクエストを作成します。

4XX クライアント エラー。たとえば、404 ステータス コードは、クライアントが要求したリソースが存在しないことを示します。

5XX サーバーエラー。たとえば、ステータス コード 500 は、サーバーが応答を完了できない予期しない状況に遭遇したことを示します。一般に、この問題はプログラム コードでエラーが発生したときに発生します。

質問する

onreadystatechange の関数実装では、readyState と status を同時に決定する必要があるのはなぜですか?

readyState === 4 がリクエストの応答が成功したことをすでに示していることはわかっていますが、なぜその後のステータスが必要なのでしょうか?疑問を念頭に置いて、いくつかの実験を始めてみましょう。

判定にはreadyStateのみを使用します

javascript

側の実装コードは次のとおりです:

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

サーバー側で例外

をスローします:

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

JavaScriptコードを実行すると、プロンプトウィンドウが次のように表示されます

サービス応答エラーですが、情報は依然として返されますが、これは私たちが望む結果ではありません。 Fiddler 監視を開くと、data.aspx が 500 応答を返していることがわかりますが、readystate を使用して判断するだけであるため、返された結果が 500 であるか 200 であるかは関係ありません。応答が正常に返される限り、次の応答は返されます。 JavaScript コードが実行されると、さまざまな予期しないエラーが発生します。したがって、readyStateを使用して判断するだけでは機能しません。

見方を変えると、ステータスコードが200を返した場合はレスポンスが成功したということなので、readyStateを使わずにstatusのみで判断すれば良いのでしょうか？さて、質問を念頭に置いて、実験を続けましょう。

ステータスのみを使用して判断します

JavaScript側のコードは以下のように実装されています。

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

以上がAjax での readyState と status の使用の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。