[기초] AJAX - XMLHttpRequest 객체

AJAX - XMLHttpRequest 객체에 대해

서버에 백그라운드로 데이터를 보내기에 앞서 3가지 중요한 XMLHttpRequest  객체의 속성에 대해 살펴본다.

onreadystatechange 속성

서버에 요청을 보낸 뒤 서버로부터 데이터를 되돌려 받을 함수가 필요하다.(주: 경기시작과 함께 포수가 투수에게 공을 준 뒤 다시 투수가 던지는 공을 받기 위해 글로브를 벌려둔 상태라고 상상하자. 언제든지 공을 받을 준비가 되어있어야 한다.)

onreadystatechange 속성은 서버로부터의 응답을 처리할 함수를 저장한다. 자동으로 호출되는 속성 내에 이 함수를 저장한다.

다음의 코드는 onreadystatechange 속성을 설정하고 빈 함수를 저장한다.

xmlhttp.onreadystatechange=function()
{
// 여기에 어떤 코드를 작성할 것이다.
}

readyState 속성

readyState 속성은 서버의 응답에 대한 상태를 가진다.

readyState 속성이 바뀔 때마다, onreadystatechange 함수를 실행한다.

readyState 속성이 가지는 값은 아래와 같다.

상태	설명
0	초기화되지 않은 요청
1	값이 설정된 요청
2	요청이 보내짐
3	요청을 처리 중
4	요청이 완료 됨

onreadystatechange 함수에 If 문을 초가해서 응답이 완료되었는지 테스트한다. (이 말은 이제 데이터를 얻을 수 있다는 것이다.)

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  // 서버응답으로부터 얻은 데이터
  }
}

responseText 속성

서버로부터 돌려받은 데이터는 responseText 속성으로 불러온다.

이제 "시간" 입력 필드를 responseText와 동일한 값으로 채우고 싶다.

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}

다음 장에서는 어떻게 서버에 데이터를 요청하는지에 대해 알아본다.