XML데이터를 수신하여 화면에 뿌려주는 간단한 예제
한글도 깨짐없이 잘 처리 되는군요 ㅎㅎ
ajaxXml.jsp
--------------------------------------------------------------------------------
<%@page contentType="text/html;charset=euc-kr" %>
<script>
/**
* XmlHttpRequest 생성
**/
function cfGetXmlHttpRequest() {
var reqHttp;
if (window.ActiveXObject) { // IE인 경우
try {
reqHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
reqHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
reqHttp = null;
}
}
} else if (window.XMLHttpRequest){ // IE 이외의 브라우져
try {
reqHttp = new XMLHttpRequest();
} catch (e) {
reqHttp = null;
}
}
if (reqHttp == null) cfFail(); //XMLHttpRequest 생성 실패
return reqHttp;
}
/**
* XmlHttpRequest 생성 실패 인 경우
**/
function cfFail() {
alert("지원되지 않는 브라우져입니다.");
}
/**
* 서버로 xml데이터 요청 및 call back 함수.
**/
function cfXmlHttpStatus(sendType, url, commType, parameters) {
var request = cfGetXmlHttpRequest();
request.open(sendType, url, commType); // 송신방법,URL,통신방법
/** Call back 함수 **/
request.onreadystatechange = function() { // 처리상태 변경 발생시 수행되는 이벤트 call back함수
if (request.readyState == 4) { // 서버 처리 완료
if (request.status == 200) {
cfParseXml(request); // XML데이터를 수신후 그 내용을 파싱하여 출력.
} else {
cfHttpException(request); // 예외 처리
}
}
}
request.send(parameters); // 서버로 요청
}
/**
* 예외 처리 (status != 200)
**/
function cfHttpException(xmlHttp) {
var exceptShow = "상태 코드: " + xmlHttp.status;
exceptShow += ", 비정상으로 종료되었습니다.";
alert(exceptShow);
}
</script>
<script language="javascript" type="text/javascript">
/**
* onload 시에 수행되는 코드 init
**/
window.onload = function() {
var btn = document.getElementById("oBtn");
btn.attachEvent("onclick", fcRequestData);
}
/**
* 서버로 XML데이터 요청.
**/
function fcRequestData() {
cfXmlHttpStatus("GET", "/test.xml.jsp", true, "");
}
// 메인 처리
function cfParseXml(xmlHttp) {
var xml = xmlHttp.responseXML; //XML 파일 데이터
var result = "<br><table border='1' cellspacing='1'><tr><td colspan=2><b>Result</b></td></tr>";
var p_list = xml.getElementsByTagName("list"); // Parent Node
var p_nameNode = xml.getElementsByTagName("name");
var p_descNode = xml.getElementsByTagName("desc");
var rowCnt = p_list.length; // 레코드 건수
for (i=0; i<rowCnt; i++) {
var p_name = p_nameNode[i].childNodes[0].nodeValue;
var p_desc = p_descNode[i].childNodes[0].nodeValue;
result += "<tr>";
result += "<td>" + p_name + "</td>"; //약어명
result += "<td>" + p_desc + "</td>"; //정식명칭
result += "</tr>";
}
result += "</table>";
document.getElementById("oResult").innerHTML = result;
}
</script>
</head>
<body>
<h1>Ajax :: XML데이터 수신 샘플</h1>
<input type="button" id="oBtn" value="Get XML" />
<div id="oResult"></div>
</body>
</html>
test.xml.jsp
--------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<%@ page language="java" contentType="text/xml;charset=utf-8" %>
<root>
<list>
<name>홍길동</name>
<desc><![CDATA[서울시 성동구]]></desc>
</list>
<list>
<name>김길동</name>
<desc><![CDATA[서울시 용산구]]></desc>
</list>
</root>
No comments:
Post a Comment