JavaScript ajaxの5つの状態入門_基礎知識

「Pragmatic ajax (動的 Web サイトの静的化) Web 2.0 入門」で、readyStae ステータスの紹介を偶然目にしました。この紹介は非常に実践的だと感じました。その抜粋は次のとおりです。

0: (初期化されていない) send() メソッドはまだ呼び出されていません。 1: (ロード中) send() メソッドが呼び出され、リクエストが進行中です。 2: (ロード済み) send() メソッドが完了し、応答全体が受信されました。
3: (対話型) 応答が解析中です
4: (完了) 応答は解析され、収集の準備が整いました。

0 - (初期化されていない) send() メソッドがまだ呼び出されていません

1 - (ロード中) send() メソッドが呼び出され、リクエストが送信されています

2 - (ロード完了) send() メソッドが実行され、すべての応答コンテンツが受信されました
3 - (対話型) 応答コンテンツを解析します
4 - (完了) 応答コンテンツの解析が完了し、クライアントで呼び出すことができます

他のほとんどの本では、readyState のこれら 5 つの状態については不明瞭です。たとえば、「Ajax の基礎 (静的動的 Web サイト)」の表 2-2 には、状態の「名前」がリストされているだけです。取り得る 5 つの値は、0 = 未初期化、1 です。 = 読み込み中、2 = 読み込み中、3 = インタラクティブ、4 = 完了。ただし、「ajax (dynamic website staticization) in Action」では、これら 5 つの状態の詳細についてはまったく触れていないようです。 「プロフェッショナル ajax (静的ウェブサイトの静的化)」は満足のいくものではありませんが、それでも次のようなメリットがあります。

readyState には 5 つの可能な値があります:

0 (未初期化): オブジェクトは作成されましたが、open() メソッドが呼び出されていません。 1 (読み込み中): open() メソッドが呼び出されましたが、リクエストは送信されていません。 2 (ロード済み): リクエストは送信されました。 3 (対話型) 部分的な応答を受信しました。

4 (完了): すべてのデータが受信され、接続が閉じられました。


readyState には 5 つの可能な値があります:

0 (初期化されていない): (xml(標準化が近づいています) HttpRequest) オブジェクトが作成されましたが、open() メソッドが呼び出されていません。

1 (ロード中): open() メソッドが呼び出されていますが、リクエストはまだ送信されていません。

2 (ロード完了): リクエストが送信されました。 3 (対話型): 部分応答データを受信できます。
4 (完了): すべてのデータが受信され、接続が閉じられました。
「ajax の理解 (静的 Web サイトの静的化): JavaScript を使用したリッチ インターネット アプリケーションの作成」では、次の表を使用して説明します。


readyState ステータス コード

XML のステータス (標準化が近づいています) HttpRequest オブジェクト

(0) 未初期化

初期化されていません オブジェクトは作成されましたが、初期化されていません (open メソッドが呼び出されていません)。 (xml (標準化が近づいています) HttpRequest) オブジェクトは作成されましたが、初期化されていません (open メソッドがまだ呼び出されていません)。
(1) 読み込み中 読み込み中 オブジェクトは作成されましたが、send メソッドが呼び出されていません。
(xml (標準化が近づいています) HttpRequest) オブジェクトは作成されましたが、send メソッドはまだ呼び出されていません。
(2) ロードされました
読み込みが完了しました send メソッドが呼び出されていますが、ステータスとヘッダーはまだ利用できません。
send メソッドが呼び出されていますが、(HTTP 応答) ステータスとヘッダーはまだ利用できません。
(3) インタラクティブ
インタラクション 一部のデータが受信されました。この状態で responseBody プロパティと responseText プロパティを呼び出して部分的な結果を取得すると、ステータス ヘッダーと応答ヘッダーが完全には利用できないため、エラーが返されます。
いくつかのデータを受信しました。ただし、この時点で、responseBody プロパティと responseText プロパティを呼び出して部分的な結果を取得すると、ステータス ヘッダーと応答ヘッダーがまだ完全には利用できないため、エラーが発生します。
(4) 完了
Complete すべてのデータが受信されており、完全なデータはresponseBodyプロパティとresponseTextプロパティで利用可能です。
すべてのデータが受信されており、responseBody プロパティと responseText プロパティで完全なデータを抽出できます。

