AJAX - 서버 응답
onreadystatechange 속성
readyState 속성 은 XMLHttpRequest의 상태를 유지합니다.
onreadystatechange 속성 은 readyState가 변경될 때 실행할 함수를 정의합니다.
status 속성과 statusText 속성은 XMLHttpRequest 객체의 상태를 유지합니다 .
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
onreadystatechange 함수는 readyState가 변경될 때마다 호출됩니다.
readyState가 4이고 상태가 200이면 응답이 준비된 것입니다.
예시
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
위의 예에서 사용된 "ajax_info.txt" 파일은 간단한 텍스트 파일이며 다음과 같습니다.
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
onreadystatechange 이벤트는 readyState의 각 변경 사항에 대해 한 번씩 네 번(1-4) 트리거됩니다.
콜백 함수 사용
콜백 함수는 다른 함수에 매개변수로 전달되는 함수입니다.
웹 사이트에 둘 이상의 AJAX 작업이 있는 경우 XMLHttpRequest 객체를 실행하기 위한 하나의 함수와 각 AJAX 작업에 대해 하나의 콜백 함수를 만들어야 합니다.
함수 호출에는 URL과 응답이 준비되었을 때 호출할 함수가 포함되어야 합니다.
예시
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
서버 응답 속성
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
서버 응답 방법
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
responseText 속성
responseText 속성은 서버 응답을 JavaScript 문자열로 반환하며 이에 따라 사용할 수 있습니다.
예시
document.getElementById("demo").innerHTML = xhttp.responseText;
responseXML 속성
XML HttpRequest 객체에는 내장된 XML 파서가 있습니다.
responseXML 속성 은 서버 응답을 XML DOM 개체로 반환합니다.
이 속성을 사용하여 응답을 XML DOM 객체로 구문 분석할 수 있습니다.
예시
cd_catalog.xml 파일을 요청하고 응답을 구문 분석합니다.
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
이 튜토리얼의 DOM 장에서 XML DOM에 대해 더 많이 배울 것입니다.
getAllResponseHeaders() 메서드
getAllResponseHeaders() 메서드 는 서버 응답에서 모든 헤더 정보를 반환합니다.
예시
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
getResponseHeader() 메서드
getResponseHeader() 메서드 는 서버 응답에서 특정 헤더 정보를 반환합니다.
예시
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();