首页 > 开发 > AJAX > 正文

AJAX教程(11):AJAX XML 实例

2020-09-19 11:05:16
字体:
来源:转载
供稿:网友

ajax 可用来与 xml 文件进行交互式通信。

ajax xml 实例

在下面的 ajax 实例中,我们将演示如何通过使用 ajax 技术,从 xml 文件中读取信息。

在下面的下列列表中选择一个 cd

在此列出 cd 信息。

ajax 实例解释

上面的例子包含了一个简单的 html 表单,以及指向一段 javascript 的链接:

<html><head><script src="selectcd.js"></script></head><body><form> 选择 cd:<select name="cds" onchange="showcd(this.value)"><option value="bob dylan">bob dylan</option><option value="bonnie tyler">bonnie tyler</option><option value="dolly parton">dolly parton</option> </select></form><p><div id="txthint"><em>在此列出 cd 信息。</em></div></p></body></html>

正如您所看到的,它只是一个带有名为 "cds" 的下拉列表的简单 html 表单。

表单下面的段落包含一个名为 "txthint" 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。

当用户选择列表时,名为 "showcd" 的函数就会被执行。该函数的执行是 "onchange" 事件触发的。换句话说,每当用户改变了下拉列表的值,这个 showcd 函数就会被调用。

下面列出了 javascript 代码。

ajax javascript

这是存储在文件 "selectcd.js" 中的 javascript 代码:

var xmlhttpfunction showcd(str){ xmlhttp=getxmlhttpobject();if (xmlhttp==null)  {  alert ("your browser does not support ajax!");  return;  } var url="getcd.asp";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){ 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;}

ajax 服务器页面

被 javascript 调用的服务器页面,是名为 "getcd.asp" 的简单 asp 文件。

该页面使用 vbscript 编写,针对 internet 信息服务器 (iis)。可以用 php 或其他服务器语言,简单地重写该页面。

请看在 php 中对应的例子(测试:缺具体页面)。

该代码执行针对 xml 文件的查询,并以 html 返回结果:

<%response.expires=-1q=request.querystring("q")set xmldoc=server.createobject("microsoft.xmldom")xmldoc.async="false"xmldoc.load(server.mappath("cd_catalog.xml"))set nodes=xmldoc.selectnodes("catalog/cd[artist='" & q & "']")for each x in nodes  for each y in x.childnodes    response.write("<b>" & y.nodename & ":</b> ")    response.write(y.text)    response.write("<br />")  nextnext%>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表