XMLHttpRequest オブジェクト
>XMLHttpRequest オブジェクトにより、全ページをリロードせずに web ページの一部を更新することが可能になります。
XMLHttpRequest オブジェクト
XMLHttpRequest オブジェクトは、舞台裏でデータをサーバと交換するために使用されます。
XMLHttpRequestオブジェクトは、次のことができる、開発者の夢です:
- ページをリロードしない Webページの更新
- ページロード後、サーバへデータのリクエスト
- ページロード後、サーバからデータを受信
- バックグラウンドでサーバへデータを送信
XMLHttpRequest オブジェクトの作成
最新のブラウザ (IE7+, Firefox, Chrome, Safari, 及び Opera) 全ては、組込みの XMLHttpRequest オブジェクトを持っています。
XMLHttpRequest オブジェクト作成構文:
| xmlhttp=new XMLHttpRequest(); |
Internet Explorer の旧バージョン (IE5 及び IE6) は、ActiveX オブジェクトを使用します:
| xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); |
IE5 と IE6 を含む全ての最新ブラウザを取扱うには、ブラウザが XMLHttpRequest オブジェクトをサポートしているかどうかをチェックします。サポートしていれば XMLHttpRequest オブジェクトを、サポートしていなければ ActiveXObject を作成します:
例
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} |
Try it yourself »
|
サーバへのリクエスト送信
サーバへのリクエスト送信には、XMLHttpRequest オブジェクトの open() と send() メソッドを使用します:
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send(); |
| メソッド |
説明 |
| open(method,url,async) |
リクエストのタイプ、URL、及び非同期に処理するかどうかを指定します。
method: リクエストのタイプ: GET または POST
url: サーバのファイル位置
async: true (非同期) または false (同期) |
| send(string) |
サーバへリクエストを送信します。
string: POST リクエストの場合のみに使用します |
GET または POST ?
GET は、POST より簡単で速く、多くの場合に使用されています。
しかし、次のような場合は通常 POST を使用します:
- キャッシュ・ファイルを選択できない (サーバのファイルやデータベースを更新するため)
- 大量データをサーバへ送信する (POST にはサイズの制限がない)
- ユーザ入力 (未知の文字を含むことのできる) を送信するには、POST は GET より強固で安全です
url - サーバのファイル
open() メソッドの url パラメータは、サーバのファイルへのアドレスです:
| xmlhttp.open("GET","xmlhttp_info.txt",true); |
ファイルは、.txt や .xml のようなどのような種類のファイルでも、
(応答を返信する前に、サーバの動作を実行できる) .asp や .php のよう
なサーバ・スクリプト・ファイルでも指定可能です。
Asynchronous - True または False ?
リクエストを非同期に送信するには、open() メソッドの async パラメータに true を設定します:
| xmlhttp.open("GET","xmlhttp_info.txt",true); |
リクエストを非同期に送信することは、ウェブ開発者にとり大きな改善です。
サーバで実行するタスクの多くは、非常に時間がかかります。
非同期送信により、JavaScriptはサーバからの応答を待つ必要がないので、
次のことができるようになります:
- サーバからの応答を待っている間、他のスクリプトの実行ができます
- 応答が完了したときに、応答の処理を行います
Async=true
async=true を使用する時には、onreadystatechangeイベントで、応答の準備が完了したときに実行する関数を指定します:
例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send(); |
Try it yourself »
|
Async=false
async=false を使用するには、open() メソッドの 3 番目のパラメータを false に変更します:
| xmlhttp.open("GET","xmlhttp_info.txt",false); |
async=false は推奨されませんが、少量の小さなリクエストなら大丈夫でしょう。
JavaScript は、サーバの応答が完了するまで実行を継続しないことを覚えておいてください。
サーバがビジーか遅い場合、アプリケーションはハングまたは停止します。
注: async=false を使用する場合、send() ステートメントの直後に onreadystatechange 関数を記述しないでください :
例
xmlhttp.open("GET","xmlhttp_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; |
Try it yourself »
|
サーバ応答
サーバからの応答を受信するには、XMLHttpRequest オブジェクトの responseText または responseXML プロパティを使用します。
| プロパティ |
説明 |
| responseText |
応答を文字列で取得します |
| responseXML |
応答を XML で取得します |
responseText プロパティ
サーバからの応答が XML でない場合は、responseText プロパティを使用します。
responseText プロパティは文字列で応答を返しますので、以下のように使用できます:
responseXML プロパティ
サーバからの応答が XML であり、XMLオブジェクトとしてそれをパースしたい場合は、responseXML プロパティを使用します:
例
ファイル cd_catalog.xml をリクエストし、応答をパースします:
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt; |
Try it yourself »
|
onreadystatechange イベント
サーバへリクエストを送った時は、応答に基づきなんらかのアクションを実行します。
onreadystatechange イベントは、readyState が変化するたびに起動されます。
readyState プロパティは、XMLHttpRequest のステータスを保持しています。
XMLHttpRequest オブジェクトの 3 つの重要なプロパティ:
| プロパティ |
説明 |
| onreadystatechange |
readyState プロパティが変化するたびに自動的にコールする、関数(または、関数名)を格納します。 |
| readyState |
XMLHttpRequest のステータスを保持します。0 から 4 まで変化します:
0: リクエストは初期化されていない
1: サーバ・コネクションは確立された
2: リクエストが受信された
3: リクエストの処理中
4: リクエストは終了し応答は準備完了 |
| status |
200: "OK"
404: Page not found |
onreadystatechange イベントにおいて、サーバ応答の処理準備が完了したときにどうするかを指定します。
readyState が 4 で、ステータスが 200 の時に、応答の準備が完了しています:
例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
|
Try it yourself »
|
注: onreadystatechange イベントは、readyState が変化する都度 1 回、計 4 回起動されます。
 |
Try it Yourself - 他の例 |
getAllResponseHeaders() によるヘッダ情報取出し
リソース (ファイル) のヘッダ情報を取出します。
getResponseHeader() によるヘッダ情報取出し
リソース (ファイル) のヘッダ情報を取出します。
ASP ファイルのコンテンツ取出し
ユーザが入力フィールに文字をタイプしている間、ウェブページはどうウェブサーバとコミュニケートできるか。
データベースからコンテンツ取出し
WebページはどのようにXMLHttpRequestオブジェクトによってデータベースから情報を取り出すことができるか。
XML ファイルのコンテンツ取出し
XMLHttpRequestを作成して、XMLファイルからデータを取出し、HTMLテーブルにデータを表示します。
|