Ajax 호출 흐름과 기본적인 준비 운동 1/2

TeCHs-Computer/AJAX : 2007/10/05 19:54

Ajax도 실행에 관련된 메커니즘이 존재하겠죠.
이 메커니즘을 알아보려합니다.

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 값이 변화되는 것을 검사하는 것을 통해서 알 수 있습니다.

0 = 초기화 되지 않은 상태일때,
1 = 로딩중일때
2 = 로드이 완료되었을때
3 = 사용될 준비가 거의 되었을때
4 = 요청된 작업이 완료되었을때

거의 대부분의 작업을 4의 상태 (요청된 작업 완료되어 작업의 결과를 사용할 수 있는 상태)에 이르렀을때 처리를 하게 되고, 작업 중간에 다른 처리를 하고자 하면, 해당 상태에 맞는 작업 코드를 넣으면 됩니다. 그러면, 상태 변화시 호출되는 함수를 작성해보도록 하죠.
이 함수 이름은 readyStateChanged()라고 짓겠습니다.

function readyStateChanged()
{
   if (xmlHttp.readyState == 4) //요청된 작업이 완료 되었을때,
   {
   //완료후 행할 코드를 넣습니다.
}
}

그리고 중요한 것은 서버로 부터 요청된 작업이 잘 완료되었는지, 또는 아니면 요청한 주소의 페이지가 있는지 없는지 와 같은 서버 상태에 대한 코드를 얻을 수 있게 되는데요.
이것은 XMLHttpRequest 인스턴스의 status 값을 비교해보면 알 수 있습니다.
정상적으로 처리 된경우 200 입니다.

따라서 위의 readyStateChanged() 함수 내부를 조금 더 꾸며보죠.

function readyStateChanged()
{
   if (xmlHttp.readyState == 4) //요청된 작업이 완료 되었을때,
   {
   if (xmlHttp.status == 200) //서버로부터 정상처리가 됨을 응답받았을때
   {
//결과를 처리할 코드
}
}
}

자... 이제는 중요한 재료는 만들어 놨습니다. 이제는 조금 세부적인 정보(URL 등...)와 같은 것들을 지정해 주도록 하며, 실제로 요청을 하는 함수는 다음편에서 만들어 보도록 하죠.

'TeCHs-Computer > AJAX' 카테고리의 다른 글

AJAX 연결 라이브러리 구현하기~! (0)	2007/10/10
Ajax 호출 기반 서비스 서버 구축시 고려사항 (2)	2007/10/07
Ajax에서 상태 변화시 호출되는 함수를 함수명으로 지정하기. (0)	2007/10/05
Ajax 호출 흐름과 기본적인 준비 운동 2/2 (0)	2007/10/05
Ajax 호출 흐름과 기본적인 준비 운동 1/2 (0)	2007/10/05
Hello~! AJAX ... (2)	2007/10/02

☞ 이 글이 괜찮았나요? ^^ 아래의 손가락 버튼과 Mixup 버튼은 본 글에 대한 추천 버튼입니다. ☜

☞ 여러분들이 관심과 응원 그리고 사랑에 이코노와이드는 더욱더 힘을 냅니다!! ☜

세계 주식시장 동향

※ 경제, 경영, 재테크, 금융, 개인 금융에 대한 각종 정보와 소식 그리고 지식에 대한
글을 서비스하는 이코노와이드(EconoWide) 블로그의 각종 포스트 내용과 소식들을
무료로 이메일을 통해 편리하게 받아보실 수 있습니다.
구글 피드버너 (Google FeedBurner) 시스템에 의해 기사가 이메일로 배달됩니다.
이메일로 구독하는 방법 자세히 보기