AJAX与XML文件(AJAX XML实例,XML文件)W3POP.COM

网络学院 w3pop社区网络资源 IT新闻

w3pop.com :: 网络学院 :: AJAX :: AJAX与XML文件

AJAX: AJAX 实例; AJAX浏览器; AJAX源代码; AJAX服务端; AJAX 数据库; AJAX与XML文件; AJAX XMLHttpRequ..; 微软的Ajax; AJAX 介绍; AJAX HTTP 请求; AJAX 服务器端脚�..; AJAX Suggest 案�..; AJAX ResponseXML; AJAX AppML

No. 1

AJAX与XML文件

作者:w3pop.com 翻译/整理:w3pop.com 发布:2007-04-28 浏览:5625 ::

AJAX 数据库 AJAX XMLHttpRequest

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

CD的信息就会列在下面。

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