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 함수는 다른 함수의 파라미터로 넘겨지는 함수를 말합니다.
만약 웹사이트에 하나 이상의 AJAX 작업이 있다면, 단 하나의 표준 함수를 만들어서 XMLHttpRequest 객체를 생성하고 각각의 AJAX 작업이 있을 때마다 이 표준함수에서 호출함으로써 코드를 단순화 할 수 있습니다.
표준함수는 각각의 AJAX작업을 하는 함수를 파라미터로 넘겨받아서 이를 처리하게 됩니다.
function loadDoc(cFunc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cFunc(xhttp);
}
| [jQuery] 3. Selectors ( 셀렉터 ) (0) | 2016.06.12 |
|---|---|
| AJAX란? - 데이터베이스 (0) | 2016.06.12 |
| AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |
| AJAX란? - 서버로 요청하기 (1) | 2016.06.12 |
| Ajax 란? - Ajax 시작하기 (1) | 2016.06.12 |