AJAX (Asynchronous Javascript and XML)
Ajax의 영문으로 보아서 javascript와 XML을 사용한 어떤 언어 같이 느껴질수 있다.
물론 javascript와 XML을 사용하지 않는것은 아니다. 당연히 Ajax에서 javascript와 XML은 많은 부분을 차지한다. 그러나 그 외에도 DOM, JSON 등 복합적으로 사용되는것이 Ajax이다.
이름으로 보아서는 새로운 방식의 언어라고 생각할수도 있을지 모르지만 우리가 예전부터 익히 사용해 왔던 DHTML을 기본으로 여러가지 기능이 추가된 언어라고 생각하면 될듯하다.
DHTML은 Dynamic HTML 즉 DOM을 사용해서 문서를 동적으로 변화시키는 방식인데 Ajax는 DHTML을 많이 사용한다.
Ajax와 기존의 방식과 차이점
기존의 사이트 방식의 경우에는 웹브라우저가 웹서버에 요청을 하면, 웹서버는 서버사이드 언어(ASP, JSP, PHP, PERL 등)를 사용하여 사용자의 요청에 대한 결과를 HTML파일로 생성해서 다시 웹브라우저에 전송하는 방식이다. 즉, A.html(요청) 에서 B.html(결과)로 페이지가 바뀌었다.
Ajax에서는 웹브라우저가 아닌 XMLHttpRequest 객체가 웹서버와 통신을 한다. 웹브라우저가 웹서버에 요청을 하는 방식이 XMLHttpRequest로 요청을 한다. XMLHttpRequest는 서버로의 요청을 백그라운드로 하므로 페이지가 바뀌지 않는다. 페이지는 바뀌지 않고 페이지의 보이지 않는 곳에서 서버와의 통신을 한다는 말이다. XMLHttpRequset가 서버로의 요청을 하면, 요청을 받은 서버는 서버사이트 언어를 사용하여 요청에 대한 결과를 XML이나 단순 텍스트로 생성해서 다시 XMLHttpRequest로 전송한다. 서버로 부터 응답이 도착하면 XMLHttpRequest는 javascript 와 DOM을 사용해서 브라우저에 반영시킨다. 결과적으로 백그라운드에서 요청,응답을 하고 DOM을 사용해서 화면을 변화시키므로 페이지의 이동이 없다. 페이지의 이동이 없다는 것이 Ajax의 가장 큰 장점이자 특징중의 하나이다.
Ajax를 위한 준비
그럼, Ajax를 하기위해서는 무엇이 필요한걸까?
Ajax에서 직접적으로 가장 많이 사용되는 것이 javascript 와 DOM이다.
Javascript와 DOM(Document Object Model)은 필수적으로 알아야 한다. 웹사이트를 제작해 본 경험이 있는 분들은 Javascript와 DOM에 대해서 어느정도는 알고 있으리가고 보지만 혹시 모르시는 분들이 있을경우에는 사이트를 참조해서 어느정도 Javascript와 DOM에 익숙해져야 Ajax를 배우는데 한결 쉽게 느껴질것이다.
그외에도 CSS, XML, JSON 과 서버사이드 언어(ASP, PHP, JSP, PERL 등)도 알고 있다면 더 쉽게 이해할수 있을것 같다.
Ajax 프로그램의 흐름
웹문서로 부터 함수를 호출
Ajax로 웹서버와 통신하기 위해 XMLHttpRequest 의 객체 생성
웹문서로 부터의 값을 전송. open, send 함수를 사용
웹서버로부터 응답이 도착하면 DOM으로 화면에 반영. responseText, responseXML 함수 사용
예)
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8” />
<title>Ajax 연습</title>
<script>
function getXMLHttpRequest() {
// XMLHttpRequest 객체를 생성
}
function getUserRequest() {
var HttpRequest = getXMLHttpRequest(); // XMLHttpRequest 객체를 호출
var name = document.getElementById(“name”); // DOM을 사용하여 ID가 name 인 값을 가져옴
var url = “/xxx.php?name=”+ name; // 실행할 파일명. 값도 함께 전송
HttpRequest.open(“GET”,url,true); // open으로 요청을 초기화
HttpRequest.onreadystatechange = updatePage; // 서버 응답시 처리할 함수
HttpRequest.send(null); // 서버에 요청을 전송
}
function updatePage() {
// 서버 응답으로부터의 처리, DOM을 사용하여 Display 에 값을 넣음
var value = HttpRequest.responseText; // responseText를 이용하여 값을 가져옴
document.getElementById(“display”).innerHTML = value; // innerHTML을 이용하여 값을 넣음
// 서버에서 값을 가져왔다고 가정. 현재 상태로는 서버사이드의 파일이 없는 관계로 에러가 발생함
}
</script>
<style>
</style>
</head>
<body>
<input type=”text” id=”name” />
<input type=”button” onclick=”getUserRequest();” />
<div id=”display”></div> <!-- <div> </div> 사이에 서버로 부터 받은 값이 입력된다. -->
</body>
</html>
먼저, body 태그 안에 있는 button 을 클릭하면 getUserRequest 함수를 실행한다. 이 함수를 실행하면 ajax 를 실행하기 위해서 getXMLHttpRequest 함수를 실행해서 XMLHttpRequest 객체를 생성한다. 생성된 XMLHttpRequest 객체의 open 과 send 를 사용하여 웹서버에 요청을 한다. 웹서버로부터 응답이 오면 onreadystatechange 상태의 변화가 생겨 updatePage 함수를 실행한다. updatePage함수에서는 responseText를 이용하여 서버로부터의 값을 가져온 후DOM의 innerHTML을 이용해서 id가 display 인곳에 서버로 부터 받은 값을 입력한다.