AJAX XML 实例

AJAXXML实例

・PreviousPage

・NextPage

AJAX可用来与XML文件进行交互式通信。

AJAXXML实例

下面的例子将演示网页如何使用AJAX来读取来自XML文件的信息：

获得CD信息

亲自试一下源代码

实例解释-loadXMLDoc()函数

当用户点击上面的“获得CD信息”这个按钮，就会执行loadXMLDoc()函数。

loadXMLDoc()函数创建XMLHttpRequest对象，添加当服务器响应就绪时执行的函数，并将请求发送到服务器。

当服务器响应就绪时，会构建一个HTML表格，从XML文件中提取节点（元素），最后使用已经填充了XML数据的HTML表格来更新txtCDInfo占位符：

functionloadXMLDoc(url)

{

varxmlhttp;

vartxt,xx,x,i;

if(window.XMLHttpRequest)

{//codeforIE7+,Firefox,Chrome,Opera,Safari

xmlhttp=newXMLHttpRequest();

}

else

{//codeforIE6,IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readyState==4&&xmlhttp.status==200)

{

txt="<tableborder='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();

}

AJAX服务器页面

上面这个例子中使用的服务器页面实际上是一个XML文件，名为"cd_catalog.xml"。

来自：http://www.w3school.com.cn