Ajax XMLHttpRequest

http://skyunoe.blog.me/20108801554

Ajax를 구현하는 핵심 JavaScript 객체는 XMLHttpRequest이다.

Ajax가 추구하는 새롭고 놀라운 기능을 실제로 구현하기 위해서는 이 객체에 대해 완전히 익숙해 져야 한다.

 

아래는 XMLHttpRequest객체가 지원하는 Method 및 Properties들을 정리한 것이다.

 

Method

• open(): 새로운 요청을 서버에 설정함.
• send(): 요청을 서버에 전송함.
• abort(): 현 요청에서 벗어남.
• readyState: 현 HTML 준비상태를 제공함.
• responseText: 요청에 응답하기 위해 서버에서 재전송하는 텍스트.

Properties

• onreadystatechange : XMLHttpRequest객체의 상태가 변할 때 실행할 핸들러를 지정 한다.
• readyState : XMLHttpRequest객체의 생태가 변할 때 각 상태값을 반환한다.
• 0: (open()을 호출하기 전에는) 요청이 초기화 되지 않는다.
• 1: (send()를 호출하기 전에는) 요청은 설정은 되지만 보내지지 않는다.
• 2: 요청이 보내지고 처리 중에 있다. (이 시점에서 응답에서 콘텐트 헤더를 얻을 수 있다.)
• 3: 요청이 처리 중에 있다. 부분적인 데이터를 응답에서 사용할 수 있지만 서버는 이 응답으로는 종료되지 않는다.
• 4: 응답이 완료된다. 서버의 응답을 받고 이를 사용한다.
• responseText : HTTP 요청결과를 문자열 형태로 반환한다.
• responseXML: HTTP 요청결과를 XMLDocument 오브젝트로 반환한다.
• responseBody
• status: HTTP 응답코드를 반환한다. 성공일 경우 200
• statusText: HTTP 응답문자열을 반환한다. 성공인 경우 OK

 

사용법

 

1. 요청생성

function getXMLHttpRequest() {        var xmlreq = false;        if (window.XMLHttpRequest) {            // Create XMLHttpRequest object in non-Microsoft browsers           xmlreq = new XMLHttpRequest();        } else if (window.ActiveXObject) {            // Create XMLHttpRequest via MS ActiveX            try {                // Try to create XMLHttpRequest in later versions                // of Internet Explorer                xmlreq = new ActiveXObject("Msxml2.XMLHTTP");            } catch (e1) {                // Failed to create required ActiveXObject                try {                    // Try version supported by older versions                    // of Internet Explorer                    xmlreq = new ActiveXObject("Microsoft.XMLHTTP");                } catch (e2) {                    // Unable to create an XMLHttpRequest with ActiveX                }            }        }        return xmlreq;    }

 

2. 요청

function ajaxRequest() {

// req 객체반환

req = getXMLHttpRequest();

// 응답이 완료되면 자동으로 실행되도록 JavaScript 콜백 함수를 정의

var handlerFunction = "";

req.onreadystatechange = handlerFunction;

// 요청처리

req.open("POST", "test.php", true);

// 헤더 설정

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// POST일 경우 send에 아래와 같이 변수를 입력하고 GET일 경우 null입력

req.send("변수=값");

}

 

3. CallBack (요청에 대한 응답 처리)

function ajaxResponse() {

// only if req shows "loaded"

if (req.readyState == 4) {

// only if "OK"

if (req.status == 200) {

// do something...

} else {

alert("There was a problem retrieving the XML data:\n" + req.statusText);

}

}

}   [출처] [Ajax] XMLHttpRequest객체|작성자 깡통