AJAX可用于与XML文件交互通信。
AJAX XML实例
下面的例子将演示如何一个网页可以从AJAX的XML文件中读取信息:
例
CD info will be listed here...
例子解释 - HTML页面
当用户选择在下拉列表中CD的上方,一个叫函数" showCD() "被执行。 该功能通过触发"onchange"事件:
<html>
<head>
<script>
function showCD(str)
{
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
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) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcd.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
</body>
</html>
该showCD()函数执行以下操作:
- 检查是否选择一个CD
- 创建XMLHttpRequest对象
- 创建功能被执行时,服务器响应就绪
- 发送请求关闭到文件服务器上
- 请注意,一个参数(q)被添加到URL(用下拉列表的内容)
PHP文件
通过JavaScript调用上面的服务器上的页面调用的PHP文件"getcd.php" 。
PHP脚本加载XML文档,“ cd_catalog.xml ”,违背了XML文件的查询,并返回结果为HTML:
<?php
$q=$_GET["q"];
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1) {
if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
{
$y=($x->item($i)->parentNode);
}
}
}
$cd=($y->childNodes);
for ($i=0;$i<$cd->length;$i++)
{
//Process only element nodes
if ($cd->item($i)->nodeType==1) {
echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br>");
}
}
?>
当CD查询从JavaScript的发送到PHP页面,将出现以下情况:
- PHP创建一个XML DOM对象
- 找到所有<artist>从JavaScript发送的名称相匹配的元素
- 输出的专辑信息(send to the "txtHint" placeholder)