* 이번 예제는 생활코딩 JQuery 강좌 중 Ajax 파트의 예제를 참고하였습니다.
1. Express를 통한 프로젝트 생성
이전 글과 동일하게 express-generator를 통해 Express 프로젝트를 하나 생성합니다. 다만 Express를 처음 설치 템플릿 엔진을 Jade 대신 EJS를 사용하여 생성하도록 하겠습니다. 그 이유는 EJS가 기존 html과 유사하기 때문입니다. 생성 방법은 아래와 같습니다.$ express MyApp --ejs그럼 아래와 같이 EJS 템플릿 엔진으로 프로젝트가 생성이 됩니다.
2. 클라이언트 사이드
클라이언트 사이드 코드는 생활코딩 강좌의 예제와 동일합니다. 프로젝트의 views 폴더 밑의 index.ejs 파일에 아래의 코드와 같이 버튼을 하나 만들고 그에 대한 클릭 이벤트 처리를 해줍니다. 클릭 이벤트 발생 시 text 타입의 input 태그의 값을 JSON에 담아 POST 방식으로 서버 쪽으로 전달합니다.<html>
<head>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<input type="text" id="msg" />
<input type="button" id="ajax_test" value="ajax_test" />
<div id="result"></div>
<script>
$('#ajax_test').click( function() {
$('#result').html('');
$.ajax({
url: 'http://localhost:3000/ajax',
dataType: 'json',
type: 'POST',
data: {'msg':$('#msg').val()},
success: function(result) {
if ( result['result'] == true ) {
$('#result').html(result['msg']);
}
}
});
})
</script>
</body>
</html>
3. 서버 사이드(node.js, express) 모듈 작성
Express에서 요청을 처리합니다. 일단 클라이언트에서의 요청을 처리할 모듈을 하나 만들어줍니다. 저는 프로젝트의 routes 폴더 밑에 ajax.js라는 파일을 작성하였습니다. 코드는 단순히 전달받은 msg의 값에 [에코]라고 붙여주고 이를 반환해줍니다. 추가적으로 result라는 키 값에 true를 담아줍니다.var express = require('express');
var router = express.Router();
/* POST 호출 처리 */
router.post('/', function(req, res, next) {
console.log('POST 방식으로 서버 호출됨');
var msg = req.body.msg;
msg = '[에코]' + msg;
res.send({result:true, msg:msg});
});
module.exports = router;
4. 서버 사이드(node.js, express) 모듈 호출 설정
이제 작성한 ajax.js 모듈을 클라이언트에서 호출할 수 있도록 설정합니다. app.js 파일을 열어서 일단 상단 부분에 다음과 같은 코드를 추가합니다.var ajax = require('./routes/ajax');
이는 해당 모듈을 불러오는 코드입니다. 이렇게 불러온 모듈을 url을 통해 호출할 수 있도록 설정해줍니다.
app.use('/ajax', ajax);
위와 같이 코드를 추가하면 http://localhost:3000/ajax라는 URL을 통해서 우리가 작성한 ajax.js 모듈을 호출할 수 있습니다.
5. 테스트
이제 http://localhost:3000으로 접속을 하여 테스트를 하면 다음과 같이 동작을 합니다.
