back
XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (2/5)
■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);第１引数はGETかPOSTかの指定、第２引数にアドレス、そして第３引数に非同期通信かどうかを示す真偽値をそれぞれ指定します。後は、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>
| << 前へ | 次へ >> |