AJAX XML 實例
在下面的 AJAX 實例中,我們將演示如何通過使用 AJAX 技術,從 XML 文件中讀取信息。
在下面的下列列表中選擇一個 CD
在此列出 CD 信息。
AJAX 實例解釋
上面的例子包含了一個簡單的 HTML 表單,以及指向一段 JavaScript 的鏈接:
<html> <head><script src="selectcd.js"></script></head> <body> <form> 選擇 CD: <selectname="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> <divid="txtHint"><em>在此列出 CD 信息。</em></div> </p> </body> </html>
正如您所看到的,它只是一個帶有名為 "cds" 的下拉列表的簡單 HTML 表單。
表單下面的段落包含一個名為 "txtHint" 的 div。該 div 用作從 web 服務器接受的數(shù)據(jù)的位置占位符。
當用戶選擇列表時,名為 "showCD" 的函數(shù)就會被執(zhí)行。該函數(shù)的執(zhí)行是 "onchange" 事件觸發(fā)的。換句話說,每當用戶改變了下拉列表的值,這個 showCD 函數(shù)就會被調(diào)用。
下面列出了 JavaScript 代碼。
AJAX JavaScript
這是存儲在文件 "selectcd.js" 中的 JavaScript 代碼:
var xmlHttpfunction 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(){ 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; }
AJAX 服務器頁面
被 JavaScript 調(diào)用的服務器頁面,是名為 "getcd.asp" 的簡單 ASP 文件。
該頁面使用 VBScript 編寫,針對 Internet 信息服務器 (IIS)?梢杂 PHP 或其他服務器語言,簡單地重寫該頁面。
請看在 PHP 中對應的例子(測試:缺具體頁面)。
該代碼執(zhí)行針對 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
%>






QQ空間
新浪微博
開心網(wǎng)
人人網(wǎng)