Ajax에서 서버로부터의 응답을 확인하기
XMLHttpRequest 객체의 프로퍼티 3가지
- readyState 프로퍼티
- status 프로퍼티
- onreadystatechange 프로퍼티
readyState 프로퍼티
readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타냄
1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성
2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행
3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착
4. LOADING (숫자 3) : 요청한 데이터를 처리 중
5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료
status 프로퍼티
status 프로퍼티는 서버의 문서 상태를 나타냄
- 200 : 서버에 문서가 존재
- 404 : 서버에 문서가 존재하지 않음
onreadystatechange 프로퍼티
XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정
서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출됨
서버에 요청한 데이터가 존재하고, 서버로부터 응답이 도착하는 순간을 특정할 수 있음
EXAMPLE
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Ajax Response</title>
<script>
function sendRequest() {
var httpRequest = new XMLHttpRequest();
var currentState = "";
httpRequest.onreadystatechange = function() {
switch (httpRequest.readyState) {
case XMLHttpRequest.UNSET:
currentState += "XMLHttpRequest 객체상태는 UNSET 입니다.<br>";
break;
case XMLHttpRequest.OPENED:
currentState += "XMLHttpRequest 객체상태는 OPENED 입니다.<br>";
break;
case XMLHttpRequest.HEADERS_RECEIVED:
currentState += "XMLHttpRequest 객체상태는 HEADERS_RECEIVED 입니다.<br>";
break;
case XMLHttpRequest.LOADING:
currentState += "XMLHttpRequest 객체상태는 LOADING 입니다.<br>";
break;
case XMLHttpRequest.DONE:
currentState += "XMLHttpRequest 객체상태는 DONE 입니다.<br>";
break;
}
document.getElementById("status").innerHTML = currentState;
if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
document.getElementById("text").innerHTML = httpRequest.responseText;
}
};
httpRequest.open("GET", true);
httpRequest.send();
}
</script>
</head>
<body>
<h1>onreadystatechange 속성</h1>
<button type="button" onclick="sendRequest()">Ajax 요청 보내기!</button>
<p id="status"></p>
<p id="text"></p>
</body>
</html>
사진: Unsplash의KOBU Agency
728x90
반응형
'Ajax' 카테고리의 다른 글
| 서버에 요청(request)하기[AJAX개발] (0) | 2023.11.03 |
|---|---|
| AJAX-XMLHttpRequest 객체[AJAX개발] (0) | 2023.11.02 |
| AJAX-DOM, 노드, DOM API[AJAX] (0) | 2023.11.02 |
| Ajax 란? (0) | 2023.11.02 |
