이 메커니즘을 알아보려합니다.
Ajax는 javascript 기반을 작동을 시행하고 처리합니다.
이름도 Asynchronous Javascript and XML 이니까요.
Javascript는 기본적인 부분 정도는 아신다는 가정하에 진행하겠습니다.
변수 선언, 함수선언.. 그리고 이벤트 처리 등.. 과 같은 것들을요.
우선 사용자가 짜 놓은 HTML 코드에서 이벤트가 발생을 하면,
예를들어, 버튼이 클릭되었다던가 하는 거요.
자~ 그러면, 다음부터는 소스코드를 하나씩 놓고 보면서 생각해봅시다.
첫번째로 만들 소스코드는 Ajax 통신을 할 수 있는 객체를 생성하여 초기화 해주는 것입니다.
생성이라면 XMLHttpRequest 객체를 생성 하는 것이고,
생성된 객체를 브라우저의 종류(익스플로러 계열, 네스케이프 계열, 오페라 계열 등등)에 맞게
초기화 해줍니다.
//XMLHttpRequest 객체의 인스턴스를 담을 변수
var xmlHttp;
function getXmlHttpRequestObject()
{
if (window.ActiveXObject) { //브라우저가 익스플로러 계열일 경우
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) { //네스케이프, 오페라 계열일 경우
xmlHttp = new XMLHttpRequest();
} else {
//익스플로러 계열중 설치된 MSXML, the Microsoft XML parser의 버전이
//위의 것과 다를 경우.
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
위의 getXmlHttpRequestObject() 함수를 실행하고 나면,
xmlHttp 변수에 XmlHttpReqeust 타입의 객체가 셋팅되겠죠?
그럼 비행기의 껍데기를 만들었으니 이제는 비행기의 내부를 채워보죠.
이 비행기 내부를 채울 함수는 callXMLRequest() 라고 짓겠습니다.
그리고, XmlHttpRequestObject 객체는 자신에게 지정된 상태 변화 함수를 자신의 상태가 변할때 마다 호출하게 됩니다. 그리고 그 상태 변화 함수 내부에서 XMLHttpRequest 객체 인스턴스 변수의 readyState 값이 변화되는 것을 검사하는 것을 통해서 알 수 있습니다.
1 = 로딩중일때
2 = 로드이 완료되었을때
3 = 사용될 준비가 거의 되었을때
4 = 요청된 작업이 완료되었을때
거의 대부분의 작업을 4의 상태 (요청된 작업 완료되어 작업의 결과를 사용할 수 있는 상태)에 이르렀을때 처리를 하게 되고, 작업 중간에 다른 처리를 하고자 하면, 해당 상태에 맞는 작업 코드를 넣으면 됩니다. 그러면, 상태 변화시 호출되는 함수를 작성해보도록 하죠.
이 함수 이름은 readyStateChanged()라고 짓겠습니다.
{
if (xmlHttp.readyState == 4) //요청된 작업이 완료 되었을때,
{
//완료후 행할 코드를 넣습니다.
}
}
그리고 중요한 것은 서버로 부터 요청된 작업이 잘 완료되었는지, 또는 아니면 요청한 주소의 페이지가 있는지 없는지 와 같은 서버 상태에 대한 코드를 얻을 수 있게 되는데요.
이것은 XMLHttpRequest 인스턴스의 status 값을 비교해보면 알 수 있습니다.
정상적으로 처리 된경우 200 입니다.
따라서 위의 readyStateChanged() 함수 내부를 조금 더 꾸며보죠.
{
if (xmlHttp.readyState == 4) //요청된 작업이 완료 되었을때,
{
if (xmlHttp.status == 200) //서버로부터 정상처리가 됨을 응답받았을때
{
//결과를 처리할 코드
}
}
}
자... 이제는 중요한 재료는 만들어 놨습니다. 이제는 조금 세부적인 정보(URL 등...)와 같은 것들을 지정해 주도록 하며, 실제로 요청을 하는 함수는 다음편에서 만들어 보도록 하죠.
