[AJAX] XMLHttp 간단 요약 가이드

1. XMLHttp Request 객체 생성

var xmlRequest = null;
if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }  /* IE 일 경우 */
else if (window.XMLHttpRequest) { xmlRequest = new XMLHttpRequest(); } /* Mozila 일 경우 */

2. XMLHttp 메소드

void open(string method, string url, boolean asynch, string username, string password)
  요청에 대한 옵션을 설정해 해당 연결을 오픈 한다.

method - GET | POST | PUTurl - 요청 서버 URL
asynch - 비동기/동기 선택 (default true - 비동기)

void send(content)
  실질적으로 요청을 서버로 보낸다.
  비동기 요청 - 바로 리턴
  동기 요청 - 응답 시까지 대기

content
  open("POST") 의 경우 : 요청 시 HttpRequest body로 전달 할 데이터(옵션).
    - DOM 객체, input stream, string 값
  open("GET")의 경우 : null 값을 넣어주면 된다.

void setRequestHeader(string header, string value)
  HttpRequest   헤더에 값을 설정 한다. 반드시 open() 메소드 다음에 위치해야 한다.

header : 설정 또는 수정 할 변수 명
value : 할당할 값

void abort()
  요청을 중지한다.

3. XMLHttp 속성

onreadystatechange
  자바스크립트 콜백 함수(funtion pointer)를 설정한다.
  * 여기에 설정된 콜백 함수는 readyState 값이 변동될 때 마다 호출된다.

readyState
  요청의 상태를 돌려준다.
    0 = uninitialized
    1 = loading
    2 = loaded
    3 = interactive
    4 = complete
responseText
  서버의 응답을 string 형식으로 돌려준다.

responseXML
  서버의 응답을 DOM 객체로 파싱 가능한 XML 객체로 돌려준다.

status
  서버로 부터 받은 HTTP 상태코드이다.
  200 : OK
  404 : NOT Found

statusText
  HTTP 상태코드에 대한 텍스트 값이다.

4. 예제

function processReqChange() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            // ...processing statements go here...
        } else {
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}

좀더 자세한 내용 : Dynamic HTML And XML : The XMLHttpRequest Object 참조