XMLHttpRequest(XHR) 객체 사용법-XMLHttpRequest 객체 생성, Callback 함수를 만들기, Request를 Open, Request를 Send

 

 

XMLHttpRequest(XHR) 객체 사용법

·       XMLHttpRequest 객체 생성

·       Callback 함수를 만들기

·       Request를 Open

·       Request를 Send

 

 

 

XMLHttpRequest 객체 생성

현재 대부분의 주요 웹 브라우저는 XMLHttpRequest 객체를 내장하고 있습니다. 이러한 XMLHttpRequest 객체를 생성하는 방법은 브라우저의 종류에 따라 두가지로 나눠집니다.

브라우저별로 객체생성하는 방법이 다릅니다. (IE는 버전별로 다르게 생성해야 합니다.)

 

·       XMLHttpRequest 객체를 이용한 방법

·       ActiveXObject 객체를 이용한 방법

 

 

XMLHttpRequest 객체를 이용한 방법

익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라에서는 XMLHttpRequest 객체를 사용합니다.

 

XMLHttpRequest 객체 생성하여 Request를 보낼 준비를 합니다.

var 변수이름 = new XMLHttpRequest();

var xhr = new XMLHttpRequest();

 

 

ActiveXObject 객체를 이용한 방법

익스플로러의 구형 버전인 5와 6 버전에서는 ActiveXObject 객체를 사용해야 합니다.

var 변수이름 = new ActiveXObject("Microsoft.XMLHTTP");

 

 

 

Callback 함수를 만들기

서버에서 Response가 왔을 때 실행되는 함수인 callback함수를 정의합니다.

xhr.onreadystatechange = function(){   if(xhr.readyState == 4){ //응답을 모두 받은 상태   var myDiv = document.getElementById('myDiv');   myDiv.innerHTML= xhr.responseText;   }   }

 

 

 

Request를 Open

HTTP method와 호출할 Server의 url 정보를 전달합니다.

xhr.open("GET", "user.do");

 

 

 

Request를 Send

요청이 서버로 보내집니다.

xhr.send();