http://blog.naver.com/egosun?Redirect=Log&logNo=50098167479늘상 사용하고 있는 XMLHttpRequest 에 대해서 자세한 정의를 정리해보았다.
개념없이 사용하고 있었는데 개념을 잡고 나니 그동안 발코딩한게 부끄러워 진다 ^^;;;;

이번에는 XMLHttpRequest 정의와 사용법에 대해서 정리하고,  차후에 XMLHttpRequest의 다른 사용법들을 공부하여
정리하도록 해야겠다.


XMLHttpRequest 객체는 오늘날 브라우저에서 안정적으로 지원되며, HTTP 프로토콜에 대해서도 완벽하게 접근할 수 있다.

여기에는 일반적인 GET 요청 외에 POST나 HEAD 요청을 생성할 수 있는 기능도 포함되어 있다.

XMLHttpRequest는 웹서버에서 보내오는 응답을 동기식이나 비동기식으로 반환할 수 있으며, 응답의 내용도 텍스트/JSON 이나

DOM 문서의 형태로 반환 할 수 있다. XMLHttpRequest는 이름과 달리 XML 문서가 아니라도 사용할 수 있다.

사실 XMLHttpRequest는 어떤 종류의 텍스트 문서라도 불러들일 수 있다.

- XMLHttpRequest를 사용하여 HTTP 스크립트 작성 과정
     o XMLHttpRequest 객체 생성
      o HTTP 요청을 만들어낸 후 이를 웹서버에 제출
     o 웹서버의 응답을 동기적 / 비동기적 으로 받아오기


    - 요청 객체 얻어내기
        대부분의 브라우저에서는 아래와 같이 객체를 생성한다.
        var request = new XMLHttpRequest();

        but, IE 7 이전에 나온 IE에는 XMLHttpRequest() 생성자 함수가 네이티브 자바스크립트로 존재하지 않았다.
         IE5, 6 에서는 XMLHttpRequest는 ActiveX객체이며, 이를 생성하려면 ActiveXObject() 사용한다.
         var request = new ActiveXObject("Msxml2.XMLHTTP");
        
        불행히도 위에서 지정한 이름은 MS의 XML HTTP 라이브러리 종류에 따라 다르다,
         위코드대신 아래와 같이 사용해야할 수 도 있다.
        var request = new ActiveXObject("Microsoft.XMLHTTP");
      

    ****** 크로스 플랫폼 지원하기위한  HTTP.newRequest() 유틸리티 ******

     HTTP._factories = [function(){ return new XMLHttpRequest();} ,
function(){ return new ActiveXObject("Msxml2.XMLHTTP");} ,
function(){ return new ActiveXObject("Microsoft.XMLHTTP);}
];

      // 작동하는 팩토리를 찾으면 여기에 저장
    HTTP._factory = null;

     /*
      * 새 XMLHttpRequest 객체를 생성한 후 이를 반복한다.
      * 처음 호출되었으면, 위 목록에 있는 팩토리 함수들을 시대호 배고 null 이 아닌 값을 반환하면서 동시에
      * 예외도 발생시키지 않는 함수를 찾는다.
      * 작동하는 팩토리를 찾으면 나중에 사용할 것을 대비해 기억한다.
      */
     HTTP.newRequest = function(){
if(HTTP._factory != null) return HTTP._factory();

for(var i =0; i < HTTP.factories.length ; i++){
try{
var factory = HTTP._factories[i];
var request = factory();
if(request != null)
{
HTTP._factory = factory;
return request;
}
} catch(e){
continue;
}
}
/* 만약 여기까지 도달했으면 아무런 팩토리 후보도 성공하지 못한 것이다.
* 따라서 지금의 호출이나 미래에 있을 호출에 대해 예외를 발생한다.
*/

HTTP._factory = function(){
throw new Error("XMLHttpRequest 지원하지 않습니다.");
}
HTTP._factory();  // 에러 발생
    }
  ********   HTTP.newRequest() 끝 ******************************************************************


   - 요청 제출하기
  객체를 생성했으면 웹서버에 요청을 제출할 차례다. 이 과정 자체는 사실 여러단계의 작업들로 이루어져 있다.
   먼저 open() 메서드를 호출하여 요청할 URL과 그 요청에 쓰일 HTTP '메서드'의 종류를 지정한다.
  
    o HTTP 요청 종류
      GET - 단순히 지정된 URL의 콘텐츠를 다운로드 (대부분의 HTTP 요청은 GET이다)
      POST - 대부분의 HTML폼에서 쓰이는 메서드, 이름이 붙은 변수와 그 값들을 서버로 보내는 요청의 일부에 포함시킬수 있다.
      HEAD - 지정된 URL에 대한 헤더만을 반환하도록 요청
                    예) 문서의 최근 변경 날짜만을 확인

      request.open("GET", url, false);
      false : 동기식 - 서버가 응답이 있을때까지 대기
      true : 비동기 (default)   - 서버로 요청을 보내자마자 곧바로 반환  ,onreadystatechange 이벤트 프로퍼티에 설정된다
                   이 이벤트 처리기 함수는 readystate 프로퍼티가 변할 때마다 호출된다.

      open() 메서드만으로는 웹 서버에 실제 요청을 보내지 않는다. 단순히 실제로 요청을 보내게 될 때 사용할 전달인자를
       저장하는 역할이다.
      요청에 필요한 헤더들을 설정하려면 요청을 보내기 이전에 아래 예와 같이 설정한다.
      request.setRequestHeader("User-Agent", "XMLHttpRequest");
      request.setRequestHeader("Accept-Language", "en");
    
     open() 메서드를 호출했으면 마지막으로 서버에 보내면 된다.

     request.send(null);
  
     send() 함수의 전달인자는 HTTP 요청의 몸체(body) 부분이 된다. HTTP GET 요청에서 이 전달인자는 언제나 null이다.
    하지만 POST 요청에서는 서버에 보낼 폼 데이터를 전달인자에 실어야만 한다.


   - 동기식 응답 얻기
    open() 메서드의 셋째 전달인자에 false를 전달하면 send() 메서드는 동기식으로 작동한다.
    이렇게 되면 서버에서 응답이 도달하기 전에는 send() 메서드가 반환되지 않으며, 블록된 채로 남아 있게 된다.
    request 객체의 Status 프로퍼티를 조사함으로써 서버에서 보내온 상태코드를 확인할 수 있다.
         status = 200 <-- 정상적 응답
  
    o 응답 내용 접근
         1) responseText : 문자열 형태로 접근
         2) responseXML : xml Dom 문서 형태로 접근    
                                          서버에서  XML 문성를 'text/xml' MIME 타입으로 식별해줘야만 한다.


   - 비동기식 응답 얻기
     open() 메서드의 셋째 전달인자에 true(또는 생략) 를 전달하면 된다.
     이렇게 하면 send() 메서드는 서버로 요청을 보내자 마자 곧 바로 응답한다.
     동기식과 다르게 비동기 식으로 응답을 받는다는 것은 사용자에게 비동기식으로 마우스 클릭을 받는 것과 비슷하다.
      이 과정은 이벤트 처리기를 통해 이루어 진다.
      XMLHttpRequest 에서 이러한 이벤트 처리기는 onreadystatechange 프로퍼티에 설정된다.
      이 프로퍼티의 이름이 암시하듯, 이 이벤트 처리기 함수는 readystate 프로퍼티가 변할 때마다 호출된다.
      XMLHttpRequest의 이벤트 처리기는 오직 onreadystatechange 하나뿐인다

    * XMLHttpRequest readyState 값
  
