AJAX の設計時に使用される重要なテクノロジ (ツール) は、XMLHTTPRequest オブジェクトです。 XMLHttpRequest オブジェクトは、今日のすべての AJAX および Web 2.0 アプリケーションの技術的基盤です。ソフトウェア ベンダーやオープン ソース コミュニティは現在、XMLHttpRequest オブジェクトの使用をさらに簡素化するさまざまな AJAX フレームワークを提供していますが、それでもこのオブジェクトのプロパティとメソッドを理解する必要があります。
1. XMLHTTPRequest オブジェクトとは何ですか?
最も一般的な定義は次のとおりです。 XmlHttp は、JavaScript、VbScript、Jscript、およびその他のスクリプト言語の http プロトコルを介して XML およびその他のデータを送受信できる API のセットです。 XmlHttp の最大の用途は、Web ページ全体を更新せずに、Web ページのコンテンツの一部を更新できることです。 (この機能は AJAX の主要な機能の 1 つです)
MSDN からの説明: XmlHttp は、クライアントが http サーバーと通信するためのプロトコルを提供します。クライアントは、XmlHttp オブジェクト (MSXML2.XMLHTTP.3.0) を通じて http サーバーに要求を送信し、Microsoft XML ドキュメント オブジェクト モデル Microsoft? XML ドキュメント オブジェクト モデル (DOM) を使用して応答を処理できます。
ここで余談になりますが、これは非常に早くから登場していましたが、以前はブラウザのサポートが十分ではなかったため、ほとんどの WEB プログラマーはあまり使用しませんでした。大きく変更され、Mozilla と Safari がそれを事実上の標準として採用し、主流のブラウザが XMLHTTPRequest オブジェクトをサポートし始めました。ただし、ここで強調しなければならないのは、XMLHTTPRequest はまだ W3C 標準ではないため、ブラウザーごとにパフォーマンスが若干異なるということです。
2. XMLHTTPRequest オブジェクトの作成
違いについて言えば、XMLHTTPRequest オブジェクトを使用してリクエストを送信し、応答を処理する前に、JavaScript を使用して XMLHTTPRequest オブジェクトを作成する必要があります。 (IE は XMLHTTPRequest を ActiveX オブジェクトとして実装し、他のブラウザ (Firefox/Safari/Opear など) はネイティブ JavaScript オブジェクトとして実装します)。 JavaScript を使用して作成する方法を見てみましょう。
以下は引用です。
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
// XMLHTTPRequest オブジェクトを作成する
関数 createXMLHTTPRequest(){
if(window.ActiveXObject){ // ActiveX コントロールがサポートされているかどうかを判断します
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // ActiveXObject の新しいインスタンスをインスタンス化して XMLHTTPRequest オブジェクトを作成します。
}
else if(window.XMLHTTPRequest){ // XMLHTTPRequest をローカル JavaScript オブジェクトとして実装するかどうかを決定します
xmlhttp = new XMLHTTPRequest(); // XMLHTTPRequest (ローカル JavaScript オブジェクト) のインスタンスを作成します。
}
}
//-->
</script>3. 属性とメソッド たくさんあるので、このページでメソッドと属性をリストします (主に私も勉強しているため)。
<html>
<頭>
<title>XMLHTTPRequest オブジェクトのデモの説明</title>
<script language="javascript" type="text/javascript">
<!--
var xmlhttp;
// XMLHTTPRequest オブジェクトを作成する
関数 createXMLHTTPRequext(){
if(window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHTTPRequest){
xmlhttp = 新しい XMLHTTPRequest();
}
}
関数PostOrder(xmldoc)
{
createXMLHTTPRequext();
// メソッド: オープン
//新しい http リクエストを作成し、リクエスト メソッド、URL、検証情報を指定します
// 構文: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//パラメータ
// bstrメソッド
//http メソッド (POST、GET、PUT、PROPFIND など)。大文字と小文字を区別しない。
// bstrUrl
//要求された URL アドレスは絶対アドレスまたは相対アドレスのいずれかです。
// varAsync[オプション]
// ブール型。このリクエストが非同期かどうかを指定します。デフォルトは true です。 true の場合、onreadystatechange 属性で指定されたコールバック関数は、状態が変化したときに呼び出されます。
// bstrUser[オプション]
// サーバーが検証を必要とする場合は、ここでユーザー名を指定します。指定しない場合、サーバーが検証を必要とするときに検証ウィンドウが表示されます。
// bstrパスワード[オプション]
// 検証情報のパスワード部分。ユーザー名が空の場合、この値は無視されます。
// 注: このメソッドを呼び出した後、send メソッドを呼び出してサーバーにデータを送信できます。
xmlhttp.Open("get", " http://localhost/example.htm ", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// アラート(book.xml);
// 属性: onreadystatechange
//onreadystatechange:readyState プロパティが変更されたときのイベント ハンドラーを指定します
// 構文: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// 次の例は、XMLHTTPRequest オブジェクトの readState プロパティが変更されたときに HandleStateChange 関数を呼び出す方法を示しています。
// データが受信されると (readystate == 4)、このページのボタンがアクティブになります
// 注: このプロパティは書き込み専用であり、W3C ドキュメント オブジェクト モデルの拡張です。
xmlhttp.onreadystatechange=HandleStateChange;
// メソッド: 送信
//httpサーバーにリクエストを送信し、レスポンスを受け取る
// 構文: oXMLHttpRequest.send(varBody);
// パラメータ: varBody (このリクエストを通じて送信されるデータ。)
// 注: このメソッドの同期モードまたは非同期モードは、open メソッドの bAsync パラメーターによって異なります。 bAsync == False の場合、このメソッドは要求が完了するまで待機するか、bAsync == True の場合はタイムアウトになります。すぐに戻ります。
// このメソッドは、使用する requestBody であるオプションのパラメーターを 1 つ受け取ります。受け入れられる VARIANT 入力タイプは、BSTR、UI1 (符号なしバイト) の SAFEARRAY、XML ドキュメント オブジェクト モデル (DOM) オブジェクトへの IDispatch、および IStream * です。 IStream * 入力タイプを送信する場合、コンポーネントは、IStream * 入力タイプを除くすべての入力タイプに Content-Length ヘッダーを自動的に設定します。
// 送信されたデータが BSTR の場合、応答は utf-8 としてエンコードされ、charset を含むドキュメント タイプ ヘッダーを適切な位置に設定する必要があります。
// 入力タイプが UI1 の SAFEARRAY の場合、応答は追加のエンコードなしでそのまま送信されます。呼び出し側は、適切なコンテンツ タイプを使用して Content-Type ヘッダーを設定する必要があります。
// 送信されたデータが XML DOM オブジェクトの場合、応答は XML ドキュメントで宣言されたエンコーディングにエンコードされます。XML ドキュメントでエンコーディングが宣言されていない場合は、デフォルトの UTF-8 が使用されます。
// 入力タイプが IStream * の場合、応答は追加のエンコードなしでそのまま送信されます。呼び出し側は、適切なコンテンツ タイプを使用して Content-Type ヘッダーを設定する必要があります。
xmlhttp.Send(xmldoc);
// メソッド: getAllResponseHeaders
// 応答のすべての http ヘッダーを取得します
// 構文: strValue = oXMLHttpRequest.getAllResponseHeaders();
// 注: 各 http ヘッダーの名前と値はコロンで区切られ、rn で終わります。このメソッドは、send メソッドが完了した後にのみ呼び出すことができます。
アラート(xmlhttp.getAllResponseHeaders());
// メソッド: getResponseHeader
// レスポンス情報から指定されたhttpヘッダを取得する
// 構文: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// 注: このメソッドは、send メソッドが成功した後にのみ呼び出すことができます。サーバーから返された文書タイプが「text/xml」の場合、この文は
// xmlhttp.getResponseHeader("Content-Type"); 文字列「text/xml」を返します。 getAllResponseHeaders メソッドを使用すると、完全な http ヘッダー情報を取得できます。
alert(xmlhttp.getResponseHeader("Content-Type")); // http ヘッダーの Content-Type 列 (現在の Web サーバーのバージョンと名前) を出力します。
document.frmTest.myButton.disabled = true;
// メソッド: 中止
// 現在のリクエストをキャンセルします
// 構文: oXMLHttpRequest.abort();
// 注: このメソッドを呼び出した後、現在のリクエストは UNINITIALIZED ステータスを返します。
//xmlhttp.abort();
// メソッド: setRequestHeader
// リクエストの特定の http ヘッダーを別途指定
// 構文: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// パラメータ: bstrHeader (文字列、ヘッダー名)
// bstrValue(文字列, 値。)
// 注: この名前の http ヘッダーがすでに存在する場合、上書きされます。このメソッドは、open メソッドの後に呼び出す必要があります。
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
関数 HandleStateChange()
{
//属性:readyState
// XMLHTTP リクエストの現在のステータスを返します。
// 構文: lValue = oXMLHttpRequest.readyState;
// 備考: 変数。この属性は読み取り専用で、ステータスは長さ 4 の整数で表されます。定義は次のとおりです。
// 0 (初期化されていない) オブジェクトは作成されましたが、初期化されていません (open メソッドがまだ呼び出されていません)
// 1 (初期化) オブジェクトは作成されていますが、send メソッドはまだ呼び出されていません。
// 2 (データ送信) send メソッドが呼び出されましたが、現在のステータスと http ヘッダーは不明です
// 3 (データ送信中) データの一部を受信済み レスポンス、httpヘッダーが不完全なため、responseBody、responseTextでデータの一部を取得する際にエラーが発生します。
// 4 (Complete) データの受信が完了しました。この時点で、responseBody と responseText を通じて完全な応答データが取得できます。
if (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = false;
// 属性: レスポンスボディ
// サーバー応答データを特定の形式で返します
// 構文: strValue = oXMLHttpRequest.responseBody;
// 備考: 変数。このプロパティは読み取り専用で、サーバーから符号なし配列形式で直接返されたデコードされていないバイナリ データを表します。
アラート(xmlhttp.responseBody);
//プロパティ: レスポンスストリーム
// レスポンス情報を Ado Stream オブジェクトの形式で返します
// 構文: strValue = oXMLHttpRequest.responseStream;
// 備考: 変数。このプロパティは読み取り専用で、Ado Stream オブジェクトの形式で応答情報を返します。
アラート(xmlhttp.responseStream);
//属性: レスポンステキスト
// レスポンス情報を文字列として返す
// 構文: strValue = oXMLHttpRequest.responseText;
// 備考: 変数。このプロパティは読み取り専用で、応答情報を文字列として返します。 XMLHTTP は応答情報を Unicode 文字列にデコードしようとします。
// XMLHTTP は、デフォルトで応答データのエンコーディングを UTF-8 に設定します。サーバーから返されたデータに BOM (バイト オーダー マーク) が含まれている場合、XMLHTTP は次のことを行うことができます。
// UCS-2 (ビッグ エンディアンまたはリトル エンディアン) または UCS-4 データをデコードします。サーバーが XML ドキュメントを返す場合、この属性は
// プロパティは、XML ドキュメント内のエンコード宣言を処理しません。これを処理するには、responseXML を使用する必要があります。
アラート(xmlhttp.responseText);
//属性：responseXML
// 応答情報を XML Document オブジェクトにフォーマットして返します
// 構文: var objDispatch = oXMLHttpRequest.responseXML;
// 備考: 変数。このプロパティは読み取り専用で、応答情報を Xml Document オブジェクトにフォーマットして返します。応答データが有効な XML ドキュメントではない場合、
// このプロパティ自体は XMLDOMParseError を返さず、エラー情報は処理された DOMDocument オブジェクトを通じて取得できます。
alert("結果 = " + xmlhttp.responseXML.xml);
//属性: ステータス
// 現在のリクエストの http ステータス コードを返します
// 構文: lValue = oXMLHttpRequest.status;
// 戻り値: 長い標準 http ステータス コード。次のように定義されます。
//番号:説明
// 100:続行
// 101:プロトコルの切り替え
// 200:OK
// 201:作成されました
// 202:承認されました
// 203:非権威情報
// 204:コンテンツがありません
// 205:内容をリセット
// 206: 部分的なコンテンツ
// 300:複数の選択肢
// 301:永久に移動されました
// 302:見つかりました
// 303: その他を参照
// 304: 変更されていません
// 305:プロキシを使用
// 307: 一時的なリダイレクト
// 400: 不正なリクエスト
// 401: 不正
// 402:支払いが必要です
// 403:禁止
// 404: 見つかりません
// 405:メソッドは許可されていません
// 406: 受け入れられません
// 407: プロキシ認証が必要です
// 408:リクエストタイムアウト
// 409:競合
// 410: 消えた
// 411:長さが必要です
// 412: 前提条件が失敗しました
// 413:リクエストエンティティが大きすぎます
// 414:リクエスト URI が長すぎます
// 415:サポートされていないメディア タイプ
// 416: 要求された範囲が適切ではありません
// 417:期待は失敗しました
// 500: 内部サーバーエラー
// 501: 実装されていません
// 502不正なゲートウェイ
// 503: サービスが利用できません
// 504:ゲートウェイタイムアウト
// 505:HTTP バージョンはサポートされていません
// 注: 長整数。このプロパティは読み取り専用で、現在のリクエストの http ステータス コードを返します。このプロパティはデータの送受信後にのみ取得できます。
アラート(xmlhttp.status);
//属性: statusText
// 現在のリクエストの応答行ステータスを返します
// 構文: strValue = oXMLHttpRequest.statusText;
// 備考: 文字列。このプロパティは読み取り専用です。BSTR の現在のリクエストの応答行ステータスを返します。このプロパティはデータの送受信後にのみ取得できます。
アラート(xmlhttp.statusText);
}
}
//-->
</script>
</head>
<本文>
<form name="frmTest">
<input name="myButton" type="button" value="クリックしてください" onclick="PostOrder('http://localhost/example.htm');">
</form>
</body>
</html>