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", "music_list.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>아티스트</th><th>트랙</th></tr>";
var x = xmlDoc.getElementsByTagName("TRACK");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
XML 파일
이전 예제에서 사용된 XML 파일은 다음과 같습니다:"music_list.xml".
