AJAX란? - 이벤트 종류

onreadystatechange 이벤트

XMLHttpRequest객체는 상태정보를 가지고 있는데 readyState 속성이 그 값을 가지고 있습니다.

그리고 우리는 이 상태 정보를 보고 응답이 왔는지, 그 응답이 정상적으로 왔는지 확인할 수가 있습니다.

이 readyState 가 변할 때마다 항상 발생하는 이벤트가 있는데 그것이 바로  onreadystatechange 이벤트입니다.

XMLHttpRequest 객체의 중요한 세 가지 속성은 아래와 같습니다.

속성	설명
onreadystatechange	readyState 속성값이 변할 때마다 자동으로 호출될 함수 또는 함수명을 저장합니다.
readyState	XMLHttpRequest 객체의 상태를 가지고 있고, 0 에서 4 의 값을 가집니다.  0: 요청이 초기화되지 않았습니다.  1: 서버와 연결되었습니다. 2: 요청이 받아들여졌습니다. 3: 요청이 진행중입니다. 4: 요청이 완료되고 응답을 받았습니다.
status	200: 정상 404: 페이지를 찾을 수 없습니다.

 onreadystatechange 이벤트가 발생하고 readyState가 4이며 status가 200이면 정상적으로 요청이 처리되어 응답이 온 경우이므로 이때 원하는 작업을 하시면 됩니다.

예제

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};

실습하기 »

Note: onreadystatechange 이벤트는 한번의 요청을 할 때 총 5번 발생합니다 (readyState가 0에서 4까지 바뀌므로).

---

Callback 함수 사용하기

callback 함수는 다른 함수의 파라미터로 넘겨지는 함수를 말합니다.

만약 웹사이트에 하나 이상의 AJAX 작업이 있다면, 단 하나의 표준 함수를 만들어서 XMLHttpRequest 객체를 생성하고 각각의 AJAX 작업이 있을 때마다 이 표준함수에서 호출함으로써 코드를 단순화 할 수 있습니다.

표준함수는 각각의 AJAX작업을 하는 함수를 파라미터로 넘겨받아서 이를 처리하게 됩니다.

예제

function loadDoc(cFunc) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    cFunc(xhttp);
  }

실습하기 »