AjaxでreadyStateとstatusを使用する方法

今回はAjaxでreadyStateとstatusを使用する方法を説明します。AjaxでreadyStateとstatusを使用する際の注意事項は何ですか。実際のケースを見てみましょう。

まず次のコードを見て、次に Ajax の readState (ステータス値) と 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 (ステータス コード)

readState は、AJAX の実行によって経験されるいくつかの状態を指します。アクセスが成功したかどうかに関係なく応答するステップは、AJAX の実行ステップとして理解できます。 「ajax.readyState」

statusの取得とは、AJAXアクセスが成功したかどうかに関係なく、HTTPプロトコルによって送信された情報に基づいてサーバーから返される

HTTPヘッダー情報コードを指します。を得る 全体的な理解: 単純に状態として理解できます。全体的な状態を表します。そしてステータスとは、この大きな国家の下にある特定の小さなステータスです。

2.readyStateとは

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

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

0: 初期化、XMLHttpRequest オブジェクトはまだ初期化を完了していません

1: 読み込み中、XMLHttpRequest オブジェクトはリクエストの送信を開始しました

2: 読み込みが完了し、XMLHttpRequest オブジェクトのリクエストが送信されます

3: 解析中、XMLHttpRequest オブジェクトがサーバーの応答の読み取りを開始します

4: 完了、XMLHttpRequest オブジェクトがサーバーの応答を読み取り、終了します

3. status とは

status は XMLHttpRequest オブジェクトの属性であり、応答を示します

HTTP ステータス コード

HTTP1.1 プロトコルでは、HTTP ステータス コードは合計 5 つのカテゴリに分類できます

1xx:リクエストが受信され処理を続行したことを示す情報応答クラス

2xx: アクションが正常に受信、理解、受け入れられたことを示す処理成功応答クラス

3xx: 指定されたアクションを完了するためにリダイレクト応答クラス、さらなる処理を受け入れる必要があります

4xx: クライアント エラー、クライアント リクエストに

構文エラーが含まれているか、正しく実行できません

5xx: サーバー エラー、サーバーは正しいリクエストを正しく実行できません

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——服务器拒绝用户定义的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怎么实现点击时不断开数据加载列表

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