AJAX教程(11)：AJAX XML 实例

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

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

上面的例子包含了一个简单的 HTML 表单，以及指向一段 JavaScript 的链接：

htmlheadscript src="selectcd.js"/script/headbodyform 选择 CD：select name="cds" onchange="showCD(this.value)"option value="Bob Dylan"Bob Dylan/optionoption value="Bonnie Tyler"Bonnie Tyler/optionoption value="Dolly Parton"Dolly Parton/option /select/formpdiv id="txtHint"em在此列出 CD 信息。/em/div/p/body/html

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

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

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

下面列出了 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;}

被 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.childnodesresponse.write("b" & y.nodename & ":/b ")response.write(y.text)response.write("br /")  nextnext%