AJAX XML 예제
AJAX는 XML 파일과의 대화식 통신에 사용할 수 있습니다.
AJAX XML 예제
다음 예는 웹 페이지가 AJAX를 사용하여 XML 파일에서 정보를 가져올 수 있는 방법을 보여줍니다.
예시
예시 설명
사용자가 위의 "CD 정보 가져오기" 버튼을 클릭하면 loadDoc() 함수가 실행됩니다.
loadDoc() 함수는 XMLHttpRequest 객체를 생성하고, 서버 응답이 준비되면 실행할 함수를 추가하고, 요청을 서버로 보냅니다.
서버 응답이 준비되면 HTML 테이블이 작성되고 XML 파일에서 노드(요소)가 추출되고 마지막으로 XML 데이터로 채워진 HTML 테이블로 "demo" 요소를 업데이트합니다.
LoadXMLDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState
== 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Title</th><th>Artist</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length;
i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+
"</td><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
XML 파일
위의 예에서 사용된 XML 파일은 " cd_catalog.xml "과 같습니다.