サーバとのデータのやり取りを「非同期通信」にして、ウェブページを書き換える。
ページ全体を読み直さずに、ページの一部分のみ書き換えることができる。
GoogleサジェストやGoogleマップなどに使われている。
IEだと「ActiveX」になる。
var x=new XMLHttpRequest();
new演算子を使ってオブジェクトを作成します。「x」は単なる変数名のため、なんでもよい。IEの場合 x=new ActiveXObject("Microsoft.XMLHTTP");
open("GET", "送信先URL", true);
「第一引数」getかpostなどを設定する。x.send();
サーバーからのデータを受信(レスポンス)し、受信データを表示するなど処理する。
x.onreadystatechange = function() {命令文}
「無名関数」を使い、引数はありません。状態を示す。データ受信が完了したかどうかを確認する。
| 値 | 状態 |
|---|---|
| 0 | 始まっていない |
| 1 | |
| 2 | リクエスト送信中 |
| 3 | 受信中 |
| 4 | 全受信完了 |
成功の場合x.readyState == 4
データ読み込み成功か，失敗か判別する。
| 値 | 状態 |
|---|---|
| 200 | 正常 |
| 401 | |
| 403 | |
| 404 | ファイルが見つからない |
| 500 | サーバーエラー |
成功の場合x.status == 200
responseTextプロパティ テキスト形式でデータを取得する。 オブジェクト名.responseText
responseXMLプロパティ XML形式でデータを取得する。 オブジェクト名.responseXMLif( x.readyState == 4 && x.status == 200 ) { alert( x.responseText ); }
if( 条件式 ){ 処理 } 条件式に合致していれば、{ }内の処理を行う
&& 両方正しければ
alert(); 表示する。
var x = new XMLHttpRequest(); // XMLHttpRequestのインスタンスを作成
x.open( "GET", "送信先URL" ); // 送信先URLやメソッドを設定します
x.send(); // リクエストをサーバに送信
x.onreadystatechange = function() {
if( x.readyState == 4 && x.status == 200 ) {
alert( x.responseText );
}
}
// データ受信、読み込み時の処理を設定
