[Ajax] XMLHttpRequest
Posted at 2007/03/03 03:24// Posted in 나만의 작업웹 애플리케이션이 웹 페이지에 대한 사용자 인터랙션을 효율적으로 처리할 수 있도록 하는 수단을 제공한다
(사용자 인터랙션이 이루어질 때마다 페이지를 리프레시(새로 고침)하거나 전체 페이지를 리로드하는 번거로움을 덜어줌).
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를 이용한 예)
검색창의 자동검색
'나만의 작업' 카테고리의 다른 글
| 프로젝트 환경 설정 (0) | 2007/03/05 |
|---|---|
| 썬 테크놀러지 데이! (0) | 2007/03/04 |
| [Ajax] Ajax (0) | 2007/03/04 |
| innerHTML (4) | 2007/03/03 |
| [Ajax] XMLHttpRequest (4) | 2007/03/03 |
| 이틀동안의 쇼크와 선물 ② NHN-Daum Mashup Camp (12) | 2007/02/26 |
| 이틀동안의 쇼크와 선물 ① 자바 개발자 컨퍼런스 (2) | 2007/02/26 |
| [디자인패턴] 1. Strategy Pattern (5) | 2007/01/21 |
| [디자인패턴] 디자인패턴을 왜 쓰는가? (0) | 2007/01/21 |
이올린에 북마크하기
이올린에 추천하기



암튼 지나가다가 들은 얘긴데 Ajax는 서버에 너무 많은 무리를 주지 않나요?
어차피 client에서 요청을 보내면 server에서 처리할 일은
똑같다고 생각해요 ajax는 client에서 처리하는것이니
오히려 client에서 필요한 데이터만 요청하니(통째로 보내지않고,,) 더 각광받는 이유가 아닐까 생각되요~
Ajax 예제가 많아요. ^^