XMLHttpRequest 는 현재 표준은 아니지만 대부분의 브라우저에서 지원하고 있다.
마이크로소프트 인터넷 익스플로러 4.0 이후
파이어폭스(Firefox)1.0이후
오페라(Opera)7.6 이후
사파리(Safari)1.2 이후
네스케이프(Netscape)7 이후
컨쿼라(Konqueror)3 이후
XMLHttpRequest 를 사용한 Ajax 프로그램은 다음과 같이 세 과정을 거치게 된다.
1.XMLHttpRequest 객체 구하기
2.웹 서버에 요청 전송하기
3.웹 서버에서 응답이 도착하면 화면에 반영하기
이 세과정만 알면 XMLHttpRequest 를 사용한 프로그래밍을 하는데 어려움이 없을 것이다.
1.XMLHttpRequest 객체 구하기
XMLHttpRequest 객체를 구하는 방식은 IE와 나머지 브라우저가 서로 다르다. IE 경우 ActiveX 컴포넌트로 제공하고 있고, 나머지는 XMLHttpRequest 클래스를 기본적으로 제공하고 있다.
<script type="text/javascript">
var httpRequest = null;//getXMLHttpRequest()함수로 생성한 객체를 저장하기 위해 선언한 전역 변수
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try { //IE 에서 XMLHttpRequest
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) { return null; }
} //IE 외 파이어폭스 오페라 같은 브라우저에서 XMLHttpRequest 객체 구하기
-> } else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
var httpRequest = null;
</script>
IE를 제외한 나머지 브라우저는 XMLHttpRequest 객체를 기본 객체로 제공하고 있다. 따라서 12라인 처럼 XMLHttpRequest 가 기본적으로 제공되는 객체인지 확인한뒤 라인 13에서 처럼 XMLHttpRequest 객체를 생성할 수 있다.
IE의 경우 ActiveX객체로 제공된다. 따라서 3라인처럼 웹 브라우저가 ActiveX 객체를 지원하는지 검사한 뒤에, Msxml2.XMLHTTP 객체를 생성하면 된다. 실패할경우 9라인처럼 Microsoft.XMLHTTP 객체를 생성하게 된다. Msxml2.XMLHTTP 객체 생성을 먼저 시도하는 이유는 Microsoft.XMLHTTP 객체보다 새로운 버전이기 때문이다.
크로스 브라우저 지원을 위해 XMLHttpRequest 객체를 위와같이 구할수있겠다.
2.웹 서버에 요청 전송 하기
-open()함수 : 요청의 초기화.GET/POST 선택. 접속할 URL입력
-send()함수 : 웹 서버에 요청 전송
- 첫 번째 인자 - "GET" 인지 "POST" 인지 설정
- 두 번째 인자 - 접속할 URL 일력한다.보안상 이유로 현재 페이지와 같은 도메인에 있어야 한다.
- 세 번째 인자 - 동기/비동기 방식을 지정한다.
GET 방식 전달
httpRequest = getXMLHttpRequest();
httpRequest.open("GET","/test.jsp?id=neloi&pw=1234",true);
httpRequest.send(null);
파라미터가 없다면 URL만 입력하면 된다.
POST 방식 전달
httpRequest = getXMLHttpRequest(); httpRequest.open("POST","/test.jsp",true);
httpRequest.send("id=neloi&pw=1234");
3.서버 응답 처리하기:onreadystatechange 프로퍼티와 콜백 함수
<script type="text/javascript">
function getXMLHttpRequest(){
....
}
var httpRequest =null;
function processEvent(){
httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = callbackFunction;
httpRequest.open("GET","/test.jsp",true);
httpRequest.send(null)
}
function callbackFunction(){
//서버로부터 응답이 왔으므로 알맞은 작업을 수행
}
</script>
...
<input type="button" onclick="processEvent()">
서버에 요청후 응답이 도착하면 알맞게 처리해야한다. XMLHttpRequest객체는 웹 서버로부터 응답이 도착하면 특정한 자바스크립트 함수를 호출하는 기능이 있는데, 이때 사용되는 프로퍼티가 onreadystatechange이다. 이프로퍼티는 웹 서버로부터 응답이 도착할 때 호출될 함수를 지정할 때 사용된다. 실제로 onreadystatechange에 지정한 콜백 함수는 서버로부터 응답이 도착할 때뿐만 아니라 open()함수나 send()함수가 호출될 때도 실행된다. 이내용은 잠시뒤에 알아보자.
코드 실행되는 순서
1.사용자의 이벤트가 발생하면 이벤트 처리 함수를 호출한다.
2.이벤트 처리 함수에서는 XMLHttpRequest 객체의 send() 함수를 호출한다.
3. XMLHttpRequest 객체의 send() 함수가 호출되면 웹 서버에 요청이 전송된다.
4.웹 서버는 알맞게 처리한 뒤 응답 결과를 XMLHttpRequest에 전송한다.
5.XMLHttpRequest 객체에 응답이 도착하면 onreadystatechange 프로퍼티에 지정한 콜백 함수를 호출한다.
이순서는 XMLHttpRequest 객체를 사용하는 모든 Ajax 어플리케이션에서 동일하게 적용된다.
4.XMLHttpRequest 객체의 상태: readyState
앞에서 웹 서버로부터 응답이 도착했을 때 콜백 함수가 호출된다고 했었다.그런데 실제로 onreadystatechange에서 명시한 콜백 함수는 readyState 라는 프로퍼티의 값이 변경된 때마다 호출된다.
|
값 |
의미 |
설 명 |
|
0 |
UNINITIALIZED |
객체만 생성되고 아직 초기화되지 않은 생태(OPEN메서드가 호출 되지 않음) |
|
1 |
LOADING |
OPEN 메서드가 호출되고 아직 SEND 메서드가 불리지 않은 상태 |
|
2 |
LOADED |
SEND메서드가 불렸지만 STATUS와 헤더는 도착하지 않은 상태 |
|
3 |
INTERACTIVE |
데이터의 일부를 받은 상태 |
|
4 |
COMPLETED |
데이터를 전부 받은 상태. |
보통은 readyState 값 중 4인 경우만 원하는 기능을 수행하는데, 가끔 서버로부터 응답이 도착하는데 시간이 걸릴 경우 나머지 값을 유용하게 사용할 수 있다.예를 들어 편지함 지우기를 클릭했을때 10초 걸린다고 하자. 그럼 10초 후에나 편지함 비웠다는 메시지를 보여줄 수 있을 것이다. 이경우, 사용자는 10초 동안 아무것도 일어나지 않는 것처럼 느끼게 될 것이다.이렇게 처리 시간이 오래 걸릴 경우에는 readyState 값이 1,2,3 일 때 작업이 진행 중임을 나타내는 메시지를 화면에 보여주는 것이 좋다.
function callbackFunction(){
if(httpRequest.readyState == 1 || httpRequest.readyState == 2
|| httpRequest.readyState ==3 ){
//화면에 작업 중 메시지 출력
}else if(httpRequest.readyState == 4){
//서버 응답 결과에 따라 알맞은 작업 처리
}
}
readyState의 값이 2와3인 경우는 웹 브라우저에 따라서 다르게 처리된다. 예를 들어, 오페라에 서는 요청한 페이지가 존재하지 않는 겨우 readyState 값이 3으로 변경되지 않지만, 파이어폭스나 IE의 경우는 요청한 페이지가 존재하지 않더라고 readyState의 값이 3으로 되기도 한다.따라서 readyState의 값이 사용할 때에는 1 과 4를 사용하는 것이 크로스 브라우저를 지원할 수 있는 가장 알맞은 방법이다.
5.서버로부터의 응답 상태 : status / statusText
웹서버로부터 응답이 도착하면 웹 서버에서 처리가 올바르게 수행되었는지 확인해야 한다. 웹 서버는 작업을 올바르게 실행했는지 , 처리 도중에 에러가 발생했는지 등의 여부를 상태 코드를 통해서 알려주는데 XMLHttpRequest 객체는 웹 서버가 전달한 생태 코드를 status 프로퍼티에 저장한다.
|
값 |
텍스트 |
설명 |
|
200 |
OK |
요청 성공 |
|
403 |
Forbidden |
접근 거부 |
|
404 |
Not Found |
페이지 없음 |
|
500 |
Internal Server Error |
서버 오류 |
따라서 서버로부터 응답이 도착하면 status프로퍼티를 사용해서 요청이 성공적으로 수행되었는지 확인해야 한다.즉 다음과 같이 콜백 함수를 작성해야 한다.
function callbackFunction(){
if(httpRequest.readyState == 1 || httpRequest.readyState == 2
|| httpRequest.readyState ==3 ){
//화면에 작업 중 메시지 출력
}else if(httpRequest.readyState == 4){
if(httpRequest.status == 200){
//서버 응답 결과에 따라 알맞은 작업 처리
}else{
alert("문제 발생:" + httpRequest.status);
}
}
}
statusText는 status 프로퍼티의 값을 설명하는 텍스느 문장을 저장한다. 현시점 오페라 8.51버전까지는 statusText 프로퍼티를 제공하고 있지 않으므로,크로스 브라우저를 실현하기 위해서는 statusText는 가급적 사용하지 ㅇ낳는 것이 좋다.
6.응답 데이터 사용하기 :responseText
서버에서 응답이 도착한 것을 확인하고 (readyState프로퍼티값이 4이고)서버가 요청을 올바르게 수행했다면(status프로퍼티 값이 200이면), 이제 남은 작업은 서버가 전송한 데이터를 사용하는 것이다.
웹 서버는 단순 텍스트 또는 XML의 두 가지 형식으로 데이터를 전송할 수 있는데, 여기서는 텍스트인 경우에 대해서 알아보자 XML은 다음 기회가 되면 알아보자.
웹 서버가 생성한 단순 응답 텍스트를 참조하려면 responseText 프로퍼티를 사용하면 된다.
서버의 응답 텍스트를 alert로 출력해 주는 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title>간단한 Ajax 어플리케이션!</title><script type="text/javascript">
var httpRequest = null;
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
function load(url) {
httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = viewMessage;
httpRequest.open("GET", url, true);
httpRequest.send(null);
}
function viewMessage() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
alert(httpRequest.responseText);
} else {
alert("실패: "+httpRequest.status);
}
}
}
</script>
</head>
<body>
<input type="button" value="simple.txt" onclick="load('simple.txt')"/>
<input type="button" value="simple2.jsp" onclick="load('simple2.jsp')"/>
</body>
</html>
출처:최범균 의 Ajax 프로그래밍 기초/중급
'아이티 > java' 카테고리의 다른 글
| [java]Thread 사용예제 (0) | 2012.08.06 |
|---|---|
| extends와 implements의 차이? (0) | 2011.10.21 |
| 파일 경로명 문자열의 확장자 바꾸기 (0) | 2011.04.19 |
| HTML 태그 정리 (0) | 2010.07.12 |
| 2년차 개발자가 알아야 할 기본 지식 (0) | 2009.04.02 |