AJAX コアの詳細説明 - XMLHttpRequest オブジェクト

これから話すことは非常に基本的なことなので、専門家が読んだ場合は、ご意見をお願いします。初心者や低レベルの知識をあまり知らない人は、理解と記憶を助けるために読むことができます。

XMLHttpRequest オブジェクトは AJAX 関数の中核です。AJAX プログラムを開発するには、まず XMLHttpRequest オブジェクトを理解する必要があります。

XMLHttpRequest オブジェクトを理解するには、まず XMLHttpRequest オブジェクトを作成します。さまざまなブラウザーで XMLHttpRequest オブジェクトを作成するには、さまざまな方法が使用されます。

まず、IE で XMLHttpRequest オブジェクトを作成する方法 (方法 1) を確認してください。

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP") ); // 新しいバージョンの IE を使用して IE 互換オブジェクト (Msxml2.XMLHTTP) を作成します。
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") //古いバージョンの IE を使用して IE 互換オブジェクト (Microsoft.XMLHTTP) を作成します。
Mozilla、Opera、Safari、および IE 以外のほとんどのブラウザは、次の方法 (方法 2) を使用して XMLHttpRequest オブジェクトを作成します

。
Internet Explorer は、実際には、Mozilla、Opera、Safari、および Microsoft 以外のほとんどのブラウザーが使用する XMLHttpRequest オブジェクト (以下、総称して XMLHttpRequest オブジェクトと呼びます) の代わりに、XMLHttp と呼ばれるオブジェクトを使用します。 IE7 では XMLHttpRequest オブジェクトも使用され始めました。

XMLHttpRequest オブジェクトの作成時に別のブラウザーが誤ったメソッドを使用すると、ブラウザーはエラーを報告し、オブジェクトは使用できなくなります。したがって、さまざまなブラウザーと互換性のある XMLHttpRequest オブジェクトを作成するメソッドが必要です。

複数のブラウザーと互換性のある XMLHttpRequest オブジェクト メソッドを作成します

var xmlhttp = false; //新しい変数リクエストを作成し、それに false の値を割り当てます。判定条件はXMLHttpRequestオブジェクトがまだ作成されていないことを意味するfalseを指定します。
関数 CreateXMLHttp(){
試す{
xmlhttp = new XMLHttpRequest(); //IE 以外のブラウザはこのメソッドをサポートしています。
}
キャッチ (e){
試す{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //新しいバージョンの IE を使用して IE 互換オブジェクト (Msxml2.XMLHTTP) を作成します。
}
キャッチ (e){
試す{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //古いバージョンの IE を使用して、IE 互換オブジェクト (Microsoft.XMLHTTP) を作成します。
}
キャッチ (失敗){
xmlhttp = false; // 失敗した場合は、リクエストの値が false のままであることを確認します。
}
}
}
xmlhttp を返します。
}

(!xmlhttp){ の場合、

作成が成功したかどうかを判断するのは非常に簡単です

//XMLHttpRequest オブジェクトの作成に失敗しました。
}
それ以外{
// 無事に作成されました！
}
XMLHttpRequest オブジェクトを作成した後、このオブジェクトのメソッド、プロパティ、および最も重要な onreadystatechange イベント ハンドラーを見てみましょう。

メソッド:

open() 説明: URL や HTTP メソッドなどの HTTP リクエスト パラメータを初期化しますが、リクエストは送信しません。
abort() 説明: 現在の応答をキャンセルし、接続を閉じ、保留中のネットワーク アクティビティを終了します。
getAllResponseHeaders() 説明: HTTP 応答ヘッダーを解析されていない文字列として返します。
getResponseHeader() 説明: 指定された HTTP 応答ヘッダーの値を返します。
send() 説明: open() メソッドに渡されるパラメータと、メソッドに渡されるオプションのリクエスト本文を使用して、HTTP リクエストを送信します。
setRequestHeader() 説明: オープンしているが送信されていないリクエストに HTTP リクエストを設定または追加します。
属性:

