AJAX - Server Response

Table of contents

1. Server Response
   1. Using a Callback Function
   2. Server Response Properties
   3. Server Response Properties

Server Response

Using a Callback Function

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

웹 사이트에 둘 이상의 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
}

Server Response Properties

• responseText

  서버 응답을 JavaScript 문자열로 반환하며 그에 따라 사용

  예제

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

• responseXML

  XMLHttpRequest 객체에는 XML parser가 있음

  responseXML특성은 서버 응답을 XML DOM 객체로 리턴, 이 특성을 사용해 응답을 XML DOM 오브젝트로 구문 분석 할 수 있음

  객체이기 때문에 객체처럼 다뤄줘야 함!!

  예제

    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();
  

  W3C Example

  XML DOM에서 더 알아보기

Server Response Properties

• getAllResponseHeaders()

  서버 응답에서 모든 헤더 정보를 리턴

  예제

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

• getResponseHeader()

  서버 응답에서 특정 헤더 정보를 리턴

  getAllResponseHeaders에서 일부 정보만 가지고 오고 싶을 때 사용!

  case-inseneitive 함

  예제

    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();
  

  W3C Example