libro
www.tuyano.com
初心者のための Node.jsプログラミング入門

Expressによるリクエスト処理の基本 (3/4)

作成:2013-05-21 08:24
更新:2015-08-13 13:55

■Ajaxでアクセスした情報をJSONで受け取る

最近は、フォームを使わず、Ajaxで必要な情報をサーバーから受け取ることのほうが多くなって来ました。フォームよりこちらの使い方のほうを覚えておいたほうがよいかも知れません。

Ajaxでのアクセスは、基本的にクライアント内のJavaScriptで行いますから、アクセスに関する処理をNode.jsのテンプレートやスクリプトに用意する必要はありません。通常のAjaxと同様にAjaxのスクリプトを書くだけです。

ただし、アクセスされた側（つまり、Ajaxでアクセスされた時のサーバー側の処理）については考えておく必要があります。単に必要な情報を書き出すだけなら、Responseの「send」を呼び出せばよいでしょう。
《Response》.send( 出力する値 );

たったこれだけでテキストやテンプレートの内容をクライアント側に送り返すことができます。また、もしJSONを使ってデータの返送を行いたいならば、「json」メソッドが便利です。
《Response》.json( JSON形式のデータ );

これでJSONデータを書き出して送ることができます。受け取った側で、テキストをJSON.parseして処理する場よいでしょう。

では、これも利用例を挙げておきましょう。先ほどのサンプルを使い、heloからAjax通信でアクセスし、JSONで送られた値を受け取って表示させてみます。先程と同様に、フォームの入力フィールドに何か書いてボタンをクリックしてみてください。ページ移動せず、その場で表示が更新されます。

helo.jsのrouter.postでは、送信された情報からinput1の値を取り出し、それをJSONデータにしてクライアントに送り返しています。以下の部分ですね。
var str = req.query.input1;
res.json(
    { msg: str }
);

「query」は、クエリー文字列がまとめられているプロパティでしたね。そこからinput1の値を取り出し、そしてRequestの「json」メソッドで送信をします。送るデータは、連想配列の形で引数に用意します。これで、変数strの値がmsgというキーで送られます。後は、Ajax通信のコールバック関数でJSON型式のデータを受け取って処理をしてやります。
var callback = function(){
    var target = document.getElementById("msg");
    var res = JSON.parse(ajax.getResponse());
    target.textContent = "you send::" + res.msg;
}

JavaScriptのJSON.parseで、Ajax通信で受け取った結果からgetResponseした値をパースし、そこからmsgの値を取り出します。JSONを利用すると、必要に応じて複数の値をサーバーから受け取ることができ、非常に便利です。ここではmsgだけですが、サーバー側で送る値を用意すれば、いくつもの値をまとめて送ることができます。

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

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※routes/helo.js

var express = require('express');
var router = express.Router();

/* GET helo page. */
router.get('/', function(req, res, next) {
    var p1 = req.query["p1"];
    var p2 = req.query.p2;
    var msg = p1 == undefined ? "" : p1 + "," + p2;
    res.render('helo', 
        {
            title: 'HELO Page',
            msg: msg,
            input: ''
        }
    );
});

/* POST helo page. */
router.post('/', function(req, res, next) {
    var str = req.query.input1;
    res.json(
        { msg: str }
    );
});

module.exports = router;


※views/helo.ejs

<!DOCTYPE html>
<html>
    <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script type="text/javascript">
    var ajax = null;
 
    function doAction(){
        var input = document.getElementById("input1");
        var callback = function(){
            var target = document.getElementById("msg");
            var res = JSON.parse(ajax.getResponse());
            target.textContent = "you send::" + res.msg;
        }
        ajax = new AjaxObject('/helo?input1=' + 
            input.value,callback);
    }

    function AjaxObject(url,callback){
        var response = null;
        var callback = callback;
         
        ajaxStart(url);

        this.getResponse = function(){
            return response;
        }
         
        function ajaxStart(url){
            var req =  createRequest();
            if (req == null){
                alert("実行できません！");
                return;
            }
            req.open("POST",url);
            req.setRequestHeader
                ("User-Agent","XMLHttpRequest");
            req.onreadystatechange = function(){
                if (this.readyState == 4 && 
                        this.status == 200){
                    precallback(this);
                }
            }
            req.send();
        }
         
        function createRequest(){
            var httplist = [
                function(){
                    return new XMLHttpRequest();
                },
                function(){
                    return new ActiveXObjct
                        ("Msxml2.XMLHTTP");
                },
                function(){
                    return new ActiveXObject
                        ("Microsoft.XMLHTTP");
                }
            ];
            for(var i = 0;i < httplist.length;i++){
                try {
                    var http = httplist[i]();
                    if (http != null) return http;
                } catch(e){
                    continue;
                }
            }
            return null;
        }
         
        function precallback(request){
            response = request.responseText;
            callback();
        }
    }
    </script>
</head>
<body onload="init()">
    <h1><%= title %></h1>
    <p id="msg"><%= msg %></a>
    <form id="form1" name="form1" method="post" action="/helo" 
            onsubmit="return false;">
        <input type="text" id="input1" name="input1"
            value="<%= input %>">
        <input type="button" id="btn" value="click" 
            onclick="doAction();">
    </form>
</body>
</html>
※関連コンテンツ

「初心者のための Node.jsプログラミング入門」に戻る