libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

XMLHttpRequest Level 2(XHR2)による次世代Ajax通信 (2/5)

作成: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通信の基本的な流れ
var xhr = new XMLHttpRequest();
xhr.open('GET', 'アドレス', true);
xhr.responseType = 'text';
xhr.onload = function(e) {
    if (this.status == 200) {
        var result = this.response; // データ取得
    }
};
xhr.send();
ざっと流れがわかったでしょうか。――では、実際に簡単なサンプルを挙げておきましょう。下のリスト欄は、サーバーにあるdata.txtというテキストを読み込んで表示する簡単な例です。ボタンを押すと、doActionが呼び出され、そこでAjax通信を行なっています。ここでは、以下のような形でopenをしていますね。
xhr.open('GET', '/data.txt', true);
第１引数はGETかPOSTかの指定、第２引数にアドレス、そして第３引数に非同期通信かどうかを示す真偽値をそれぞれ指定します。後は、onloadでthis.statusをチェックし、200(正常終了)ならthis.responseを取り出して表示しておしまいです。実に簡単！

※プログラムリストが表示されない場合

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プログラミング入門」に戻る