XMLHttpRequest オブジェクト
- 前のページ DOM 克隆ノード
- 次のページ DOM マニュアル目次
XMLHttpRequest オブジェクトは、ページが読み込まれた後にサーバーと通信する方法を提供します。
XMLHttpRequest オブジェクトとは何ですか?
XMLHttpRequest オブジェクトは開発者の夢なぜなら、あなたは:
- ページを再読み込みしないでウェブページを更新します
- ページが読み込まれた後にサーバーからデータをリクエストします
- ページが読み込まれた後にサーバーからデータを受け取ります
- バックグラウンドでサーバーにデータを送信します
すべての現代のブラウザはXMLHttpRequestオブジェクトをサポートしています。
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>
注釈:onreadystatechange はイベントハンドラです。その値(state_Change)は、XMLHttpRequest オブジェクトの状態が変更されたときに呼び出される関数の名前です。状態は 0(初期化前)から 4(完了)まで変化します。状態が 4 である場合のみ、コードを実行します。
Async=true を使用する理由は何ですか?
私たちの例では、open() の第3引数に "true" を使用しています。
このパラメータは、リクエストが非同期処理されるかどうかを定義します。
True は、send() メソッドの後にスクリプトが続行し、サーバからの応答を待たないことを意味します。
onreadystatechange イベントはコードを複雑にします。しかし、サーバからの応答を待たずにコードが停止しない最も安全な方法です。
このパラメータを "false" に設定することで、追加の onreadystatechange コードを省略できます。リクエストが失敗しても、残りのコードを実行するかどうかに関係なく、このパラメータを使用できます。
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 プロパティを使用して結果をクライアントに返します。
XMLHttpRequest オブジェクトは W3C の標準ですか?
W3C 推奨標準のいずれも XMLHttpRequest オブジェクトを規定していません。
しかし、W3C DOM レベル 3 の「ロードおよびセーブ」規格には似た機能が含まれていますが、まだどのブラウザもそれを実装していません。
- 前のページ DOM 克隆ノード
- 次のページ DOM マニュアル目次