AJAX Basic
AJAX基础
AJAX HOME
AJAX首页
AJAX Intro
AJAX简介
AJAX Request
AJAX请求
AJAX Example
AJAX实例
AJAX Browsers
AJAX浏览器
AJAX XMLHttpRequest
AJAX XMLHttpRequest对象
AJAX Server
AJAX服务器端
AJAX Server Script
AJAX服务器脚本
AJAX Advanced
AJAX高阶
AJAX Suggest
AJAX建议
AJAX Source
AJAX源码
AJAX Database
AJAX数据库
AJAX XML File
AJAX XML文件
AJAX ResponseXML
AJAX响应XML
AJAX Examples
AJAX范例
AJAX XML Example
AJAX XML 实例
AJAX can be used for interactive communication with an XML file.
AJAX同样可以用于与XML文件进行交互。
AJAX XML example
AJAX XML 实例
The following example will demonstrate how a web page can fetch information from an XML file with AJAX technology.
接下来的例子将演示网页如何利用AJAX技术从XML文件中获取数据信息。
Select a cd in the drop-down box below:
在下拉框中选择一张CD：
AJAX example explained
AJAX 例子解释
The example above contains a simple HTML form and a link to a JavaScript:
上面的例子由一个简单的HTML表单和一个JavaScript外部链接构成：
| <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> <div id="txtHint"><b>CD info will be listed here.</b></div> </body> </html> |
As you can see it is just a simple HTML form with a simple drop down box called "cds".
您能看到一个简单的HTML表单和一个叫“cds”的简单下拉列表框。
The <div> below the form will be used as a placeholder for info retrieved from the web server.
表单下面的<div>标签是用来接收从服务器端发来的数据的占位符。
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”事件触发的。换句话说：每当用户改变了下拉框的值，函数showCD就会被调用执行。
The AJAX JavaScript
AJAX的JavaScript
This is the JavaScript code stored in the file "selectcd.js":
JavaScript代码存储在“selectcd.js”文件中：
| var xmlhttp function 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() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } |
The AJAX server page
AJAX的服务器端网页
The server page called by the JavaScript above, is an ASP file called "getcd.asp".
服务器端网页被以上的JavaScript脚本调用，这个服务端文件叫做“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. Look at a corresponding example in PHP.
这个服务器端文件是用VBScript脚本写成的，运行于IIS服务器上。这个文件也可以很容易的用PHP脚本来重写，或者是其它的服务器端语言。请看对应的PHP脚本重写的实例
The code runs a query against an XML file and returns the result as HTML:
如下代码运行XML查询语句并返回HTML形式的结果：
| <% response.expires=-1 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 %> |
The XML file
XML文件
The XML file used in the example is "cd_catalog.xml". This document contains a CD collection.
例子中用到的XML文件是“cd_catalog.xml”。文档包含收集的CD信息。