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객체|작성자 깡통

+ Recent posts