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