readyState 説明:HTTP リクエストのステータス。
responseText 説明: サーバーがこれまでに受信した応答本文 (ヘッダーを除く)、またはデータを受信して​​いない場合は空の文字列。
responseXML 説明: リクエストに対する応答。XML に解析され、Document オブジェクトとして返されます。
status 説明: サーバーから返された HTTP ステータス コード。
statusText 説明: この属性は、番号の代わりに名前を使用してリクエストの HTTP ステータス コードを指定します。
onreadystatechange は、readyState プロパティが変更されるたびに呼び出されるイベント ハンドラー関数です。
リクエストの送信とリクエスト結果の処理のプロセスから XMLHttpRequest オブジェクトを理解しましょう。

当然のことながら、XMLHttpRequest オブジェクトはリクエストの送信前に生成されます。すでに存在している場合は、さらにコードを記述する必要はありません。

XMLHttpRequest オブジェクトを生成します。

var xmlhttp = CreateXMLHttp();
XMLHttpRequest オブジェクトを作成したら、どの Web サイトにリクエストを送信しますか? ブログ パークのホームページにある RSS を選択しましょう。では、open() メソッドを使用して、リクエストする Web サイトのアドレスを設定するにはどうすればよいでしょうか。
open(メソッド、URL、非同期、ユーザー名、パスワード)
このメソッドには 5 つのパラメータがあります。具体的な意味はhttp://www.w3school.com.cn/xmldom/dom_http.aspで確認できます。
これが私たちが使っているものです。

xmlHttp.open("get"," http://www.cnblogs.com",true );
get パラメータは get メソッドを使用することを意味します。2 番目は当然、ブログ パークのホームページを意味します。もちろん、true を使用します。特定のパラメータの説明は、 http://www.w3school.com.cnにも記載されています。
さて、目標は決まりました、それをどのように送信するかです。 send()メソッドを使用します。
send(body)、send() メソッドには DOM オブジェクトを表すパラメーターが 1 つだけあります。次回は、この DOM オブジェクトについて詳しく説明します。

xmlhttp.send(null);
それでおしまい。送信されました。では、返された結果をどのように処理するのでしょうか? このとき、XMLHttpRequest オブジェクトの最も重要なもの、つまり onreadystatechange イベント ハンドルが使用されます。それは何を意味するのでしょうか? 次に、XMLHttpRequest オブジェクトの readState について説明する必要があります。readyState には 5 つの状態があり、それぞれ 0 ～ 4 の数字で表されます。

ステータス名 説明
0 未初期化 初期化状態。 XMLHttpRequest オブジェクトは (open() が呼び出される前に) 作成されたか、abort() メソッドによってリセットされました。
1 Open open() メソッドが呼び出されましたが、send() メソッドは呼び出されませんでした。リクエストはまだ送信されていません。
2 Sent Send() メソッドが呼び出され、HTTP リクエストが Web サーバーに送信されました。応答がありませんでした。
3 受信中 すべてのレスポンスヘッダを受信しました。応答本文の受信が開始されましたが、完了していません。
4 ロードされた HTTP 応答が完全に受信されました。

ただし、各ブラウザが onreadystatechange イベント ハンドルで処理できる状態は一貫していないことに注意してください。IE と FireFox は状態 1 ～ 4 を処理できますが、Safari は状態 2 ～ 4 を処理でき、Opera は状態 3 と 4 を処理できます。 。 XMLHttpRequest オブジェクトが作成された直後に open() メソッドが呼び出され、その時点でステータスが 1 になるため、ステータス 0 は基本的に役に立ちません。もちろん、オブジェクトが中止によってキャンセルされたかどうかを確認したい場合は除きます。 () ですが、この状況はまだ非常にまれです。ほとんどの場合、ステータスが 4 (受け入れられ、完了) であるかどうかを判断するだけで十分です。
さて、readyState には 5 つの状態があることを理解しました。次に、処理の戻り結果は、状態が異なる状態に変化するかどうかを確認するものであり、状態が変化したときに誰がその変化を処理するかを XMLHttpRequest オブジェクトに伝える方法です。記述方法は 2 つあり、1 つは匿名メソッドを使用する方法、もう 1 つはメソッドを指定する方法です。実際には、これらは同じ効果を持つ別の記述方法です。xmlhttp.onReadyStateChange

