AJAX 를 구현하려면 XMLHttpRequest 객체부터 생성해야 한다.

XMLHttpRequest 객체는 최초 IE5에서 ActiveX Component 형식으로 먼저 제공되었으며 현재 대부분의 브라우저들이 지원하고 있다. XMLHttpRequest는 W3C의 표준이 아니므로 IE 는 ActiveX 형식으로, 다른 브라우저(FIreFox, Safari, Opera등)은 Native Javascript로 구현되었다.)

AJAX 요소 기술로는 앞서 얘기한 XMLHttpRequest를 필두로 XHTML,CSS,XML,XLST,Javascript,DOM 등이 사용되며, Javascript가 ECMA표준이며 다른 기술은 W3C표준이므로, 모든 브라우저 개발 업체/단체의 합의하에 통용되는 표준으로 자리매김되어 있다.

먼저 AJAX 초기화하려면 아래와같이 두개로 나눠서 해야한다.

위에서 설명한대로 IE 와 타 브라우저가 다르게 지원하기때문에 모두에 맞추려면 아래와같이 나눠서 처리해줘야 한다.

이것을 쓰기위해서는 아래와같이 오브젝트의 onreadystatechange 속성 에 이벤트를 걸어서 사용하는방법이 많이 사용된다.

 var xmlObj = createXMLHttpRequest();
 xmlObj.open("GET","[URL]");
 xmlObj.send();
 xmlObj.onreadystatechange = function() {
  if (xmlObj.readyState == 4) {
     [처리구문...]
  }
 }

이렇게 초기화 하고나면 처리를 해야하는데 처리 하기위한 메소드와 속성들을 알아보자.

- Method

- void open(String method,String url, boolean asynch, String username,String password)

: 요청을 초기화한다.

* method - 'POST','GET','PUT' 중 하나를 사용(필수)

* url - 요청 서버의 url (필수)

* asynch - true(default), false 설정(서버 응답까지 대기)

- void send(content)

: 요청을 서버로 보낸다. 비동기시 요청한다음 끝이지만 동기시면 응답 받을때까지 대기한다.

* content - DOM 객체(XML 객체)이거나 input stream,String 값등으로 설정

open() Parameter의 method 값이 'POST'로 설정되어 있으면

HttpRequest body에 포함되어 서버로 전달된다.

GET방식으로 요청하려면 null 을 설정하면 된다.

- void setRequestHeader(string header,String value)

: open() 다음에 위치해서 HttpRequest 헤더에 value를 설정하는 메소드

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

- string getAllResponseHeaders()

: 요청에 대응되는 응답의 헤더정보를 리턴한다.

즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.

- string getResponseHeader(string header)

: 응답의 헤더정보중에서 header 에 대응되는 값을 string 형식으로 반환한다.

- Attribute

- onreadystatechange

: 자바스크립트 콜백함수(function pointer) 를 저장한다.

이 함수는 readyState 값이 변할때 마다 호출된다.

- readyState

: 현재 요청의 상태를 의미한다.

상태는 아래와같이 다섯가지가 있다.

- responseText

: 서버의 응답을 string 형식으로 나타낸다.

그냥 단순히 내용을 text 로 돌려준다.

- responseXML

: 서버의 응답을 XML로 나타낸다.

이 속성은 DOM객체로 파싱할 수 있다.

- status

: 서버로부터의 HTTP 상태코드

200 - OK

404 - NOT Found

202 - 결과 값이 없을때

등등...

- statusText

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

OK, NOT Found 등등...

자 이제 덤으로 DOM 을 알아보자.

파싱을 하려면 어쩔수없이 써야하는거다.

- Method

- selectSingleNode(xpath)

: 특정 노드를 xpath 를 이용해 검색해서 단일레코드를 돌려준다.

- selectNodes(xpath)

: 특정 노드를 xpath 를 이용해 검색해서 매칭된 레코드들을 돌려준다.

 여기서 xpath 란 xml 상의 정규식 이라고 보시면 된다.

- getElementById(id)

: document 에서 특정한 ID 속성값을 가지고있는 요소를 반환한다.

- getElementsByTagName(name)

: 특정한 태그 이름을 가지고있는 자식요소로 구성된 배열을 리턴한다.

- hasChildNodes()

: 자식요소가 있는지 없는지 boolean 을 리턴한다.

- getAttribute(name)

: 해당 요소의 속성값을 리턴한다.

- appendChild(childNode)

: 특정 노드를 현재 엘리먼트의 자식 노드에 추가시킨다.

- setAttribute(name,value)

: 속성값을 지정한다.

- insertBefore(newNode,targetNode)

: newNode targetNode 앞에 삽입한다.

- removeAttribute(name)

: 해당 요소의 name 속성을 제거한다.

- removeChild(childNode)

: 자식 요소를 제거한다.

- replaceChild(newNode, oldNode)

: oldNode 를 newNode 로 치환한다.

- document.createElement(tagName)

: 해당 태그명으로된 요소를 생성한다 (table 를 주면 table 요소가 생성된다.)

- document.createTextNode(text)

: 정적 텍스트를 담고있는 노드를 생성한다.

- Attribute

childNodes : 현재 요소의 자식을 배열로 표현한다.

firstChild : 현재 요소의 첫번째 자식이다.

lastChild : 현재 요소의 마지막 자식이다.

nextSibling : 현재 요소와 바로 다음 요소를 의미한다.

text : 해당 요소의 값을 읽고 쓸 수 있는 속성을 정의한다. (==data,==nodeValue)

parentNode : 해당 요소의 부모노드이다.

previousSibling : 현재 요소와 바로 이전의 요소를 의미한다.