XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (2/5)
作成:2013-02-24 10:03
更新:2013-02-24 10:03
更新:2013-02-24 10:03
■XHR2によるAjax通信の基本
では、XHR2では、どのようにしてAjax通信をするのか、その基本的な流れを説明しましょう。
1. 新規オブジェクトをnewで作成します。コンストラクタの名前はXMLHttpRequestのまま変わりはありません。
2. openで指定のアドレスへの接続を開始します。このopenも基本的には従来と同じです。
3. responseTypeプロパティで、やり取りするデータタイプを指定します。
4. onloadイベントプロパティに関数を設定します。通信を完了すると、このonloadに設定された関数が呼び出されます。
5. onloadの関数内では、this.responseでサーバーから送られたデータを取得できます。また正常に通信が終了したかどうかは、this.statusでステータスをチェックすることでわかります。
※XHR2のAjax通信の基本的な流れ
1. 新規オブジェクトをnewで作成します。コンストラクタの名前はXMLHttpRequestのまま変わりはありません。
2. openで指定のアドレスへの接続を開始します。このopenも基本的には従来と同じです。
3. responseTypeプロパティで、やり取りするデータタイプを指定します。
4. onloadイベントプロパティに関数を設定します。通信を完了すると、このonloadに設定された関数が呼び出されます。
5. onloadの関数内では、this.responseでサーバーから送られたデータを取得できます。また正常に通信が終了したかどうかは、this.statusでステータスをチェックすることでわかります。
※XHR2のAjax通信の基本的な流れ
var xhr = new XMLHttpRequest();ざっと流れがわかったでしょうか。――では、実際に簡単なサンプルを挙げておきましょう。下のリスト欄は、サーバーにあるdata.txtというテキストを読み込んで表示する簡単な例です。ボタンを押すと、doActionが呼び出され、そこでAjax通信を行なっています。ここでは、以下のような形でopenをしていますね。
xhr.open('GET', 'アドレス', true);
xhr.responseType = 'text';
xhr.onload = function(e) {
if (this.status == 200) {
var result = this.response; // データ取得
}
};
xhr.send();
xhr.open('GET', '/data.txt', true);第1引数はGETかPOSTかの指定、第2引数にアドレス、そして第3引数に非同期通信かどうかを示す真偽値をそれぞれ指定します。後は、onloadでthis.statusをチェックし、200(正常終了)ならthis.responseを取り出して表示しておしまいです。実に簡単!
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>タイトル</title> <style> h1 { font-size: 18pt; background: #AAAAEE; padding: 5px;} </style> <script type="text/javascript"> function doAction(e){ var xhr = new XMLHttpRequest(); xhr.open('GET', '/data.txt', true); xhr.responseType = 'text'; xhr.onload = function(e) { if (this.status == 200) { var result = this.response; document.querySelector("#msg").innerHTML = result; } }; xhr.send(); } </script> </head> <body> <header> <h1>XHR2 Sample</h1> </header> <article> <p id="msg"></p> <button onclick="doAction();">Click</button> </article> </body> </html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る