AJAX can be used for interactive communication with an XML file.
AJAX可以通过使用XML文件来让信息产生互动
AJAX XML 实例
In the AJAX example below we will demonstrate how a web page can fetch information from an XML file using AJAX technology.
在先面的AJAX实例中我们将演示如何让WEB页面使用AJAX技术来获取到来自XML文件的信息
从下拉框中选择一盘CD
TITLE: Greatest Hits
ARTIST: Dolly Parton
COUNTRY: USA
COMPANY: RCA
PRICE: 9.90
YEAR: 1982
AJAX 实例解析
The example above contains a simple HTML form and a link to a JavaScript:
上面的举例包含了简单的HTML表单以及连接到JS的link：
<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="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>
</body>
</html>
|
As you can see it is just a simple HTML form with a simple drop down box called "cds".
正如你所看到的，它只是简单的HTML表单，里面有个名为"cds"的下拉框
The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.
在表单下面的段落里有一个名为"txtHint"的div。它可用来显示从web服务器上获取到的信息
When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCD is called.
当用户选择了信息，一个名为"showCD"的函数就会被执行。这个函数执行与"onchange"事件相关联。换句话说：每当用户改变了下拉框里的内容，这个函数就会执行。
The JavaScript code is listed below.
JS代码将在下面列出
The AJAX JavaScript
This is the JavaScript code stored in the file "selectcd.js":
这个名为"selectcd.js"的JS文件保存了我们前面所讲到的代码：
var xmlHttp
function showCD(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
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 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
|
AJAX 服务端页面
The server paged called by the JavaScript, is a simple ASP file called "getcd.asp".
被JS所调用的服务端页面名为"getcd.asp"。
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
这个页面是用VBScript写的，可运行在IIS上。它可以非常容易的写成其他服务端脚本语言。
The code runs a query against an XML file and returns the result as HTML:
代码会对XML文件进行查询，并将结果返回到以HTML的形式返回：
q=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 />")
next
next
|