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",
}

参考資料

2011年07月01日(金)

Canvas API (復習2) ドラッグ & ドロップ

23:55 | Canvas API (復習2) ドラッグ & ドロップ - lnzntのJavaScript日記 を含むブックマーク はてなブックマーク - Canvas API (復習2) ドラッグ & ドロップ - lnzntのJavaScript日記 Canvas API (復習2) ドラッグ & ドロップ - lnzntのJavaScript日記 のブックマークコメント

HTML の DIV 要素にファイルをドロップして表示するサンプルです。

参考書籍『HTML5 ガイドブック』のロジックを真似てつくったものですが、コード自体は原型を留めておりません。

実行確認は、Ubuntu Linux 11.04 の Firefox 5.0 でしてます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>お試し</title>
    <style>
        body {
            background-color: #999999;
        }
        #dp {
            width:              640px;
            height:             480px;
            background-color:   #cccccc;
            border:             #000000 5px solid;
        }
    </style>

    <script src="utils.js"></script>
    <script>
        (function() {
            /*
                window の load イベントハンドラ
            */
            window.addEventListener('load', function() {
                var dp = get_element('dp');

                var show_image = function(file) {
                    try {
                        dp.remove_children();

                        file.is_image().read_as_url({onload: dp.create_img.bind(dp)});

                    } catch (e) { alert(e); }
                };

                dp.prevent_default('dragover');
                dp.prevent_default('drop');
                dp.addDropEventListener(show_image);
            }, false);
        })();
    </script>
</head>

<body>
    <div id="dp">ここに画像をドラッグ</div>
</body>
</html>

JavaScript の関数は、以下の utils.js に書きました。

続きを読む