서버에서 응답한 XML데이터를 Javascript에서 DOM Tree로 변환하여 데이터를 다루는 예
/* XMLHttpRequest01.js */
var xhr;
function createXHR(){ /* XMLHttpRequest객체를 생성한다 */
if(window.ActiveXObject){ // IE5.0, IE6.0
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){ //IE7.0, FireFox, Safari, Opera
xhr = new XMLHttpRequest();
}
}
function startMethod(){
createXHR();
xhr.onreadystatechange = resultProcess; // response handler
xhr.open("GET", "user.xml", "true"); // 요청설정
xhr.send(null); // 요청전송, GET방식은 null로 설정하고 POST방식일 경우 파라미터 문자열을 설정한다
}
/* 서버에서 응답이 올때 이 함수가 자동으로 실행된다 */
function resultProcess(){
if(xhr.readyState==4){
if(xhr.status==200){
/* 서버로부터 XML문서를 받아서 DOM Tree로 변환한다 */
//var xmlDocObj = xhr.responseXML.documentElement; // root element
var xmlDocObj = xhr.responseXML; // DOM Tree, Document Object
/* DOM Tree로부터 특정 태그를 얻고 태그의 텍스트를 구한다
태그 이름을 이용하여 엘리먼트를 얻는 경우는 다수개의 엘리먼트가
리턴될 가능성이 있기 때문에 리턴값이 배열이라는 것에 주의한다.
또, 다수개의 엘리먼트를 구한다는 의미로 getElementsByTagName()함수의
이름에 's'가 포함되어 있다는 것도 주의해야 한다.
*/
alert(xmlDocObj.getElementsByTagName("name")[0].firstChild.nodeValue);
// 이름, 아이디, 암호를 추출해서 화면에 출력해 보세요.
}
}
}
/* 참고
readyState
0: open()함수가 아직 호출되지 않은 상태
1: send()함수가 아직 호출되지 않은 상태
2: send()가 끝난 상태(IE에서는 아직 헤더와 status를 사용할 수 없다)
3: receiving-처리중(IE에서는 아직 데이터를 제대로 받을 수 없는 상태)
4: loaded-모든 데이터를 받을 수 있는 상태
responseText: 응답 데이터를 문자열로 저장하는 속성
responseXML: 응답 테이터를 XML(DOM)형식으로 저장하는 속성
status:서버로부터 응답받은 HTTP 상태코드
200: 정상(OK)
400: Page Not Found - 클라이언트의 잘못된 요청
500: Internal Server Error - 서버측 오류
*/
<!-- test01.html -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> XMLHttpRequest Test </TITLE>
<script src="XMLHttpRequest01.js" type="text/javascript"></script>
</HEAD>
<BODY>
<center>
<input type="button" value="요 청" onClick="startMethod()">
</center>
</BODY>
</HTML>
<?xml version="1.0" encoding="utf-8" ?>
<user>
<name>홍길동</name>
<id>hong</id>
<pwd>pwdhong</pwd>
</user>
<!--이 문서를 저장할 때는 반드시 에디터에서 utf-8형식을 지정하여 저장해야 함-->
JSP를 이용하여 XML문서로 응답하는 예
<?xml version="1.0" encoding="utf-8" ?>
<%@ page contentType="text/xml; charset=UTF-8" pageEncoding="utf-8"%>
<%
String name = "홍길동";
String id = "hong";
String pwd = "pwdhong";
%>
<user>
<name><%=name%></name>
<id><%=id%></id>
<pwd><%=pwd%></pwd>
</user>
<!--이 문서를 저장할 때는 반드시 에디터에서 utf-8형식을 지정하여 저장해야 함-->