1. XMLHttpRequest 객체 구하기
XHR은 W3C 표준이 아니기때문에 브라우저마다 작동방식에 있어서 다소나마 차이가 존재했었지만 현재 대부분의 브라우저들은 XHR 기능을 서로 비슷하게 구현하고 있다.
현존하는 브라우저들 중에서 XHR을 지원하지 않는 브라우저는 거의 없을정도로 대부분의 브라우저들은 현재 XHR 을 지원하고 있다.
ajax 구현의 시작은 XHR 객체의 생성에서 시작한다.
XHR 은 W3C 의 표준이 아니므로, 인터넷익스플로어에서는 ActiveX Component 형식으로 구현되었고, 그 밖에 다른 브라우저들(FireFox, Safari, Opera)은 native javascript 객체로 구현되었다.
이런 차이점을 고려해서 XHR 객체를 얻어오는 자바스크립트 코드를 다음과 같이 작성할 수 있다.
function getXMLHttpRequest() {
if(window.ActiveXObject) {
//브라우져기 ActiveX가 설치된 IE일 경우
try{
return new ActiveXObject("Msxml2.XMLHTTP");
//최신버젼의 ActiveX를 리턴하고
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
//최신버젼을 지원하지 않을 경우에 리턴할 객체를 지정한다
}catch(e1){
return null;
}
}
}else if(window.XMLHttpRequest) {
//IE를 제외한 다른 브라우져는 XMLHttpRequest 객체를 기본적으로 제공하기 때문에
return new XMLHttpRequest();
// 기본 객체를 리턴하면 된다
}else{
return null;
}
}
window.ActiveXObject 는 ActiveXObject를 지원하는 브라우저라면 오브젝트를 리턴하고 그렇지 않다면 null를 리턴하게 된다.
따라서 오브젝트가 존재하면 if 구문은 true 를 반환하고 xmlHttp 값은 ActiveXObject 객체가 할당되어진다. if 구문이 false 를 반환하면 else 구분으로 이동하여 xmlHttp 값은 navtive javascript 객체가 할당될 것이다.
따라서 위 코드를 이용하면 브라우저가 다르더라도 하나의 메소드로 XHR 객체를 생성할 수 있다.
2. 웹 서버에 요청 전송하기
void open(method, url, [async, [user, [ password ]]])
: XMLHttpRequest 객체을 초기화하고, GET/POST 방식을 선택하고, 접속할 URL을 입력한다.
method : GET/POST
url : 요청대상 URL
async : 비동기 true, 동기 false (default : true)
user : 인증페이지에서 사용될 사용자 이름
password : 인증페이지에서 사용될 암호
async 을 false 로 설정하면 요청은 동기로 처리되기 때문에 서버에서 응답을 받을때까지 프로세스는 기다린다.
XHR 을 사용하는 가장 큰 이점중의 하나인 비동기 처리를 위해서는 asynch 항목을 true 로 설정해야 한다.
false 를 설정한다면 XHR 을 사용하는 이점이 그만큼 줄어든다.
void send(content)
: 실질적으로 요청을 서버로 보낸다.
요청이 비동기이면 이 메소드는 바로 리턴되지만 요청이 동기이면 서버에서 응답을 받을때까지 계속 대기한다.
content 는 선택사항이며, DOM 객체이거나 input stream, string 값으로 설정할 수 있으며 HttpRequest body 의 한 부분으로 서버로 전달된다.
(※content 에 값을 넘기려면 open() 메소드는 반드시 POST 로 설정해야 하며, GET 방식으로 요청하려면 null 을 설정하면 된다.)
open(), send() 메소드가 가장 많이 사용되는 메소드들이다.
나머지 메소드에 대해서도 알아보자.
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 형식으로 반환한다.
3. 웹 서버에서 응답이 도착하면 화면에 반영하기
: 웹서버로부터 응답이 도착하면 onreadystatechange 속성을 호출한다.
onreadystatechange
자바스크립트 콜백함수(funtion pointer)를 저장한다.
콜백함수는 서버로부터 응답이 올때 뿐만 아니라 readyState 값이 변할때 마다 호출된다.
요청이 서버로 보내지면 readyState 는 5가지 숫자값으로 계속 변화가 일어나게 된다.
readyState
XMLHttpRequest의 상태를 의미한다.
값
의미
설명
0
UNINITIALIZED
요청객체가 생성만 되고 아직 초기화되지 않은 상태(open()이 호출되지 않았음)
1
LOADING
요청객체가 초기화되었지만 아직 aend()가 호출되지 않은 상태
2
LOADED
send()가 호출되었지만, status와 header가 아직 도착하지 않은 상태
3
INTERACTIVE
data 일부만 받은 상태
4
COMPLETED
data를 전부 받은 상태. 완전한 데이터의 이용이 가능하다.
status
서버에서 처리상태 여부를 저장하는 HTTP 상태코드이다.
200(OK : 요청 성공)
403(Forbidden : 접근 거부)
404(NOT Found : 페이지 없음)
500(Internal Server Error : 서버 오류 발생)
statusText
HTTP 상태코드에 대한 텍스트 값이다.(예 OK, Forbidden, NOT Found, Internal Server Error)
responseText
서버의 응답을 string 형식으로 나타낸다.
responseXML
서버의 응답을 XML 로 나타낸다.
이 속성은 DOM 객체로 파싱할 수 있다
function doProcess(){
xhr=getXMLHttpRequest();
xhr.onreadystatechange=callback;
xhr.open("GET","/test.jsp",true);
xhr.send(null);
}
function callback(){
if(xhr.readystate==1){
}else if(xhr.readystate==2){
}esle if(xhr.readystate==4){
//서버로부터 응답이 도착함
if(xhr.status==200){
var txt=xhr.responseText;
}else{
alert("문제 발생"+xhr.status);
}
}
}