AJAX XMLHttpRequest Object

Table of contents

1. XMLHttpRequest Basic
   1. XMLHttpRequest Object
   2. Access Across Domains
   3. Create an XMLHttpRequest Object
   4. ActiveX for Older Browsers
   5. Create Object for All Browsers
   6. XMLHttpRequest Objext Methods
   7. XMLHttpRequest Objext Properties

XMLHttpRequest Basic

XMLHttpRequest Object

AJAX의 핵심

모든 최신 브라우저는 XMLHttpRequest 객체를 지원함

XMLHttpRequest 객체는 뒤에서 웹 서버와 데이터를 교환할 수 있어서 전체 페이지를 로드하지 않고도 웹 페이지의 일부를 업데이트 할 수 있음

Access Across Domains

보안상의 이유로 브라우저는 도메인간 엑세스를 허용하지 않기 때문에 엑세스 하려면 로드하려는 웹 페이지와 XML 파일이 모두 동일한 서버에 있어야 함

즉 AJAX를 사용하려면 XML 파일이 홈페이지와 동일한 자체 서버에 있어야함

Create an XMLHttpRequest Object

모든 최신 브라우저에는 내장 XMLHttpRequest객체가 있음

XMLHttpRequest 객체 생성 구문

ActiveX for Older Browsers

오래된 브라우저는 XMLHttpRequest객체 대신 ActiveX 객체를 사용함

ActiveX 객체 생성 구문

Create Object for All Browsers

따라서 모든 브라우저에서 XMLHttpRequest객체를 이용하기 위해 아래 구문을 사용함

IE5,6까지 처리하는 코드

if (window.XMLHttpRequest) {
   // code for modern browsers
   xmlhttp = new XMLHttpRequest();
 } else {
   // code for old IE browsers
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest Objext Methods

XMLHttpRequest Objext Properties

→ onreadystatechange함수는 readyState가 변경 될 때마다 호출

예제

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는 readyState가 4가 될때까지 4번 실행됨