1.XMLHttpRequest객체 생성
var xmlHttp;
function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XML HTTP"); //IE } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest();//Mozila } }
2.메소드
void open(string method, string url, boolean asynch, string username, string password )
method - GET,POST,PUT
url - 요청 서버 URL
asynch - 비동기/동기 선택 (default true - 비동기)
void send(content) : 실질적으로 요청을 서버로 보낸다. 요청이 비동기이면 이 메소드는 바로 리턴되지만 요청이 동기이면 서버에서 응답을 받을때까지 계속 대기한다. content 는 선택사항이며, DOM 객체(XML 객체)이거나 input stream, string 값으로 설정할 수 있으며 HttpRequest body 의 한 부분으로 서버로 전달된다. content 에 값을 넘 기려면 open() 메소드는 반드시 POST 로 설정해야 하며, GET 방식으로 요청하려면 null 을 설정하면 된다.
void setRequestHeader(string header, string value) : header 에 해당하는 value 값으로 HttpRequest 헤더에 값을 설정하는 메소드로써, 반드시 open() 메소 드 다음에 위치해야 한다.
void abort() : 요청중지
string getAllResponseHeaders() : 요청에 대응되는 응답의 헤더정보를 리턴한다. 즉, C ontent-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.
string getResponseHeader(string header) : 응답의 헤더정보중에서 header 에 대 응되는 값을 string 형식으로 반환한다.
3.속성
onreadystatechange : 자바스크립트 콜백함수(funtion pointer)를 저장한다. 콜백함수는 readyState 값이 변할때 마다 호출된다. 요청이 서버로 보 내지면 readyState 는 5가지 숫자값으로 계속 변화가 일어나게 된다.
readyState : 요청의 상태를 의미한다.(0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete)
responseText : 서버의 응답을 string 형식으로 나타낸다. 단순 text를 innerHTML 속성 으로 표현하기에는 알맞지만 논리적으로 파싱하거나 동적으로 페이지 컨텐츠를 생 성하기는 힘들다.
responseXML : 서버의 응답을 XML 로 나타낸다. 이 속성은 DOM 객체로 파싱할 수 있다.
status : 서버로부터의 HTTP 상태코드이다.(예 200(OK), 404(NOT Found), 202(결과 값 이 없을 때)등등
)
statusText : HTTP 상태코드에 대한 텍스트 값이다.(예 OK, NOT Found 등등)
4. 예제
function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange;//function xmlHttp.open("GET", "simpleResponse.xml", true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) {
// complete, OK alert("The se rver replied with: " + xmlHttp.responseText); } } }
5.DOM 속성
childNodes : 현재 요소의 자식을 배열로 표현한다.
firstChild : 현재 요소의 첫번째 자식이다.
lastChild : 현재 요소의 마지막 자식이다.
nextSibling : 현재 요소와 바로 다음의 요소를 의미한다.
nodeValue : 해당 요소의 값을 읽고 쓸 수 있는 속성을 정의한다.(=data)
parentNode : 해당 요소의 부모노드이다.
previousSibling : 현재 요소와 바로 이전의 요소를 의미한다.
6.DOM 메소드
getElementById(id) : 다큐먼트에서 특정한 id 속성값을 가지고 있는 요소를 반 환한다
.
getElementsByTagName(name) : 특정한 태그 이름을 가지고 있는 자식 요소로 구성된 배열을 리턴한다
.
hasChildNodes() : 해당 요소가 자식 요소를 포함하고 있는지를 나타내는 Boolean 값 을 리턴한다
.
getAttribute(name) : 특정한 name 에 해당하는 요소의 속성값을 리턴한다.
document.createElement(tagName) : tagName 으로된 엘리먼트를 생성한다. div 를 메 소드 파라미터로 입력하면 div 엘리먼트가 생성된다.
document.createTextNode(text) : 정적 텍스트를 담고 있는 노드를 생성한다.
<element>.appendChild(childNode) : 특정 노드를 현재 엘리먼트의 자식 노드 에 추가시킨다. (예를들어 select 엘리먼트에 option 엘리먼트 추가)
<element>.getAttribute(name) : 속성명이 name 인 속성값을 반환한다.
<element>.setAttribute(name, value) : 속성값 value 를 속성명이 name 인 곳에 저장한다
.
<element>.insertBefore(newNode, tartgetNode) : newNode 를 tartgetN ode 전에 삽입한다
.
<element>.removeAttribute(name) : 엘리먼트에서 name 속성을 제거한다.
<element>.removeChild(childNode) : 자식 엘리먼트를 제거한다.
<element>.replaceChild(newNode, oldNode) : oldNode 를 newNode 로 치환한 다
.
<element>.hasChildNodes() : 자식 노드가 존재하는지 여부를 판단한다. 리 턴형식은 Boolean 이다
