登場して間もない最新版で学ぶ「Dojo Toolkit」

Hello Dojo! - XHRの発行

Dojoではdojo.xhr()をはじめとしたメソッドを使用してXHR(XMLHttpRequest)を発行する。

HTMLファイル - xhr.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Dojo XHR sample</title>
<script type="text/javascript" src="./js/dojo1.2/dojo/dojo.js"></script>
<script type="text/javascript">
<!--
dojo.addOnLoad
(
    function()
    {
        dojo.query('#content_submit').connect('onclick',
            function()
            {
                dojo.xhrGet
                (
                    {
                        url: './xhr.php',
                        content:
                        {
                            'query' : dojo.byId('content').value
                        },
                        load: function(data)
                        {
                            dojo.byId('result').innerHTML += data; 
                        },
                        error: function(error)
                        {
                            alert(error);
                        }
                    }
                );
            }
        );

    }
);
-->
</script>

</head>

<body>
    <p>
        <input type="text" id="content" value="">
        <input type="button" id="content_submit" value="submit">
    </p>

    <table border="1" width="400">
        <thead>
            <tr>
                <th>TimeStamp</th>
                <th>Contents</th>
            </tr>
        </thead>
        <tbody id="result">

        </tbody>
    </table>
</body>

</html>

PHPファイル - xhr.php

<tr>
    <td align="center"><?php echo date('Y/m/d H:i:s') ?></td>
    <td align="center"><?php echo htmlspecialchars(trim($_GET['query']),     ENT_QUOTES, 'UTF-8'); ?></td>
</tr>

ボタンをクリックすると入力した文字列をxhr.phpに送信し、結果をテーブルの中に追加する

今回使用したdojo.xhrGetは、以下のようなものである(Dojo API Documentaionより引用)。GETリクエストを行う場合に便利なメソッドだ。