AJAX 쉽게 사용하는 방법

AJAX만큼 부풀려진 신 기술이 없을 것이다. 웹 개발에 조금이라도 관심이 있었던 개발자라면 AJAX를 들어보지 못한 사람이 없을 텐데, 정작 AJAX는 굉장히 어려운 신 기술로 인식되어 그 본질을 제대로 간파한 사람들이 별로 없는 것 같다. 그에 대한 증거는 서점에 널려있는 수많은 AJAX 관련 기술 서적이다. Javascript라면 모를까. AJAX가 책 한 권이라…? 아래 코드 세 조각이면 AJAX는 더 이상 없다.

ajax.js

function getXmlHttpObject()
{
var xmlHttp=null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

var xmlHttp;
var elementId;

function stateChanged()
{
if (xmlHttp.readyState == 4) {
document.getElementById(elementId).innerHTML = xmlHttp.responseText;
}
}

function ajaxDisplay(url, element_id)
{
elementId = element_id;
xmlHttp = getXmlHttpObject();
if (xmlHttp == null) {
return;
}
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}

ajax_test.html







값이 채워질 곳

ajax_response.php

< ?
print "helloworld";
? >

사용방법
1. ajax.js를 저장한다.
2. ajax_test.html에서 SCRIPT 태그를 이용하여 ajax.js를 포함시키고, 임의의 event handler에 ajaxDisplay() 함수가 실행되도록 한다. ajaxDisplay() 함수의 첫번째 parameter는 값을 만들어낼 웹페이지의 URL이고, 두번째 parameter는 값을 채워넣을 DOM 객체의 ID이다.
3. ajax_response.php는 웹서버에서 필요한 처리를 한 다음, AJAX를 통해 브라우저에게 텍스트를 전송함으로써 브라우저가 페이지를 새로 읽어들이지 않으면서 페이지를 갱신할 수 있도록 해준다.

예를 들어, 고객의 ID를 전송하여 고객의 전화번호를 받고 싶다면

ajaxDisplay("ajax_reponse.php?id=terzeron", "div_01");

로 지정하여 ID값을 서버에 전달하고 서버는 ID값에 대응되는 전화번호를 출력하면 된다.

답글 남기기 응답 취소