Ajax‎ > ‎

XMLHttpRequest



객체의 생성


var xmlHttp;
if (window.XMLHttpRequest) {      // for IE7+, Firefox, Chrome, Opera, Safari
    xmlHttp = new XMLHttpRequest();
} else {                          // for IE6, IE5
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}


요청 전송

  • open(method, url, async)
    요청 방식과 주소 비동기 여부를 설정한다. 전송할 데이터량이 적은 경우에는 GET 방식을 사용하고, 많은 경우에는 POST 방식을 사용한다. AJAX는 비동기 방식으로 처리하는 것을 주목적으로 하므로 특별한 경우가 아니라면 async 값은 true로 설정한다.
  • send(string)
    서버로 요청을 전송한다. GET 방식에서는 url 주소에 전송할 데이터가 포함되므로 매개변수 없이 사용한다.
  • setRequestHeader(header, value)
    POST 방식으로 전송하는 때에는 헤더 값을 설정해야 한다.

GET

비동기 방식으로 응답을 처리하기 위해서 open() 메서드의 마지막 인수는 true로 지정해야 한다. GET방식으로 전송하는 경우에는 send() 메서드의 매개변수는 필요하지 않다.
xmlHttp.open("GET", "serverProcedure.php?param1=13534&param2=368&t=" + Math.random()", true);
xmlHttp.send();

POST

비동기 방식으로 응답을 처리하기 위해서 open() 메서드의 마지막 인수는 true로 지정해야 한다. send() 메서드의 메개변수에 전송할 데이터를 입력한다.
xmlHttp.open("POST","serverProcedure.php", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("param1=6548568&param2=30876");


응답 확인

  • onreadystatechange
    이벤트 핸들러. Ajax 객체의 준비 상태가 변경될 떄마다 실행될 함수를 지정해 둔다.
  • readyState
    Ajax 객체의 상태 값.
        0 : 요청이 초기화 되지 않음.
        1 : 서버와 연결됨. 로딩중.
        2 : 요청을 받음. 로드됨.
        3 : 요청을 처리중.
        4 : 요청이 끝나고, 응답이 준비됨. 완료.
  • status
    서버와의 HTTP 응답 상태를 나타내는 코드.
        200 : 정상.
        404 : 페이지 없음.
xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        document.getElementById("pasteHere").innerHTML=xmlHttp.responseText;
    }
}
  • statusText
    HTTP 상태 코드의 텍스트 표현.


응답 처리

  • responseText
    서버로부터 전송받은 문자열.
  • responseXML
    서버로부터 전송받은 XML 문서. 파싱하여 DOM으로 처리.
Comments