XHR (XML Http Request)이란

• XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용
• 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있음 → 전체 페이지와는 독립적으로(비동기적) 데이터를 주고 받을 수 있음
• 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신 가능
• XMLHttpRequest 객체는 AJAX(Asynchronos Javascript And XML) 프로그래밍에 주로 사용
• XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용
• 요즘 XMLHttpRequest 객체는 XML 뿐 아니라, 모든 종류의 데이터를 받아오는데 사용 가능
• 현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장함
• HTTP 이외의 프로토콜도 지원 → file과 ftp 포함

XMLHttpRequest 객체의 생성

• 자바스크립트를 이용하여 XMLHttpRequest 객체를 생성하는 방법

  var xmlHttp = new XMLHttpRequest();

readyState 프로퍼티

• readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타냄
• readyState 프로퍼티의 값은 객체의 현재 상태에 따라 다음과 같은 주기로 변화
  1. UNSENT (숫자 0) → XMLHttpRequest 객체가 생성됨.
  2. OPENED (숫자 1) → open() 메소드가 성공적으로 실행됨.
  3. HEADERS_RECEIVED (숫자 2) → 모든 요청에 대한 응답이 도착함.
  4. LOADING (숫자 3) → 요청한 데이터를 처리 중임.
  5. DONE (숫자 4) → 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

status 프로퍼티

• status 프로퍼티는 서버의 문서 상태를 나타냄
  1. 200 → 서버에 문서가 존재함.
  2. 404 → 서버에 문서가 존재하지 않음.

XMLHttpRequest 객체의 전송

• 자바스크립트를 이용하여 XMLHttpRequest 객체를 전송하는 방법

  var xmlHttp = new XMLHttpRequest();                   // XMLHttpRequest 객체를 생성함.
  xmlHttp.onreadystatechange = function() {           // onreadystatechange 이벤트 핸들러를 작성함.
  
      // 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
      if(this.status == 200 && this.readyState == this.DONE) {
  
           // 요청한 데이터를 문자열로 반환함.
          document.getElementById("text").innerHTML = xmlHttp.responseText;            
      }
  };
  xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
  xmlHttp.send();

• XMLHttpRequest를 http를 이용한 예제
  • open이란 메소드를 이용해서 형식, url, 비동기여부(디폴트 : 비동기) 에 원하는 변수를 넣어줌
  • XMLHttpRequest.open(method, url[, async[, user[, password]]]) 형식
    1. 형식 타입 : "GET", "POST", "PUT", "DELETE"
    2. url : 요청 URL
    3. 비동기 여부 : true(비동기), false(동기), defalut(true)
    4. user : 암호화를 사용하는 경우 사용 default null
    5. password : 암호화를 사용하는 경우 사용 default null

       var xmlHttp = new XMLHttpRequest();
       xmlHttp.open("GET", "/examples/media/xml_httpxmlrequest_data.txt", true);
       xmlHttp.send();

responseText 프로퍼티

• responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 저장

  document.getElementById("text").innerHTML = xmlHttp.responseText;

responseXML 프로퍼티

• responseXML 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 XML DOM 객체로 저장

  xmlObj = xmlHttp.responseXML;                                    // 요청한 데이터를 XML DOM 객체로 반환함.
  nameList = xmlObj.getElementsByTagName("name");     // XML DOM 객체에서 요소이름이 "name"인 요소들을 선택함.
  result = "";
  
  for (idx = 0; idx < nameList.length; idx++) {
      // id가 "name"인 요소들의 텍스트 노드를 찾아 그 값을 반환함.
      result += nameList[idx].childNodes[0].nodeValue + "<br>";
  }
  
  document.getElementById("text").innerHTML = result;

• 위의 예제에서 사용된 programming_languages.xml 파일의 코드 예시

  <?xml version="1.0" encoding="UTF-8"?>
  <programming_languages>
      <language>
          <name>HTML</name>
          <category>web</category>
          <developer>W3C</developer>
          <version status="working draft">5.1</version>
          <priority rating="1">high</priority>
      </language>
      <language>
          <name>CSS</name>
          <category>web</category>
          <developer>W3C</developer>
          <version status="stable">3.0</version>
          <priority rating="3">middle</priority>
      </language>
      <language>
          <name korean="자바">Java</name>
          <category>application</category>
          <developer>Oracle</developer>
          <version status="stable">8.91</version>
          <priority rating="2">high</priority>
      </language>
      <language>
          <name korean="파이썬">Python</name>
          <category>application</category>
          <developer>Python</developer>
          <version status="stable">3.52</version>
          <priority rating="4">middle</priority>
      </language>
  </programming_languages>

비동기식(asynchronous) 요청

• 서버에 비동기식 요청을 보내기 위해서는 open() 메소드의 세 번째 인수로 true를 전달
• 비동기식으로 요청을 보내면 자바스크립트는 서버로부터 응답을 기다리면서 동시에 다른 일을 할 수 있음

  xmlHttp.open("GET", "/media/programming_languages.xml", true);

참고 URL : http://www.tcpschool.com/xml/xml_dom_xmlHttpRequest