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
|