AJAX可与XML文件进行交互式通信
。 AJAXXML实例
在下面的AJAX实例中
,我们将演示网页如何使用AJAX技术从XML文件中读取信息
。 在列表中选择一张CD(测试说明:该实例功能未实现)
SelectaCD:BobDylanBeeGeesCatStevens
在此列出CD信息。
本例包括三张页面:
一个简单HTML表单
一个XML文件
一个JavaScript文件
一张
PHP页面
HTML表单
上面的例子包含了一张简单的HTML表单
,以及指向JavaScript的链接:
<html>
<head>
<scriptsrc="selectcd.js"></script>
</head>
<body>
<form>
SelectaCD:
<selectname="cds"onchange="showCD(this.value)">
<optionvalue="BobDylan">BobDylan</option>
<optionvalue="BeeGees">BeeGees</option>
<optionvalue="CatStevens">CatStevens</option>
</select>
</form>
<p>
<divid="txtHint"><b>CDinfowillbelistedhere.</b></div>
</p>
</body>
</html>
例子解释:
正如您看到的,它仅仅是一张简单的HTML表单,其中带有名为"cds"的下拉列表。
表单下面的段落包含了一个名为"txtHint"的div。这个div用作从web
服务器检索到的数据的占位符。
当用户选择数据时,会执行名为"showCD"的函数。这个函数的执行是由"onchange"事件触发的。
换句话说,每当用户改变了下拉列表中的值,就会调用showCD函数。
XML文件
XML文件是"cd_catalog.xml"。该文件中包含了有关CD收藏的数据。
JavaScript
这是存储在"selectcd.js"文件中的JavaScript代码:
varxmlHttp
functionshowCD(str)
{
xmlHttp=GetXmlHttpObject()
if(xmlHttp==null)
{
alert("BrowserdoesnotsupportHTTPRequest")
return
}
varurl="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
functionstateChanged()
{
if(xmlHttp.readyState==4||xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
functionGetXmlHttpObject()
{
varxmlHttp=null;
try
{
//Firefox,Opera8.0+,Safari
xmlHttp=newXMLHttpRequest();
}
catch(e)
{
//InternetExplorer
try
{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
}
returnxmlHttp;
}
例子解释:
stateChanged()和GetXmlHttpObject函数与上一节中的相同,您可以参阅上一页中的相馆解释。
showCD()函数
假如选择了下拉列表中的某个项目,则函数执行:
调用GetXmlHttpObject函数来创建XMLHTTP对象
定义发送到
服务器的URL(文件名)
向URL添加带有下拉列表内容的参数(q)
添加一个随机数,以防服务器使用缓存的文件
当触发事件时调用stateChanged
通过给定的URL打开XMLHTTP对象
向服务器发送HTTP请求
PHP页面
这个被JavaScript调用的服务器页面,是一个名为"getcd.php"的简单PHP文件。
这张页面是用PHP编写的,使用XMLDOM来加载XML文档"cd_catalog.xml"。
代码运行针对XML文件的查询,并以HTML返回结果:
<?php
$q=$_GET["q"];
$xmlDoc=newDOMDocument();
$xmlDoc->load("cd_catalog.xml");
$x=$xmlDoc->getElementsByTagName('ARTIST');
for($i=0;$i<=$x->length-1;$i++)
{
//Processonlyelementnodes
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++)
{
//Processonlyelementnodes
if($cd->item($i)->nodeType==1)
{
echo($cd->item($i)->nodeName);
echo(":");
echo($cd->item($i)->childNodes->item(0)->nodeValue);
echo("<br/>");
}
}
?>
例子解释
当请求从JavaScript发送到PHP页面时,发生:
PHP创建"cd_catalog.xml"文件的XMLDOM对象
循环所有"artist"元素(nodetypes=1),查找与JavaScript所传数据向匹配的名字
找到CD包含的正确artist
输出album的信息,并发送到"txtHint"占位符
cd_catalog.xml
<?xmlversion="1.0"encoding="ISO-8859-1"?>
-<!--EditedbyXMLSpy®
-->
-<CATALOG>
-<CD>
<TITLE>EmpireBurlesque</TITLE>
<ARTIST>BobDylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
-<CD>
<TITLE>Hideyourheart</TITLE>
<ARTIST>BonnieTyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBSRecords</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
-<CD>
<TITLE>GreatestHits</TITLE>
<ARTIST>DollyParton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
-<CD>
<TITLE>Stillgottheblues</TITLE>
<ARTIST>GaryMoore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virginrecords</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
-<CD>
<TITLE>Eros</TITLE>
<ARTIST>ErosRamazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
-<CD>
<TITLE>Onenightonly</TITLE>
<ARTIST>BeeGees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
-<CD>
<TITLE>SylviasMother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
-<CD>
<TITLE>MaggieMay</TITLE>
<ARTIST>RodStewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
-<CD>
<TITLE>Romanza</TITLE>
<ARTIST>AndreaBocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
-<CD>
<TITLE>Whenamanlovesawoman</TITLE>
<ARTIST>PercySledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<TITLE>Blackangel</TITLE>
<ARTIST>SavageRose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
-<CD>
<TITLE>1999GrammyNominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
-<CD>
<TITLE>Forthegoodtimes</TITLE>
<ARTIST>KennyRogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>MucikMaster</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
-<CD>
<TITLE>BigWilliestyle</TITLE>
<ARTIST>WillSmith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
-<CD>
<TITLE>TupeloHoney</TITLE>
<ARTIST>VanMorrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
-<CD>
<TITLE>Theverybestof</TITLE>
<ARTIST>CatStevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
-<CD>
<TITLE>Stop</TITLE>
<ARTIST>SamBrown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>AandM</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
-<CD>
<TITLE>BridgeofSpies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<TITLE>PrivateDancer</TITLE>
<ARTIST>TinaTurner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
-<CD>
<TITLE>Midtomnatten</TITLE>
<ARTIST>KimLarsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
-<CD>
<TITLE>PavarottiGalaConcert</TITLE>
<ARTIST>LucianoPavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
-<CD>
<TITLE>Thedockofthebay</TITLE>
<ARTIST>OtisRedding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<TITLE>Picturebook</TITLE>
<ARTIST>SimplyRed</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
-<CD>
<TITLE>Red</TITLE>
<ARTIST>TheCommunards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<TITLE>Unchainmyheart</TITLE>
<ARTIST>JoeCocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>