readySate
의미
0
open()이 아직 호출되지 않았음
1
open()은 호출되었지만 send가 호출되지 않았음
2
send()가 호출되었지만 아직 서버로부터 응답을 받지 못했음
3
서버로부터 데이터를 받는중. 파이어폭스와 인터넷 익스플로러는 readyState 3이
  의미하는 바가 다르다.
4
서버로 부터 응답을 다 받았음
    


   - 동기식, 비동기식 응답 사용 법
   * 동기식
       if(request.status == 200){
alert(reqeust.responseText);
       }else{
alert("에러");
       }
      XMLHttpRequest 객체를 사용하면 상태코드, reaponseText, responseXML 외에 HTTP 헤더에 접근할 수 있다.    
     getResponseHeader() 는 지정된 이름의 헤더에 대한 값을 반환

      if(reqeust.status == 200){
  if(request.getResponseHeader("Content-Type") == "text/xml"){
var doc = reqeust.responseXML;
}
     }

  * 비동기식
   var request = HTTP.newRequest();  // 위에서 정의한 크로스플랫폼 유틸리티
  // 아직 요청을 보내지도 않은 시점이지만, 아래와 같이 중첩된 함수 내부에 필요한 코드를 둔다.
  request.onreadystatechange = function(){
if(request.readyState == 4){  // 만약 요청이 완료되면
if(request.status == 200)  // 그 결과가 성공적이라면
alert(request.responseText)
}
  }

request.open("GET", url);
// 요청을 보낸다. GET 요청이기 때문에 요청의 몸체에는 null을 전달한다.
request.send(null);
[출처] XMLHttpRequest 정의와 사용법|작성자 빡스