Ajax란 무엇이도냐 (Asynchronous JavaScript and XML)
브라우저가 -request->서버에 전송하는 방법은
1. Form
2. Link (<a>)
3. 주소창에 입력
Web이라는 환경 안에서는 browser가 서버에 request를 보내는 방법이 없었습니다. (url로 요청을 해야겠지요?)
request를 보내면, response를 받아서 browser가 refresh를 합니다. (그러면 기존에 있는 화면을 전체 변경 하겠지요)
4. XMLHttpRequest라는게 새롭게 추가되었지요. (programming으로 변경 javascript로) javascript로 request를 발생시킬 수 있는...
왜 XML이 붙어있을까? request를 보낼때 url이라고 보내는데 (parameter가 포함되어 있겠지요? 1+2를 한다면 숫자 1,2 가 같이 전달) 하면
business로직을 server단에서 처리해서 3의 값을 전달합니다.
최근에는 XML이 아닌, JSON위주로 변경이 되고 있다.
11 + 22 = 33
으로 할때 변경되는 결과가 33뿐이 추가가 안되는데 전체를 새로 그린다.
만약에 틀이 그대로고 전체 컨텐츠가 변경이 되면 전체를 다시 그리는게 맞지만,
위 경우에는 33만의 값이 바뀌기 때문에 낭비이다.
화면은 그대로 두고 서버에 요청했을때 최종 결과물 33만 받아오면 어떻게 될까 ?
이게 더 효율적이겠지요.
위 방법을 하려고 하면 client를 수정해야 합니다.
<form을 제거를 한다. 제거를 하고 나면 제출하는 기능이 상실이 되기 때문에, 그 기능을 우리가 직접 구현
app.all('/plus.do', function(req, res){
var p1 = req.param('p1');
var p2 = req.param('p2');
var result = parseInt(p1) + parseInt(p2);
fs.readFile('./ejs/plus.ejs.html', 'utf-8', function(err, data){
var html = ejs.render(data, {p1:p1, p2:p2, result:result});
res.send(html);
});
});
<form method="GET" action="plus.do" >
<input type="text" name="p1"/>
<label>+</label>
<input type="text" name="p2"/>
<input type="submit" value="="/>
<input type="text"/>
</form>
UI와 Business Logic이 완전히 구분이 됩니다. 이제는 Document를 보내는게 아니고, 특정 원하는 값만 전달하기 때문에 자원 낭비가 없다.
send를 할때는 문자를 보내줘야 하기 때문에 숫자 + ''로 전달함. 숫자만 전달하면 (status로 인식함)
app.get('/plus_ajax.do', function(req, res) {
var p1 = req.param('p1');
var p2 = req.param('p2');
var result = parseInt(p1) + parseInt(p2);
res.send(result+'');
});
<script type="text/javascript">
window.onload = function() {
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var result = document.getElementById("result");
btn.onclick = function() {
var url = "/plus_ajax.do?p1=" + p1.value + "&p2=" + p2.value;"
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) { // end condition
result.value = xhr.responseText
}
}
xhr.open('GET', url, true); // 비동기적으로 호출해줘
xhr.send();
}
}
<body>
<input type="text" id="p1"/>
<label>+</label>
<input type="text" id="p2"/>
<input type="button" value="=" id="btn"/>
<input type="text" id ="result"/>
</body>
readState 는
0 init
1 connection
2 sending
3 receiving
4 complete
send()하게 되면 block이 되는데, 방법을 방지하기 위해서 open할때 parameter 값으로 true를 넘겨주면 UI쪽은 그대로 동작을 합니다.
'Programming > 웹프로그래밍' 카테고리의 다른 글
| [NodeJs] Web Socket (0) | 2016.03.18 |
|---|---|
| [NodeJs] 외부 모듈 사용하기 (0) | 2016.03.18 |
| [NodeJs] Express 프로젝트 시작하기 (MVC Pattern / ejs) (0) | 2016.03.17 |
| [NodeJs] 외부모듈활용 - Express를 활용해 간단한 Framework 만들기. (그 외 유용한 모듈) (3/3) (0) | 2016.03.17 |
| [NodeJs] 외부모듈활용 - Express를 활용해 간단한 Framework 만들기. (Router/GET/POST) (2/3) (0) | 2016.03.17 |