AJAX - 서버 응답

강의 추천:

readyState onreadystatechange 속성

onreadystatechange 속성은 XMLHttpRequest의 상태를 유지합니다.

status 속성은 readyState가 변경될 때 실행되는 함수를 정의합니다. Http 메시지 참조 설명서 속성과

속성 설명
onreadystatechange 속성은 XMLHttpRequest 객체의 상태를 가지고 있습니다.
readyState

readyState 속성이 변경될 때 호출되는 함수를 정의합니다.

  • XMLHttpRequest의 상태를 저장했습니다.
  • 0: 요청이 초기화되지 않았습니다
  • 1: 서버 연결이 설정되었습니다
  • 2: 요청이 수신되었습니다
  • 3: 요청이 처리 중입니다
status
  • 4: 요청이 완료되고 응답이 준비되었습니다
  • 200: "OK"
  • 403: "Forbidden"

404: "Page not found" 완전한 목록을 원하면, 다음을 방문하십시오
Http 메시지 참조 설명서 statusText

상태 텍스트를 반환합니다(예 "OK" 또는 "Not Found") 많이

readyState가 변할 때마다 onreadystatechange 함수가 호출됩니다. readyState 는 4와status 는 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(); 
};

본인이 직접 시도해보세요

주의:onreadystatechange 다섯 번(0-4) 트리거됩니다. readyState 모두 변화합니다.

콜백 함수 사용

콜백 함수는 다른 함수에 매개변수로 전달되는 함수입니다.

如果你的网站中有多个 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) {
  // 여기서 행동을 작성합니다
 }; 
function myFunction2(xhttp) {
  // 여기서 행동을 작성합니다
 };

본인이 직접 시도해보세요

서버 응답 속성

속성 설명
responseText 문자열 형식의 응답 데이터를 가져옵니다
responseXML XML 데이터 형식의 응답 데이터를 가져옵니다

서버 응답 메서드

메서드 설명
getResponseHeader() 서버에서 특정 헤더 정보를 반환합니다
getAllResponseHeaders() 서버에서 모든 헤더 정보를 반환합니다

responseText 속성

responseText 속성은 서버 응답을 JavaScript 문자열 형식으로 반환하므로 다음과 같이 사용할 수 있습니다：

예제

document.getElementById("demo").innerHTML = xhttp.responseText;

본인이 직접 시도해보세요

responseXML 속성

XMLHttpRequest 객체는 내장된 XML 분석기를 가지고 있습니다.

ResponseXML XML DOM 객체로서 서버 응답을 반환할 수 있습니다.

이 속성을 사용하여 응답을해석XML DOM 객체에 대해

예제

요청 파일 music_list.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", "music_list.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();

본인이 직접 시도해보세요