= function (){
//ステータスの変更を処理するコード
}
//または
xmlhttp.onReadyStateChange = getResult;
関数 getResult(){
///ステータスの変更を処理するコード
}
//ちなみにハンドル名はこんな感じで覚えておいてください。 On ReadyState Change は読み込み状態が変化したときにリクエストを送信し、その戻り値を取得する方法も指定します。 content? 使用するには、responseText と responseXML が返されるオブジェクトであり、これについては後で説明します。

alert(xmlhttp.responseText); //ホームページの HTML コードが返されるかどうかを確認します。成功するのはあなたです。
全体の流れとしては、XMLHttpRequestオブジェクトの作成→送信アドレスと送信メソッドの指定→リクエストの送信→処理メソッドの指定と戻り結果の処理となります。ただし、通常の理解ではこうですが、onreadystatechange イベント ハンドルの指定処理メソッドは送信前に指定する必要があり、指定しないと状態変更イベントを処理できません。

XMLHttpRequest オブジェクトの作成 → 送信アドレスと送信メソッドの指定 → ステータス変更処理メソッドの指定 → リクエスト送信 リクエスト送信後、指定した処理メソッドが自動的に実行されるという流れで覚えればよいでしょう。ステータスが変化したときに呼び出されます。
さて、完成したコードを見てみましょう。

完成したコード
var xmlhttp = false; //新しい変数リクエストを作成し、それに false の値を割り当てます。判定条件はXMLHttpRequestオブジェクトがまだ作成されていないことを意味するfalseを指定します。
関数 CreateXMLHttp(){
試す{
xmlhttp = new XMLHttpRequest(); //IE 以外のブラウザはこのメソッドをサポートしています。
}
キャッチ (e){
試す{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //新しいバージョンの IE を使用して IE 互換オブジェクト (Msxml2.XMLHTTP) を作成します。
}
キャッチ (e){
試す{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //古いバージョンの IE を使用して、IE 互換オブジェクト (Microsoft.XMLHTTP) を作成します。
}
キャッチ (失敗){
xmlhttp = false; // 失敗した場合は、リクエストの値が false のままであることを確認します。
}
}
}
xmlhttp を返します。
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get"," http://www.cnblogs.com",true );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(null);
関数 getResult(){
if(xmlhttp.readyState == 4){
アラート(xmlhttp.responseText);
}
}
すべて問題ないようですが、ネットワーク送信中に HTML コードが間違っていたり、指定したアドレスが無効になったりした場合に何が起こるか考えたことはありますか。このとき、サーバーから返される HTTP ステータス コードである status 属性を使用する必要があります。 xmlhttp.status が 200 の場合、送信プロセスが完了し、エラーがないことを意味します。 HTTP ステータス コードの具体的な意味については、W3C 組織の Web サイトのアドレスhttp://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1を参照してください。
getResult() メソッドは次のように書けば大丈夫だと思います。

関数 getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
アラート(xmlhttp.responseText);
}
}
さて、もともとは非常に単純だったものですが、これについてたくさん書いた後では、非常に冗長になっているように見えます。しかし、現在では、AJAX プログラムを開発するために多くの JS ライブラリが使用されており、そのような基本的なコードを直接記述する必要はありません。たとえば、有名な jQuery を使用する場合、基本的なことをよく理解していれば、これらのライブラリはエラーを報告します。また、問題がある場合は、エラーの場所をすぐに把握して、より迅速に変更を加えることができます。プログラムを正常に実行させます。