AjaxのreadyState(状態値)とstatus(状態コード)の研究
4207 ワード
var xhr = createXHR();
xhr.onreadystatechange =function(){
if (xhr.readyState==4) {
if ((xhr.status>=200&&xhr.status<300)||xhr.status==304) {
alert(xhr.responseText);
}else {
alert('Request was unsuccessful:'+xhr.status);
}
}
};
xhr.open('get','http://120.78.164.247:9999/user/findAll', false);
xhr.send(null);
1.Ajax:readyState(ステータス値)とstatus(ステータスコード)の違いreadyStateとは、Ajaxを実行して経験したいくつかのステータスを指し、アクセスが成功するかどうかにかかわらず応答するステップであり、Ajax実行ステップとして理解され、「ajax.readyState」を使用して取得される.statusとは、Ajaxアクセスが成功したかどうかにかかわらず、httpプロトコルによってコミットされた情報に基づいて、サーバから返されるhttpヘッダ情報コードであり、「ajax.status」を使用して取得される.
全体的な理解:stateが全体の状態を表すと簡単に理解できます.statusはこの大きなstateの下で具体的に小さい状態です.
2.readyStatereadyStateとはXMLHttpRequestオブジェクトの属性であり、現在のXMLttpRequestオブジェクトがどのような状態にあるかを識別します.readyStateには合計5つの状態値があり,それぞれ0~4であり,各値は異なる意味を表す.
0: ,XMLHttpRequest
1: ,XMLHttpRequest
2: ,XMLHttpRequest
3: ,XMLHttpRequest
4: ,XMLHttpRequest
3.statusstatusとはXMLhttpRequestオブジェクトの属性であり、応答するhttpステータスコードがhttp 1にあることを示す.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
思考問題:なぜonreadystatechangeの関数実装はreadystaeとstatusを同時に判断するのか.
1つ目の考え方:readyStateのみで判断
var xhr = createXHR();
xhr.onreadystatechange =function(){
if (xhr.readyState==4) {
alert(xhr.responseText);
}else {
alert('Request was unsuccessful:'+xhr.status);
}
};
xhr.open('get','http://120.78.164.247:9999/user/findAll', false);
xhr.send(null);
サービス応答が間違っていましたが、メッセージが返されました.これは私たちが望んでいる結果ではありません.戻りが200ではなく404または500である場合、readystateのみを使用して判断するため、戻りの結果が200、404または500であることを無視し、応答が正常に戻りさえすれば、次のjavascriptコードを実行し、結果は様々な予想できないエラーをもたらす.だからreadyStateだけで判断するのは無理です.
2つ目の考え方:statusのみで判断
var xhr = createXHR();
xhr.onreadystatechange =function(){
if ((xhr.status>=200&&xhr.status<300)||xhr.status==304) {
alert(xhr.responseText);
}else {
alert('Request was unsuccessful:'+xhr.status);
}
};
xhr.open('get','http://120.78.164.247:9999/user/findAll', false);
xhr.send(null);
実際、結果は予想通りではありません.レスポンスコードは確かに200を返しましたが、全部で3回ウィンドウがポップアップされました!1回目は「readyState=2」のウィンドウ、2回目は「readyState=3」のウィンドウ、3回目は「readyState=4」のウィンドウです.これにより,onreadystatechange関数の実行はreadystatechangeが4になったときだけトリガーされるのではなく,readystatechange(2,3,4)の変化のたびにトリガーされるので,前述したような状況になることが分かる.status単独で判断しても通用しないことがわかる.
5.上記の実験から、判断する際にreadyStateとstatusが欠けてはいけないことがわかります.ではreadyStateとstatusの前後判断順は影響するのではないでしょうか.私たちはstatusを前にして判断することができます.実際、これは最終的な結果には影響しませんが、中間の性能は異なります.実験により,readyStateの変化のたびにonreadystatechange関数がトリガーされ,statusを先に判断すると,毎回statusの状態をより多く判断することが分かった.性能上の影響は微々たるものだが,極致コードを追求する考えでreadyStateの判断を先に置くべきである.みんなが一日も早く敵国に富むことを祈って、bye~