XMLHttpRequest オブジェクト

XMLHttpRequest オブジェクトは、ページが読み込まれた後にサーバーと通信する方法を提供します。

XMLHttpRequest オブジェクトとは何ですか?

XMLHttpRequest オブジェクトは開発者の夢なぜなら、あなたは:

  • ページを再読み込みしないでウェブページを更新します
  • ページが読み込まれた後にサーバーからデータをリクエストします
  • ページが読み込まれた後にサーバーからデータを受け取ります
  • バックグラウンドでサーバーにデータを送信します

すべての現代のブラウザはXMLHttpRequestオブジェクトをサポートしています。

例:テキストを入力する際にサーバーとXML HTTP通信を行います.

XMLHttpRequestオブジェクトの作成

一行的JavaScriptコードでXMLHttpRequestオブジェクトを作成できます。

全ての現代のブラウザ(IE7を含む)において:

xmlhttp=new XMLHttpRequest()

Internet Explorer 5および6において:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// 全ての新しいブラウザ用のコード}
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// IE5およびIE6用のコード}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("あなたのブラウザは XMLHTTP をサポートしていません。");
  }
}
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...ここにコード...
    }
  else
    {
    alert("XMLデータの取得に問題があります");
    }
  }
}
</script>

TIY

注釈:onreadystatechange はイベントハンドラです。その値(state_Change)は、XMLHttpRequest オブジェクトの状態が変更されたときに呼び出される関数の名前です。状態は 0(初期化前)から 4(完了)まで変化します。状態が 4 である場合のみ、コードを実行します。

Async=true を使用する理由は何ですか?

私たちの例では、open() の第3引数に "true" を使用しています。

このパラメータは、リクエストが非同期処理されるかどうかを定義します。

True は、send() メソッドの後にスクリプトが続行し、サーバからの応答を待たないことを意味します。

onreadystatechange イベントはコードを複雑にします。しかし、サーバからの応答を待たずにコードが停止しない最も安全な方法です。

このパラメータを "false" に設定することで、追加の onreadystatechange コードを省略できます。リクエストが失敗しても、残りのコードを実行するかどうかに関係なく、このパラメータを使用できます。

TIY

他の例

XML HTTP を使ってテキストファイルを div 要素に読み込みます

XML HTTP を使って HEAD リクエストを行います

XML HTTP を使って特定の HEAD リクエストを行います

XML HTTP を使って XML ファイル内のデータを一覧表示します

XML / ASP

XML ドキュメントを開き、サーバ上の ASP ページに送信して、このリクエストを分析し、結果を返信することもできます。

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  // code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  // code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("あなたのブラウザは XMLHTTP をサポートしていません。");
  }
</script>
</body>
</html>

VBScript で書かれた ASP ページ:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
xmldoc.documentElement.childNodes に x が含まれている場合、各 x
   if x.NodeName = "to" then name=x.text
次
response.write(name)
%>

response.write プロパティを使用して結果をクライアントに返します。

TIY

XMLHttpRequest オブジェクトは W3C の標準ですか?

W3C 推奨標準のいずれも XMLHttpRequest オブジェクトを規定していません。

しかし、W3C DOM レベル 3 の「ロードおよびセーブ」規格には似た機能が含まれていますが、まだどのブラウザもそれを実装していません。

参照

XML DOM リファレンスマニュアル: XMLHttpRequest オブジェクト