上記の書籍のreadyStateの5つの状態の紹介によると、受信データの分析について言及しているため、「Pragmatic ajax (動的Webサイトの静的化) Web 2.0入門」の方が正確だと思いますが、これは異なります。他の書籍でも述べられていますが、「(2)読み込み完了」と「(4)完了」の間に必要な変換プロセスとして「(3)インタラクション」段階が存在する理由、つまりその使命はここにあります。まとめると、これらの状態をより正確で分かりやすい「状態：タスク（目標）プロセスのパフォーマンス（または特性）」という表現形式で定義するのが理想的な説明方法だと思います。現在のテストの概要は次のとおりです:


readyState ステータス

説明

(0) が初期化されていません
この段階では、xml (標準化が近づいています) HttpRequest オブジェクトが作成されているかどうかを確認し、open() メソッドを呼び出して初期化解除の準備をします。値 0 は、オブジェクトがすでに存在していることを示します。それ以外の場合、ブラウザはオブジェクトが存在しないというエラーを報告します。

(1)ロード
この段階では、xml (標準化が近づいています) HttpRequest オブジェクトが初期化されます。つまり、open() メソッドが呼び出され、オブジェクトのステータスがパラメーター (メソッド、url、true) に従って設定されます。そして、send() メソッドを呼び出して、サーバーへのリクエストの送信を開始します。値 1 は、リクエストがサーバーに送信されていることを示します。

(2) 読み込み完了
このステージはサーバーからの応答データを受信します。ただし、取得されるのはサーバー応答の生データのみであり、クライアントで直接使用することはできません。値 2 は、すべての応答データが受信されたことを示します。そして、データ分析の次の段階に備えることができます。

(3)インタラクション
このステージでは、受信したサーバー側の応答データを解析します。つまり、サーバー側の応答ヘッダーによって返された MIME タイプに従って、データは、responseBody、responseText、または responsexml (標準化が近づいています) 属性を通じてアクセスできる形式に変換され、サーバー側で呼び出す準備が整います。クライアント。ステータス 3 は、データが解析中であることを示します。

(4) 完了
この段階で、すべてのデータがクライアントが利用可能な形式に解析され、解析が完了したことが確認されます。値 4 は、データ解析が完了し、xml (標準化が近づいています) HttpRequest オブジェクトの対応する属性を通じてデータを取得できることを示します。

要約すると、XML 全体 (標準化が近づいています) HttpRequest オブジェクトのライフ サイクルには次の段階が含まれる必要があります。
作成 - リクエストの初期化 - リクエストの送信 - データの受信 - データの解析 - 完了

特定のアプリケーションでは、readyState (xml のライフサイクルのさまざまな段階 (標準化が近づいている) HttpRequest オブジェクト) の 5 つの状態の意味を明確にすることで、ajax のコア (動的 Web サイトの静的化) の謎を取り除くことができます。 ） 感覚（不明瞭な言葉の背後にある理由は、物事を神秘的にして神秘的な感覚を生み出すため、または「人々を失神させて人々に気づかせる」ためのいずれかです） 本質を素早く把握することは、学習の挫折を軽減し、自己を高めるのに非常に有益です。 -自信。

たとえば、次の例のようになります:

コードをコピーします コードは次のとおりです:

//配列を宣言
var states = ["初期化中...",
「リクエストの初期化...成功しました!
リクエストを送信中...",
「成功しました！
」 データを受信中...",
「やった！
」 データを解析しています...",
「やった！
」 ”];

//コールバック関数内のコードスニペット
if (xml(標準化は近づいています)Http.readyState==4)
{
varspan = document.createElement("span");
span.innerHTML = states[xml(標準化が近づいています)Http.readyState];
document.body.appendChild(span);

if (xml(標準化が近づいています)Http.status == 200)
{
var xml (標準化が近づいています) doc = xml (標準化が近づいています) Http.responsexml (標準化が近づいています)
//その他のコード
}

//メモリリークを防ぐために破棄することを忘れないでください
xml (標準化が近づいています)Http = null;
}その他{
varspan = document.createElement("span");
span.innerHTML = states[xml(標準化が近づいています)Http.readyState];
document.body.appendChild(span);
}結果は次のとおりです:

リクエストの初期化...成功しました!
リクエストの送信...成功しました!
データを受信中...完了!
データを解析中...完了!

xml (標準化が近づいています) HttpRequest オブジェクトが各段階で何をしているのかを簡単に理解できます。したがって、ajax のコア部分 (動的 Web サイトの静的化) を本当にシンプルかつ明確に理解するのは簡単です。