[Ajax] XMLHttpRequest

AJAX는 'Asynchronous JavaScript and XML'의 머리글자를 딴 것으로,
웹 애플리케이션이 웹 페이지에 대한 사용자 인터랙션을 효율적으로 처리할 수 있도록 하는 수단을 제공한다
(사용자 인터랙션이 이루어질 때마다 페이지를 리프레시(새로 고침)하거나 전체 페이지를 리로드하는 번거로움을 덜어줌).

XMLHttpRequest객체의 Internet Explorer 및 기타 브라우저 다루기

참고 : Ajax 소개 및 XMLHttpRequest 객체 사용하기

XMLHttpRequest 메소드

void open(string method, string url, boolean asynch, string username, string password) : 요청을 초기화한다. 파라미터중에서 method, url 두개만 필수항목이고 나머지는 선택항목이다. method 는 POST, GET, PUT 3가지중 하나를 사용하면 되며, url 은 요청하고자 하는 서버의 url 이다. asynch 는 요청이 비동기인지 여부를 판단하는 항목이다. 입력하지 않으면 디폴트로 true 가 설정되어 요청은 비동기로 처리된다. false 로 설정하면 요청은 동기로 처리되기 때문에 서버에서 응답을 받을때까지 프로세스는 기다리게 된다. 사실 XHR 을 사용하는 가장 큰 이점중의 하나인 비동기 처리를 위해서는 asynch 항목을 true 로 설정해서 사용해야 한다. false 를 설정한다면 XHR 을 사용하는 이점이 그만큼 줄어든다.

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() : 요청에 대응되는 응답의 헤더정보를 리턴한다. 즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.

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

이번에는 XHR 의 속성중에서 중요한 몇가지를 알아본다.

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 등등)

참고 : jinoxst님의 AJAX 강의 2장 - XMLHttpRequest 오브젝트 사용하기

Ajax를 이용한 예)
검색창의 자동검색