一、介紹
這節(jié)課呢台猴，我們來(lái)了解的是Ajax解析XML朽合，
AJAX 可用來(lái)與 XML 文件進(jìn)行交互式通信俱两。
二、知識(shí)點(diǎn)介紹
1曹步、ajax XML實(shí)例
2宪彩、ajax服務(wù)器頁(yè)面
三、上課對(duì)應(yīng)視頻的說(shuō)明文檔
1讲婚、AJAX XML 實(shí)例
下面的例子將演示網(wǎng)頁(yè)如何使用 AJAX 來(lái)讀取來(lái)自 XML 文件的信息：
實(shí)例解釋 - loadXMLDoc() 函數(shù)
當(dāng)用戶點(diǎn)擊上面的“獲得 CD 信息”這個(gè)按鈕毯焕，就會(huì)執(zhí)行 loadXMLDoc() 函數(shù)。
loadXMLDoc() 函數(shù)創(chuàng)建 XMLHttpRequest 對(duì)象磺樱，添加當(dāng)服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)纳猫，并將請(qǐng)求發(fā)送到服務(wù)器。
當(dāng)服務(wù)器響應(yīng)就緒時(shí)竹捉，會(huì)構(gòu)建一個(gè) HTML 表格芜辕，從 XML 文件中提取節(jié)點(diǎn)（元素），最后使用已經(jīng)填充了 XML 數(shù)據(jù)的 HTML 表格來(lái)更新 txtCDInfo 占位符：
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,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();
}
2块差、AJAX 服務(wù)器頁(yè)面
上面這個(gè)例子中使用的服務(wù)器頁(yè)面實(shí)際上是一個(gè) XML 文件侵续，名為 "cd_catalog.xml"。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
</head>
<body>
<h1>XMLHttpRequest 對(duì)象</h1>
<button type="button" onclick="loadXMLDoc()">獲取我收藏的 CD</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc() {
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>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
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;
}
</script>
</body>
</html>
