|
檢索 XML
下一步就是編寫一個 HTML 頁面（如 清單 2 所示）從服務(wù)器讀取數(shù)據(jù)并檢驗瀏覽器和服務(wù)器之間使用的 Ajax 連接。這段 HTML 代碼包含內(nèi)嵌的 JavaScript 代碼，檢索 XML 并打開一個警告窗口顯示服務(wù)器返回的文本。
清單 2. 簡單的 Ajax 讀取數(shù)據(jù)頁面
<html>
<body>
<script>
function processReqChange()
{
if (req.readyState == 4 && req.status == 200 && req.responseXML != null)
{
alert( req.responseText );
}
}
function loadXMLDoc( url )
{
req = false;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
}
else if(window.ActiveXObject)
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send("");
}
}
loadXMLDoc( "http://localhost/kenburns/slides.php" );
</script>
</body>
</html>
代碼從指定的 URL 獲取 XML 內(nèi)容，然后 loadXMLDoc 函數(shù)啟動 Ajax 請求。檢索頁面的請求異步發(fā)出并返回結(jié)果。請求完成后，對結(jié)果調(diào)用 processReqChange 函數(shù)。這里用 processReqChange 函數(shù)在警告窗口中顯示 responseText 的函數(shù)值。在我的 Firefox 瀏覽器中調(diào)用該頁面的結(jié)果如 圖 4 所示。
圖 4. 在警告窗口中顯示的 XML
開局不錯。毫無疑問，我們從服務(wù)器取回了 XML 數(shù)據(jù)。但是有必要指出幾點。首先要注意 URL 使用了絕對路徑，包括域名等等。對于 Ajax 來說這是唯一有效的 URL 格式。編寫 Ajax JavaScript 代碼的服務(wù)器代碼總是創(chuàng)建有效的、完整格式的 URL。
這里不那么明顯的另一點是 Ajax 的安全保護措施。JavaScript 代碼不能請求任意的 URL。URL 的域名必須和該頁面相同。在這里域名就是 localhost。但必須指出不能呈現(xiàn) www.mycompany.com 的 HTML 但卻讓腳本從 data.mycompany.com 檢索數(shù)據(jù)。域必須完全相同，包括子域名。
有趣的另一點是 loadXMLDoc 中的代碼，似乎是費力地創(chuàng)建一個請求對象。為何這么麻煩呢？Internet Explorer 7 的預(yù)覽版沒有內(nèi)建 XMLHTTPRequest 對象類型。因此必須使用 Microsoft ActiveX® 控件。
最后在 processReqChange 函數(shù)中，可以看到我在查看 readyState 是否等于 4，status 是否設(shè)為 200。readyState 的值 4 表示事務(wù)已經(jīng)完成。status 的值 200 表示頁面是有效的。如果沒有找到頁面，就可能會得到錯誤消息 404，就像您在瀏覽器中看到的那樣。這里沒有處理異常情況，因為這僅僅是一個例子，不過發(fā)布的 Ajax 代碼應(yīng)該處理返回錯誤的請求。
出處：IBM developerWorks
責(zé)任編輯：moby
上一頁 用DHTML與XML制作Ajax幻燈片 [1] 下一頁 用DHTML與XML制作Ajax幻燈片 [3]
◎進入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 2 頁 用DHTML與XML制作Ajax幻燈片 [2]
