Hatena::Groupjavascript

lnzntのJavaScript日記 このページをアンテナに追加 RSSフィード

2011年07月02日(土)

XMLHttpRequest

| 23:17 |  XMLHttpRequest - lnzntのJavaScript日記 を含むブックマーク はてなブックマーク -  XMLHttpRequest - lnzntのJavaScript日記  XMLHttpRequest - lnzntのJavaScript日記 のブックマークコメント

XMLHttpRequest の復習です。この辺もすっかり忘れたので簡単なサンプルを書いてみました。utils.js は昨日のコードの使いまわしです。(2011-07-01 - lnzntのJavaScript日記 - g:javascript)

実行確認は、Ubuntu Linux 11.04、Firefox 5.0 でしました。

HTML の「送信」ボタンを押すと JSON テキストをサーバから取ってきて、その中のメッセージの内容を HTML に表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>Ajax テスト</title>

    <style>
        body {
            background-color: #cccccc;
        }
    </style>
    <script src="utils.js"></script>
    <script>
        (function() {
            window.addEventListener('load', function() {
                var btn     = get_element('button');
                var disp    = get_element('disp');

                var listener = function(uri) {
                    var request = new XMLHttpRequest();
                    
                    request.onreadystatechange = function() {

                        if (this.readyState == 4) {
                            alert("status: " + this.status);
                            alert("responseXML: " + this.responseXML);
                            alert("responseText: " + this.responseText);

                            var res = eval('(' + this.responseText + ')');

                            disp.innerHTML = res['message'];
                        };
                    };

                    request.open('GET', uri);
                    request.send();
                };

                var uri = '/mysite/a.json';
                btn.add_listener('click', listener.curry(uri));
            }, false);
        })();
    </script>
</head>

<body>
    <form><input type="BUTTON" id="button" value="送信"/></form>
    <p id="disp"></p>
</body>
</html>

a.json の内容。

{
    message: "hello, JSON",
}

参考資料