AJAX 可与 XML 文件进行交互式通信。
在下面的 AJAX 实例中,我们将演示网页如何使用 AJAX 技术从 XML 文件中读取信息。
本例包括三张页面:
上面的例子包含了一张简单的 HTML 表单,以及指向 JavaScript 的链接:
</>code
- <html>
- <head>
- <script src="selectcd.js"></script>
- </head>
- <body>
- <form>
- Select a CD:
- <select name="cds" onchange="showCD(this.value)">
- <option value="Bob Dylan">Bob Dylan</option>
- <option value="Bee Gees">Bee Gees</option>
- <option value="Cat Stevens">Cat Stevens</option>
- </select>
- </form>
- <p>
- <div id="txtHint"><b>CD info will be listed here.</b></div>
- </p>
- </body>
- </html>
正如您看到的,它仅仅是一张简单的 HTML 表单,其中带有名为 "cds" 的下拉列表。
表单下面的段落包含了一个名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的数据的占位符。
当用户选择数据时,会执行名为 "showCD" 的函数。这个函数的执行是由 "onchange" 事件触发的。
换句话说,每当用户改变了下拉列表中的值,就会调用 showCD 函数。
XML 文件是 "cd_catalog.xml"。该文件中包含了有关 CD 收藏的数据。
这是存储在 "selectcd.js" 文件中的 JavaScript 代码:
</>code
- var xmlHttp
- function showCD(str)
- {
- xmlHttp=GetXmlHttpObject()
- if (xmlHttp==null)
- {
- alert ("Browser does not support HTTP Request")
- return
- }
- var url="getcd.php"
- url=url+"?q="+str
- url=url+"&sid="+Math.random()
- xmlHttp.onreadystatechange=stateChanged
- xmlHttp.open("GET",url,true)
- xmlHttp.send(null)
- }
- function stateChanged()
- {
- if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
- {
- document.getElementById("txtHint").innerHTML=xmlHttp.responseText
- }
- }
- function GetXmlHttpObject()
- {
- var xmlHttp=null;
- try
- {
- // Firefox, Opera 8.0+, Safari
- xmlHttp=new XMLHttpRequest();
- }
- catch (e)
- {
- // Internet Explorer
- try
- {
- xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e)
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- return xmlHttp;
- }
stateChanged() 和 GetXmlHttpObject 函数与上一节中的相同,您可以参阅上一页中的相关解释。
假如选择了下拉列表中的某个项目,则函数执行:
这个被 JavaScript 调用的服务器页面,是一个名为 "getcd.php" 的简单 PHP 文件。
这张页面是用 PHP 编写的,使用 XML DOM 来加载 XML 文档 "cd_catalog.xml"。
代码运行针对 XML 文件的查询,并以 HTML 返回结果:
</>code
- <?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($cd->item($i)->nodeName);
- echo(": ");
- echo($cd->item($i)->childNodes->item(0)->nodeValue);
- echo("<br />");
- }
- }
- ?>
当请求从 JavaScript 发送到 PHP 页面时,发生:
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛
Powered by 365建站网 RSS地图 HTML地图
copyright © 2013-2024 版权所有 鄂ICP备17013400号