AJAX XML
AJAX를 사용하면 XML 파일과 대화형으로 통신할 수 있습니다.
AJAX XML 예제
다음 예제에서는 웹 페이지가 AJAX를 사용하여 XML 파일에서 정보를 읽는 방법을 보여줍니다.
Example
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>예제 실행»
"예제 실행" 버튼을 클릭하여 온라인 예시 보기
분석 예 - loadXMLDoc() 함수
사용자가 위의 "CD 정보 가져오기" 버튼을 클릭하면 loadXMLDoc() 함수가 실행됩니다.
loadXMLDoc() 함수는 XMLHttpRequest 객체를 생성하고, 서버 응답이 준비되면 실행되는 함수를 추가하고, 서버에 요청을 보냅니다.
서버 응답이 준비되면 HTML 테이블이 작성되고 XML 파일에서 노드(요소)가 추출되며 마지막으로 txtCDInfo 자리 표시자가 이미 XML 데이터로 채워진 HTML 테이블로 업데이트됩니다.
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드
xmlhttp=new XMLHttpRequest ();
}
else
{// IE6, IE5용 코드
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>제목</th><th>아티스트</th></tr> ;";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx =x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
잡기(er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
시도
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
잡기(er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open( "GET",url,true);
xmlhttp.send();
}
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari용 코드
xmlhttp=new XMLHttpRequest ();
}
else
{// IE6, IE5용 코드
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>제목</th><th>아티스트</th></tr> ;";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx =x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
잡기(er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
시도
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
잡기(er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open( "GET",url,true);
xmlhttp.send();
}
AJAX 서버 페이지
위 예제에 사용된 서버 페이지는 실제로 "cd_catalog.xml"이라는 XML 파일입니다.
