Ajax 03

서버 응답 시의 처리 정의하기

XMLHttpRequest 객체를 생성할 수 있으면 다음은 콜백 함수를 등록한다. 콜백 함수란 XMLHttpRequest 객체에 의해 통신 상태가 변화되었을 때 호출되는 함수로, 예를 들어 다음과 같은 처리를 구현할 수 있다.

  • · 서버로부터 정상적인 응답을 받아들인 타이밍에 페이지의 갱신 처리를 실시한다.
  • · 서버로부터 에러가 반환되었을 경우에 에러 메시지를 표시한다.
  • · 서버에의 통신을 개시한 타이밍에 「통신중...」메시지를 표시한다.

콜백 함수를 정의하는 것은 onreadystatechange 프로퍼티의 역할이다. onreadystatechange 프로퍼티에서는

req.onreadystatechange = showResult;

위와 같이 미리 정의해둔 이름 부여 함수(함수 객체)를 정의할 수도 있으나, 다른 곳에서 같이 사용하지 않는다면 익명 함수로 지정하는 편이 편할 것이다.

우선 readyState/status 프로퍼티로 통신 상태나 응답 Status를 확인한다. readyState/status 프로퍼티의 반환값은 다음과 같다.


readyState 프로퍼티의 반환값

readyState 프로퍼티의 반환값
반환값 설명
0 미초기화(open 메소드가 호출되지 않음)
1 로드 중(open 메소드는 호출됐지만, send 메소드는 호출되지 않았다)
2 로드 완료(send 메소드는 호출됐지만, 응답 스테이터스/헤더는 미취득)
3 일부 응답을 취득(응답 스테이터스/헤더만 취득, 본체는 미취득)
4 모든 응답 데이터를 취득 완료

status 프로퍼티의 반환값(주요 응답 스테이터스)

status 프로퍼티의 반환값(주요 응답 스테이터스)
반환값 설명
200 OK (처리 성공)
401 Unauthorized(인증이 필요)
403 Forbidden(액세스가 거부되었다)
404 Not Found(레퀘스트된 자원이 존재하지 않는다)
500 Internal Server Error(내부 서버 에러)
503 Service Unavailable(요구한 서버가 이용 불가)

여기에서는 readyState 프로퍼티가 4(모든 응답 데이터를 취득)이며, status 프로퍼티가 200 (처리가 성공)인 경우에 서버로부터의 응답을 취득해 이것을 div id="result" 태그에 반영시키고 있다.

서버로부터의 응답을 취득하는 프로퍼티에는 responseText 프로퍼티와 responseXML 프로퍼티가 있는데, 일반적인 텍스트를 취득하려면 responseText 프로퍼티를 사용한다. 응답에 따라 각각 다음과 같은 메시지를 표시시킨다.

  • · 서버로부터 응담이 반환되지 않는(readyState 프로퍼티가 4 이외인) 경우
    → 「통신중...」이라는 진행 중임을 알리는 메시지
  • · 응답은 취득했으나 서버 측에서 무언가 에러가 발생하고 있는(status 프로퍼티가 200 이외인) 경우
    → 에러 메시지
							// 비동기 통신 시 처리(콜백 함수)를 정의
							req.onreadystatechange = function () {
								var result = document.getElementById('result');
								if (req.readyState == 4) { // 통신이 완료 시
									if (req.status ==200) { // 통신이 성공했을 경우
										result.innerHTML = req.responseText;
									}else {
										result.innerHTML = "서버 에러가 발생했습니다.";
									} // end of if sentence
								}else {
									result.innerHTML = "<img src='/florakid_study/images/ajax/ajax-loader.gif' alt='통신중' />"
								} // end of if sentence
							}