W3C School AJAX教程(2)_H5之家 - 中国HTML5教程资源分享第一站

朋友开了一个音乐网站，她希望在网站的首页为浏览站点的用户提供一个下拉菜单，里面是CD名称列表，当用户选择了某个CD则显示这张CD的具体信息，并且由于朋友租用的是廉价的服务器，并没有提供数据库服务，所以她决定用XML来存储CD信息。另外你要知道站点首页的浏览速度总是最重要的，你的朋友可不希望她的站点失去用户。好了，利用现在你所掌握的AJAX知识完全可以帮你的朋友做到这点，动手试试看了。

这是首页，index.html。

<html> <head> <script src="selectcd.js"></script> </head> <body> //代码…… <form> Select a CD: <select> <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><b>CD info will be listed here.</b></div> </p> //代码…… </body> </html>

当用户使用下拉菜单选择CD的时候执行函数showCD()。脚本从服务器获取数据方在txtHint中。

脚本文件selectcd.js

var xmlHttp function showCD(str){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null){ alert ("Your browser does not support AJAX!"); 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) { 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; }

Getcd.php

<?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 />"); } } ?>

好了，本教程到此结束。有疑惑请提问。