新聞中心
ajax XML 實例
AJAX 可用來與 XML 文件進行交互式通信。

本節(jié)通過解析實例來使你了解AJAX是如何讀取XML文件的信息的!
我們首先實例化或創(chuàng)建XMLHttpRequest(XHR)對象實例化或創(chuàng)建JavaScript的對象:
xhr = new XMLHttpRequest();
但是,IE5和IE6不支持XMLHttpRequest,您需要以不同的方式實例化它:
xhr = new ActiveXObject ("Msxml2.XMLHTTP")
注:Windows 10附帶的Microsoft Edge默認Web瀏覽器自然支持XMLHttpRequest的。)
因此,實例化XHR變得有點麻煩,你必須首先測試用戶的瀏覽器如何支持它。
var xhr;
if(window.XMLHttpRequest){ //適用于大多數(shù)現(xiàn)代Web瀏覽器
xhr = new XMLHttpRequest();
}
else(window.ActiveXObject){ //對于IE5,IE6
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
AJAX XML 實例
下面的例子將演示網(wǎng)頁如何使用 AJAX 來讀取來自 XML 文件的信息:
實例
Get CD info
嘗試一下 ?
實例解析 - loadXMLDoc() 函數(shù)
當用戶點擊上面的"獲得 CD 信息"這個按鈕,就會執(zhí)行loadXMLDoc()函數(shù)。
loadXMLDoc()函數(shù)創(chuàng)建 XMLHttpRequest 對象,添加當服務(wù)器響應(yīng)就緒時執(zhí)行的函數(shù),并將請求發(fā)送到服務(wù)器。
當服務(wù)器響應(yīng)就緒時,會構(gòu)建一個 HTML 表格,從 XML 文件中提取節(jié)點(元素),最后使用已經(jīng)填充了 XML 數(shù)據(jù)的 HTML 表格來更新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="Title Artist ";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "" + xx[0].firstChild.nodeValue + " ";
}
catch (er)
{
txt=txt + " ";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "" + xx[0].firstChild.nodeValue + " ";
}
catch (er)
{
txt=txt + " ";
}
}
txt=txt + "";
}
txt=txt + "
";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
AJAX 服務(wù)器頁面
上面這個例子中使用的服務(wù)器頁面實際上是一個名為 "cd_catalog.xml" XML 文件。
相關(guān)教程
XML教程
XML DOM教程
文章題目:創(chuàng)新互聯(lián)AJAX教程:AJAXXML
文章起源:http://www.dlmjj.cn/article/cdeepjh.html


咨詢
建站咨詢
