[01호] AJAX 2007/02/20 13:36 |
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 와 타 브라우저가 다르게 지원하기때문에 모두에 맞추려면 아래와같이 나눠서 처리해줘야 한다.
function createXMLHttpRequest() {
var xmlHttp = null;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
if (xmlHttp == null)
alert("XML 객체를 생성하지 못했습니다.");
return xmlHttp;
}
이것을 쓰기위해서는 아래와같이 오브젝트의 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
: 현재 요청의 상태를 의미한다.
상태는 아래와같이 다섯가지가 있다.
코드 | 상태 | 설명 |
0 | UNINITIALIZED | XMLHttpRequest 객체를 생성하였지만, 초기화되지 않았다. 즉, open() 메소드를 실행하지 않은 상태 |
1 | LOADING | XMLHttpRequest 객체를 생성하였고, open() 메소드를 수행하였지만, send() 메소드를 수행하지 않은 상태 |
2 | LOADED | send() 메소드를 수행하였지만, 서버가 처리를 준비하고 있는 상태 |
3 | INTERACTIVE | 처리를 완료하지 않았지만, 진행 중인 상태 |
4 | COMPLETED | 처리를 완료한 상태 |
- 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 : 현재 요소와 바로 이전의 요소를 의미한다.
20061109 본문 이미지 Resizing --> 20061109 본문 이미지 Resizing END -->
|
출처 : Tong - 난신기루다~★님의 Ajax통
출처 : http://tong.nate.com/singiruda/37192793
