Node.js | Express에 의한 요청 처리 기본 | Ajax으로 액세스한 정보를 JSON으로 받기


최근에는 폼을 사용하지 않고 Ajax으로 필요한 정보를 서버로부터 받는 경우가 많아지고 있다. 폼보다 이것을 사용하는 것 기억해 두는 편이 좋을지도 모릅니다.

Ajax에서 액세스는 기본적으로 클라이언트에서 JavaScript로 실시하기 때문에, 액세스에 대한 처리를 Node.js의 템플릿과 스크립트를 준비할 필요는 없다. 일반적인 Ajax와 마찬가지로 Ajax 스크립트를 적 작성하면 된다.

다만, 액서스한 측(즉, Ajax에서 액세스되었을 때 서버 측의 처리)에 대해 생각해야 하는 필요가 있다. 단순히 필요한 정보를 내 보낼 정도라면 Response의 “send"를 호출하면 된다.

"Response".send(출력 값);

단지 이것만으로 텍스트나 템플릿의 내용을 클라이언트에 다시 보낼 수 있다. 또한 만약 JSON을 사용하여 데이터 반환을 하고자 한다면, “json” 메소드가 편리하다.

"Response".json(JSON 형식의 데이터);

이것으로 JSON 데이터를 써서 보낼 수 있다. 수신 측에서는 텍스트를 JSON.parse하고 처리하며 된다.

그럼 이도 사용할 예를 들어 둔다.

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>

방금 전에 예제을 사용하여, 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뿐이지만, 서버 측에서 보내는 값을 만들면, 여러 개의 값을 함께 보낼 수 있다.