AjaxにおけるreadyState（ステータス値）とstatus（ステータスコード）に関する問題を検討する。

まず次のコードを見て、詳細に紹介します。AjaxではreadyState（ステータス値）とstatus（ステータスコード）に関する問題について、具体的な内容は以下の通りです。

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：readyState（ステータス値）とstatus（ステータスコード）の違い
readyStateとは、AJAXを実行して経験したいくつかの状態を指し、アクセスが成功しても応答するステップであり、AJAXの実行ステップとして理解され、「ajax.readyState」を使用して獲得される。
statusとは、AJAXアクセスが成功したかどうかに関わらず、HTTPプロトコルによって提出された情報に基づいて、サーバから返されたHTTPヘッダ情報コードを、「ajax.status」を使って取得したものです。
全体的な理解：stateは全体の状態を表していると簡単に理解できます。statusはこの大きなstateの下に具体的に小さな状態があります。
2.readyStateとは？
readyStateはXMLHttpRequestオブジェクトの属性であり、現在のXMLHttpRequestオブジェクトがどのような状態にあるかを識別するために使用されます。
readyStateは全部で5つの状態値があります。それぞれ0~4です。各値は異なる意味を表しています。
0：初期化、XMLHttpRequestオブジェクトはまだ初期化が完了していません。
1：ロード、XMLHttpRequestオブジェクトの送信開始要求
2：ロード完了、XMLHttpRequestオブジェクトの要求送信完了
3：解析、XMLHttpRequestオブジェクトはサーバーの応答を読み込み始めます。
4：完了しました。XMLHttpRequestオブジェクトの読み込みサーバの応答は終了しました。
3.statusとは
statusはXMLHttpRequestオブジェクトの属性の一つで、応答を表すHTTP状態コードです。
HTTP 1.1プロトコルでは、HTTP状態コードは全部で5つのクラスに分けられます。
1 xx：情報応答クラスは、要求を受信し、処理を継続することを示す。
2 xx：成功応答類を処理し、動作が成功に受信され、理解され、受け入れられたことを表します。
3 xx：リダイレクト応答クラスは、指定された動作を完了するために、さらなる処理を受ける必要があります。
4 xx：クライアントエラー、クライアント要求には文法エラーが含まれています。または正しく実行できません。
5 xx：サーバーが正しく要求を実行できません。
100――お客様は引き続き要求を出さなければなりません。
101――クライアント要求サーバが要求に応じてHTTPプロトコルバージョンを変換する
200――取引成功
201――新しいファイルのURLを知るように提示する
202――受け入れと処理が、処理が完了していません。
203――戻り情報が不確定または不完全である
204――受信を要求したが、返信情報が空です。
205――サーバが要求を完了したので、ユーザエージェントは現在閲覧済みのファイルをリセットしなければならない。
206――サーバは一部のユーザのGET要求を完了しました。
300――要求された資源は多くのところで入手できる。
301――要求データの削除
302――他の住所で要求データが見つかりました。
303――他のURLやアクセス方法に訪問することをお勧めします。
304――クライアントはGETを実行しましたが、ファイルは変更されていません。
305――要求されたリソースはサーバから指定されたアドレスから入手しなければならない。
306――前のバージョンのHTTPで使用されているコードは、現行バージョンでは使用されません。
307――要求されたリソースの一時的な削除を説明する。
400――構文エラーなどのエラー要求
401――授権請求に失敗しました。
402――有効ChargeToヘッダ応答を保持する
403――要求は許可されていません。
404――ファイル、クエリ、またはURlが見つかりませんでした。
405――ユーザがRequest-Lineフィールドで定義する方法は許可されていません。
406――ユーザが送信したAcceptに従って、リソースのアクセスができないことを要求する。
407――401のように、ユーザはまずプロキシサーバ上で授権しなければならない。
408――クライアントは、ユーザが指定した空き時間内に要求を完了していない。
409――現在のリソース状態に対して、要求が完了できない
410――サーバにはこのリソースがなく、さらに参照アドレスがない。
411−サーバは、ユーザ定義のConteet Length属性要求を拒否する。
412−1つ以上の要求ヘッダフィールドが現在の要求でエラーした。
413−要求されたリソースは、サーバが許可するサイズより大きい。
414−要求されたリソースURLは、サーバが許可する長さよりも長い。
415――要求リソースが要求項目のフォーマットをサポートしていないことを要求する。
416−要求には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」のウィンドウです。これにより、オンレディステージ関数の実行は、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の中でreadyState（ステータス値）とstatus（ステータスコード）に関する问题です。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。