XMLHttpRequest

XMLHttpRequest오브젝트 생성

IE 기준 :

var request = new ActiveXObject("Microsoft.XMLHTTP"); 
또는
var request = new ActiveXObject("MSXML2.XMLHTTP");

 function createHttpRequest()

{

  if(window.ActiveXObject)

  {

    //win e4, e5, e6

      try {

        return new ActiveXObject("Msxml2.XMLHTTP");

      } catch(e) {

        try {

          return new ActiveXObject("Microsoft.XMLHTTP");

        } catch(e2) {

          return null;

        }

      }

    } else if (window.XMLHttpRequest) {

    // Win max Linux m1, f1, o8 mac s1 Linux k3..

      return new XMLHttpRequest();

   } else {

    return null;

   }

}

HTTP요청 시작

초기화: open()

요청을 초기화하고 HTTP 메소드 및 URL등을 설정한다.

request = createHttpRequest()

request.open("GET",http://xxx.xxx.xxx.xxx/test.xml);

 

첫번째 인수는 GET or POST같은 전송 Method설정

두번째 인수는 요청하고자 하는 곳의 URL을 설정

세번째 인자는 생략 가능하지만 Default로 비동기로 설정됨

 

송신:send()

요청을 송신 하는 것

인수는 1개가 있지만 생략 가능하지만 되도록

request.send(null); Or request.send(""); 과 같이 사용하도록 하며,

권장은 request.send("")와 같이 사용하길.

 

get 과 post 방식에 대한 자세한 사항은 HTTP프로토콜 정의서 참조

착신과 데이터 처리

착신(1) : onreadystatechange

 

요청이 송신(send)되면 서버로부터 응답이 도착하게 되며, 이때 착신 확인을 위해서 사용

onreadystatechange는 요청 처리상태를 나타내는 readyState 프로퍼티의 값이 바뀔때 발생

("4" 가 모든 데이터를 수신함을 나타내는 정수)

 

착신시 동작 기술

request.onreadysatatechange = callbackFunction;

function callbackFunction() {

  if (request.readyState == 4)

  {

    //착신하였을 경우 처리 스크립트 .... 

   }

}

or

request.onreadystatechange = function() {

   if (request.readyState == 4)

   {

     //착신 처리 ...

    }

Or 서버가 돌려주는 "200" Or "404" 같은 HTTP 상태 코드를 기준으로 분기하는 방법도 있다.

상태 코드는 status 속성으로 얻는다.

 

request.onreadystatechange = function() {

  if (request.readyState == 4 && request.status == 200) {

     //착신 처리 ....;

   }

}

 

착신(2) : onload

onload는 응답 데이터를  다 읽어 들였을때 발생하는 이벤트

윈도우IE이외의 Ajax 대등 브라우저에 구현되어 있다. 위에서 설명한 것처럼 상태 파악이 필요없다.

 

request.onload = function() {

   //착신 처리 ...;

}

 

크로스 브라우저에 대한 간략한 처리 방법

if (window.opera || safari || mozes) {

   request.onload = function () { callback(request); }

}else {

  request.onreadystatechange = function() {

    if (request.readyState == 4) {

      callback(request);

     }

  }

}

 

function callback(request) {

  //착신시의 처리

}

 

데이터(Text) : responseText

----------------------------------

서버로부터 데이터의 내용을 받아내는  방법은 대략 2가지 

하나는responseText와 XML로 받는 방법  responseXML 방법이 그 2가지다.

 

responseText 는 요청에 대한 응답을 텍스트로 리턴하며, 받은 데이터를 문자열로 바로 처리 가능

 

이용되는 데이터 종료

CSV , JSON, XML...

인코딩에 관련된 고려 사항


받은 데이터 텍스트는 유니코드 문자열로 해석되기 때문에 기본 UTF-8로 되어있으며, 서버로부터 전송 받는 문자열에는

UTF-8인코딩이 좋다.

 

다만, 브라우저 특성이 있으므로 각기 고려해야한다.

서버로부터 송출시에도 UTF-8로 URI인코딩을 해서, 수신시에 디코딩 하는 방법도 있다.

혹은 UTF-16으로 디코딩하는 방법도 있다.

 

디코딩 함수예

var res = decodeURIComponent(oj.responseText);

 

responseXML은 응답을 DOMDocument 오브젝트로 받는다.

그러므로 그것을 브라우저로 표시하기 위해서는 DOM 방식을 따라 분석하거나, XSLT를 적용하여 변환한다.

다음 예는 간단히 기술한 것이다.

<? xml version="1.0" encoding="euc-kr" ?>

<lists>

<name>길동</name>

<msg>안녕~</msg>

</lists>

의  xml 파일을 아래와 같은 방식으로 꺼내서 사용할 수 있다.

res = request.responseXML

var msg = res.getElementsByTagName("msg")

 

//최초의 msg 요소의 firstChild값을 표시한다.

alert(msg[0].firstChild.nodeValue);

 

getElementsByTagName() 메소드로 msg 요소의 목록을 배열화해서, 최초 msg요소(msgs[0]의 최초 차일드(child) 노드(firstChild) 값(nodeValue)을  꺼낸다.