DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AJAX教程(11):AJAX XML 實例
AJAX教程(11):AJAX XML 實例
編輯:關於JavaScript     

AJAX 可用來與 XML 文件進行交互式通信。

AJAX XML 實例

在下面的 AJAX 實例中,我們將演示如何通過使用 AJAX 技術,從 XML 文件中讀取信息。

在下面的下列列表中選擇一個 CD

在此列出 CD 信息。

AJAX 實例解釋

上面的例子包含了一個簡單的 HTML 表單,以及指向一段 JavaScript 的鏈接:

<html>
<head>
<script src="selectcd.js"></script>
</head>

<body>

<form> 
選擇 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"><em>在此列出 CD 信息。</em></div>
</p>

</body>
</html>

正如您所看到的,它只是一個帶有名為 "cds" 的下拉列表的簡單 HTML 表單。

表單下面的段落包含一個名為 "txtHint" 的 div。該 div 用作從 web 服務器接受的數據的位置占位符。

當用戶選擇列表時,名為 "showCD" 的函數就會被執行。該函數的執行是 "onchange" 事件觸發的。換句話說,每當用戶改變了下拉列表的值,這個 showCD 函數就會被調用。

下面列出了 JavaScript 代碼。

AJAX JavaScript

這是存儲在文件 "selectcd.js" 中的 JavaScript 代碼:

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()
{
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 調用的服務器頁面,是名為 "getcd.asp" 的簡單 ASP 文件。

該頁面使用 VBScript 編寫,針對 Internet 信息服務器 (IIS)。可以用 PHP 或其他服務器語言,簡單地重寫該頁面。

請看在 PHP 中對應的例子(測試:缺具體頁面)。

該代碼執行針對 XML 文件的查詢,並以 HTML 返回結果:

<%
response.expires=-1
q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved