智頡分享報第0105期

【第0105期2006/10/10】

本週主題

最新消息

　

「 Notes 8相關訊息」

Notes 8相關資訊首頁:(目前代號為:"Hannover"):

http://www-142.ibm.com/software/sw-lotus/products/product4.nsf/wdocs/hannover

Notes 8支援Open Document Format (ODF)文件格式:

http://www-142.ibm.com/software/sw-lotus/products/product4.nsf/wdocs/productivitytools

Designing "Hannover" - read the blog:

http://www-03.ibm.com/developerworks/blogs/page/marybeth
　

下載Demo資料:

http://demos.dfw.ibm.com/on_demand/Demo/IBM_Demo_Hannover_The_Future_of_Lotus_Notes-May06.html?S=index

文章分享

　

掌握 Ajax，第2部分: 使用 JavaScript 和 Ajax 發出非同步請求

　

原文網址: http://www-128.ibm.com/developerworks/xml/library/wa-ajaxintro2/

　

　

在 Web 請求中使用 XMLHttpRequest

級別: 中級

Brett McLaughlin (brett@newInstance.com), 作家，編輯, O'Reilly Media Inc.
2006 年 2 月 16 日
多數 Web 應用程式都使用請求/回應模型從伺服器上獲得完整的 HTML 頁面。常常是按下一個按鈕，等待伺服器回應，再按下另一個按鈕，然後再等待，這樣一個反復的過程。有了 Ajax 和 XMLHttpRequest 物件，就可以使用不必讓使用者等待伺服器回應的請求/回應模型了。本文中，Brett McLaughlin 介紹了如何建立能夠適應不同瀏覽器的 XMLHttpRequest 實例，建立和發送請求，並回應伺服器。

本系列的上一期文章（請參閱參考資料中的連結），我們介紹了 Ajax 應用程式，考察了推動 Ajax 應用程式的基本概念。其中的核心是很多您可能已經瞭解的技術：JavaScript、HTML 和 XHTML、一點動態 HTML 以及 DOM（文件物件模型）。本文將放大其中的一點，把目光放到具體的 Ajax 細節上。

本文中，您將開始接觸最基本和基礎性的有關 Ajax 的全部物件和程式開發方法：XMLHttpRequest 對象。該物件實際上僅僅是一個跨越所有 Ajax 應用程式的公共線程，您可能已經預料到，只有徹底理解該物件才能充分發揮程式開發的潛力。事實上，有時您會發現，要正確地使用 XMLHttpRequest，顯然不能使用 XMLHttpRequest。這到底是怎麼回事呢？

Web 2.0 一瞥

在深入研究程式碼之前首先看看最近的觀點 —— 一定要十分清楚 Web 2.0 這個概念。聽到 Web 2.0 這個詞的時候，應該首先問一問 “Web 1.0 是什麼？” 雖然很少聽人提到 Web 1.0，實際上它指的就是具有完全不同的請求和回應模型的傳統 Web。比如，到 Amazon.com 網站上按下一個按鈕或者輸入搜尋項目。就會對伺服器發送一個請求，然後回應再返回到瀏覽器。該請求不僅僅是圖書和書目列表，而是另一個完整的 HTML 頁面。因此當 Web 瀏覽器用新的 HTML 頁面重繪時，可能會看到閃爍或抖動。事實上，透過看到的每個新頁面可以清晰地看到請求和回應。

Web 2.0（在很大程度上）消除了這種看得見的往復互動。比如存取 Google Maps 或 Flickr 這樣的站點（到這些支援 Web 2.0 和 Ajax 站點的連結請參閱參考資料）。比如在 Google Maps 上，您可以拖動地圖，放大和縮小，只有很少的重繪操作。當然這裏仍然有請求和回應，只不過都藏到了幕後。作為使用者，體驗更加舒適，感覺很像桌面應用程式。這種新的感受和典例就是當有人提到 Web 2.0 時您所體會到的。

需要關心的是如何使這些新的互動成為可能。顯然，仍然需要發出請求和接收回應，但正是針對每次請求/回應互動的 HTML 重繪造成了緩慢、笨拙的 Web 互動的感受。因此很清楚，我們需要一種方法使發送的請求和接收的回應只包含需要的資料而不是整個 HTML 頁面。唯一需要獲得整個新 HTML 頁面的時候就是希望使用者看到新頁面的時候。

但多數互動都是在已有頁面上增加細節、修改主體文字或者覆蓋原有資料。這些情況下，Ajax 和 Web 2.0 方法允許在不更新整個 HTML 頁面的情況下發送和接收資料。對於那些經常上網的人，這種能力可以讓您的應用程式感覺更快、回應更及時，讓他們不時地光顧您的網站。

XMLHttpRequest 簡介

要真正實現這種絢麗的奇跡，必須非常熟悉一個 JavaScript 物件，即 XMLHttpRequest。這個小小的物件實際上已經在幾種瀏覽器中存在一段時間了，它是本專欄今後幾個月中要介紹的 Web 2.0、Ajax 和大部分其他內容的核心。為了讓您快速地瞭解它，下面給出將要用於該物件的很少的幾個 方法和屬性。

open()：建立到伺服器的新請求。

send()：向伺服器發送請求。

abort()：退出目前請求。

readyState：提供目前 HTML 的就緒狀態。

responseText：伺服器返回的請求回應文字。

如果不瞭解這些（或者其中的任何一個），您也不用擔心，後面幾篇文章中我們將介紹每個方法和屬性。現在應該瞭解的是，明確用 XMLHttpRequest 做什麼。要注意這些方法和屬性都與發送請求及處理回應有關。事實上，如果看到 XMLHttpRequest 的所有方法和屬性，就會發現它們都與非常簡單的請求/回應模型有關。顯然，我們不會遇到特別新的 GUI 物件或者建立使用者互動的某種超極神秘的方法，我們將使用非常簡單的請求和非常簡單的回應。聽起來似乎沒有多少吸引力，但是用好該物件可以徹底改變您的應用程式。

簡單的 new

首先需要建立一個新變數並賦給它一個 XMLHttpRequest 物件實例。這在 JavaScript 中很簡單，只要對該物件名使用 new 關鍵字即可，如清單 1 所示。

清單 1. 建立新的 XMLHttpRequest 物件
　

<script language="javascript" type="text/javascript">

var request = new XMLHttpRequest();

</script>

不難吧？記住，JavaScript 不要求指定變數類型，因此不需要像清單 2 那樣做（在 Java 語言中可能需要這樣）。

清單 2. 建立 XMLHttpRequest 的 Java 偽程式碼

XMLHttpRequest request = new XMLHttpRequest();

因此在 JavaScript 中用 var 建立一個變數，給它一個名字（如 “request”），然後賦給它一個新的 XMLHttpRequest 實例。此後就可以在函數中使用該物件了。

　

錯誤處理

在實際上各種事情都可能出錯，而上面的程式碼沒有提供任何錯誤處理。較好的辦法是建立該物件，並在出現問題時優雅地退出。比如，任何較早的瀏覽器（不論您是否相信，仍然有人在使用老版本的 Netscape Navigator）都不支援 XMLHttpRequest，您需要讓這些使用者知道有些地方出了問題。清單 3 說明如何建立該物件，以便在出現問題的時候發出 JavaScript 警告。

清單 3. 建立具有錯誤處理能力的 XMLHttpRequest

<script language="javascript" type="text/javascript">

var request = false;

try {

request = new XMLHttpRequest();

} catch (failed) {

request = false;

}

if (!request)

alert("Error initializing XMLHttpRequest!");

</script>

一定要理解這些步驟：

建立一個新變數 request 並賦予值 false。後面將使用 false 作為判定條件，它表示還沒有建立 XMLHttpRequest 對象。

增加 try/catch 塊：

嘗試建立 XMLHttpRequest 對象。

如果失敗（catch (failed)）則保證 request 的值仍然為 false。

檢查 request 是否仍為 false（如果一切正常就不會是 false）。

如果出現問題（request 是 false）則使用 JavaScript 警告通知使用者出現了問題。

程式碼非常簡單，對大多數 JavaScript 和 Web 開發人員來說，真正理解它要比讀寫程式碼花更長的時間。現在已經得到了一段帶有錯誤檢查的 XMLHttpRequest 物件建立程式碼，還可以告訴您哪兒出了問題。

應付 Microsoft

看起來似乎一切良好，至少在用 Internet Explorer 試驗這些程式碼之前是這樣的。如果這樣試驗的話，就會看到圖 1 所示的糟糕情形。

圖 1. Internet Explorer 報告錯誤

Microsoft 參與了嗎？
關於 Ajax 和 Microsoft 對該領域不斷增長的興趣和參與已經有很多文章進行了介紹。事實上，據說 Microsoft 最新版本的 Internet Explorer —— version 7.0，將在 2006 年下半年推出 —— 將開始直接支援 XMLHttpRequest，讓您使用 new 關鍵字代替所有的 Msxml2.XMLHTTP 建立程式碼。但不要太激動，仍然需要支援舊的瀏覽器，因此跨瀏覽器程式碼不會很快消失。

顯然有什麼地方不對勁，而 Internet Explorer 很難說是一種過時的瀏覽器，因為全世界有 70% 在使用 Internet Explorer。換句話說，如果不支援 Microsoft 和 Internet Explorer 就不會受到 Web 世界的歡迎！因此我們需要採用不同的方法處理 Microsoft 瀏覽器。

經驗證發現 Microsoft 支援 Ajax，但是其 XMLHttpRequest 版本有不同的稱呼。事實上，它將其稱為幾種不同的東西。如果使用較新版本的 Internet Explorer，則需要使用物件 Msxml2.XMLHTTP，而較老版本的 Internet Explorer 則使用 Microsoft.XMLHTTP。我們需要支援這兩種物件類型（同時還要支援非 Microsoft 瀏覽器）。請看看清單 4，它在前述程式碼的基礎上增加了對 Microsoft 的支援。

清單 4. 增加對 Microsoft 瀏覽器的支援

<script language="javascript" type="text/javascript">

var request = false;

try {

request = new XMLHttpRequest();

} catch (trymicrosoft) {

try {

    request = new ActiveXObject("Msxml2.XMLHTTP");

} catch (othermicrosoft) {

    try {

      request = new ActiveXObject("Microsoft.XMLHTTP");

    } catch (failed) {

      request = false;

    }

}

}

if (!request)

alert("Error initializing XMLHttpRequest!");

</script>

很容易被這些花括弧迷住了眼睛，因此下面分別介紹每一步：

建立一個新變數 request 並賦值 false。使用 false 作為判斷條件，它表示還沒有建立 XMLHttpRequest 對象。

增加 try/catch 塊：

嘗試建立 XMLHttpRequest 對象。

如果失敗（catch (trymicrosoft)）：

嘗試使用較新版本的 Microsoft 瀏覽器建立 Microsoft 相容的對象（Msxml2.XMLHTTP）。

如果失敗（catch (othermicrosoft)）嘗試使用較老版本的 Microsoft 瀏覽器建立 Microsoft 相容的對象（Microsoft.XMLHTTP）。

如果失敗（catch (failed)）則保證 request 的值仍然為 false。

檢查 request 是否仍然為 false（如果一切順利就不會是 false）。

如果出現問題（request 是 false）則使用 JavaScript 警告通知使用者出現了問題。

這樣修改程式碼之後再使用 Internet Explorer 試驗，就應該看到已經建立的表單（沒有錯誤消息）。我實驗的結果如圖 2 所示。

圖 2. Internet Explorer 正常工作

　

靜態與動態

再看一看清單 1、3 和 4，注意，所有這些程式碼都直接嵌入在 script 標記中。像這種不放到方法或函數體中的 JavaScript 程式碼稱為靜態 JavaScript。就是說程式碼是在頁面顯示給使用者之前的某個時候執行。（雖然根據規範不能完全精確地 知道這些程式碼何時執行對瀏覽器有什麼影響，但是可以保證這些程式碼在使用者能夠與頁面互動之前執行。）這也是多數 Ajax 程式設計師建立 XMLHttpRequest 物件的一般方式。

就是說，也可以像清單 5 那樣將這些程式碼放在一個方法中。

清單 5. 將 XMLHttpRequest 建立程式碼移動到方法中

<script language="javascript" type="text/javascript">

var request;

function createRequest() {

try {

    request = new XMLHttpRequest();

} catch (trymicrosoft) {

    try {

      request = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (othermicrosoft) {

      try {

        request = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (failed) {

        request = false;

      }

   }

}

if (!request)

    alert("Error initializing XMLHttpRequest!");

}

</script>

如果按照這種方式編寫程式碼，那麼在處理 Ajax 之前需要使用該方法。因此還需要清單 6 這樣的程式碼。

　

清單 6. 使用 XMLHttpRequest 的建立方法

<script language="javascript" type="text/javascript">

var request;

function createRequest() {

try {

    request = new XMLHttpRequest();

} catch (trymicrosoft) {

    try {

      request = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (othermicrosoft) {

      try {

        request = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (failed) {

        request = false;

      }

    }

}

if (!request)

    alert("Error initializing XMLHttpRequest!");

}

function getCustomerInfo() {

createRequest();

// Do something with the request variable

}

</script>

此程式碼唯一的問題是推遲了錯誤通知，這也是多數 Ajax 程式設計師不採用這一方法的原因。假設一個複雜的表單有 10 或 15 個欄位、選擇框等，當使用者在第 14 個欄位（按照表單順序從上到下）輸入文字時要啟動某些 Ajax 程式碼。這時候執行 getCustomerInfo() 嘗試建立一個 XMLHttpRequest 物件，但（對於本例來說）失敗了。然後向使用者顯示一條警告，明確地告訴他們不能使用該應用程式。但使用者已經花費了很多時間在表單中輸入資料！這是非常令人討厭的，而討厭顯然不會吸引使用者再次存取您的網站。
如果使用靜態 JavaScript，使用者在按下頁面的時候很快就會看到錯誤資訊。這樣也很煩人，是不是？可能令使用者錯誤地認為您的 Web 應用程式不能在他的瀏覽器上執行。不過，當然要比他們花費了 10 分鐘輸入資訊之後再顯示同樣的錯誤要好。因此，我建議編寫靜態的程式碼，讓使用者盡可能早地發現問題。
　

用 XMLHttpRequest 發送請求

得到請求物件之後就可以進入請求/回應迴圈了。記住，XMLHttpRequest 唯一的目的是讓您發送請求和接收回應。其他一切都是 JavaScript、CSS 或頁面中其他程式碼的工作：改變使用者介面、切換圖像、解釋伺服器返回的資料。準備好 XMLHttpRequest 之後，就可以向伺服器發送請求了。

歡迎使用沙箱

Ajax 採用一種沙箱安全模型。因此，Ajax 程式碼（具體來說就是 XMLHttpRequest 物件）只能對所在的同一個網域發送請求。以後的文章中將進一步介紹安全和 Ajax，現在只要知道在本地機器上執行的程式碼只能對本地機器上的伺服器端Script發送請求。如果讓 Ajax 程式碼在 www.breakneckpizza.com 上執行，則必須 www.breakneck.com 中執行的Script發送請求。

設定伺服器 URL

首先要確定連接的伺服器的 URL。這並不是 Ajax 的特殊要求，但仍然是建立連接所必需的，顯然現在您應該知道如何架構 URL 了。多數應用程式中都會結合一些靜態資料和使用者處理的表單中的資料來架構該 URL。比如，清單 7 中的 JavaScript 程式碼獲取電話號碼欄位的值並用其架構 URL。

清單 7. 建立請求 URL

<script language="javascript" type="text/javascript">

   var request = false;

   try {

     request = new XMLHttpRequest();

   } catch (trymicrosoft) {

     try {

       request = new ActiveXObject("Msxml2.XMLHTTP");

     } catch (othermicrosoft) {

       try {

         request = new ActiveXObject("Microsoft.XMLHTTP");

       } catch (failed) {

         request = false;

       }

     }

   }

   if (!request)

     alert("Error initializing XMLHttpRequest!");

   function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

   }

</script>

這裏沒有難懂的地方。首先，程式碼建立了一個新變數 phone，並把 ID 為 “phone” 的表單字串的值賦予給它。清單 8 展示了這個表單的 XHTML，其中可以看到 phone 欄位及其 id 屬性。

清單 8. Break Neck Pizza 表單

  <body>

<p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>

<form action="POST">

   <p>Enter your phone number:

    <input type="text" size="14" name="phone" id="phone"

           onChange="getCustomerInfo();" />

   </p>

   <p>Your order will be delivered to:</p>

   <div id="address"></div>

   <p>Type your order in here:</p>

   <p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>

   <p><input type="submit" value="Order Pizza" id="submit" /></p>

</form>

</body>

還要注意，當使用者輸入電話號碼或者改變電話號碼時，將觸發清單 8 所示的 getCustomerInfo() 方法。該方法取得電話號碼並架構存儲在 url 變數中的 URL 字串。記住，由於 Ajax 程式碼是沙箱型的，因而只能連接到同一個網域，實際上 URL 中不需要功能變數名稱。該範例中的Script名為 /cgi-local/lookupCustomer.php。最後，電話號碼作為 GET 參數附加到該Script中："phone=" + escape(phone)。

如果以前沒用見過 escape() 方法，它用於轉義不能用明文正確發送的任何字元。比如，電話號碼中的空格將被轉換成字元 %20，從而能夠在 URL 中傳遞這些字元。
可以根據需要添加任意多個參數。比如，如果需要增加另一個參數，只需要將其附加到 URL 中並用 “與”（&）字元分開 [第一個參數用問號（?）和Script名分開]。

打開請求

open() 是打開嗎？
Internet 開發人員對 open() 方法到底做什麼沒有達成一致。但它實際上並不是打開一個請求。如果監控 XHTML/Ajax 頁面及其連接Script之間的網路和資料傳遞，當使用 open() 方法時將看不到任何通訊。不清楚為何選用了這個名字，但顯然不是一個好的選擇。

有了要連接的 URL 後就可以配置請求了。可以用 XMLHttpRequest 物件的 open() 方法來完成。該方法有五個參數：

request-type：發送請求的類型。典型的值是 GET 或 POST，但也可以發送 HEAD 請求。

url：要連接的 URL。

asynch：如果希望使用非同步連接則為 true，否則為 false。該參數是可選的，默認為 true。

username：如果需要身份驗證，則可以在此指定使用者名。該可選參數沒有預設值。

password：如果需要身份驗證，則可以在此指定密碼。該可選參數沒有預設值。

通常使用其中的前三個參數。事實上，即使需要非同步連接，也應該指定第三個參數為 “true”。這是預設值，但堅持明確指定請求是非同步的還是同步的更容易理解。

將這些結合起來，通常會得到清單 9 所示的一行程式碼。

清單 9. 打開請求

    function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

     request.open("GET", url, true);

   }

一旦設定好了 URL，其他就簡單了。多數請求使用 GET 就夠了（後面的文章中將看到需要使用 POST 的情況），再加上 URL，這就是使用 open() 方法需要的全部內容了。

挑戰非同步性

本系列的後面一篇文章中，我將用很多時間編寫和使用非同步程式碼，但是您應該明白為什麼 open() 的最後一個參數這麼重要。在一般的請求/回應模型中，比如 Web 1.0，使用者端（瀏覽器或者本地機器上執行的程式碼）向伺服器發出請求。該請求是同步的，換句話說，使用者端等待伺服器的回應。當使用者端等待的時候，至少會用某種形式通知您在等待：

沙漏（特別是 Windows 上）。

旋轉的皮球（通常在 Mac 機器上）。

應用程式基本上凍結了，然後過一段時間游標變化了。

這正是 Web 應用程式讓人感到笨拙或緩慢的原因 —— 缺乏真正的互動性。按下按鈕時，應用程式實際上變得不能使用，直到剛剛觸發的請求得到回應。如果請求需要大量伺服器處理，那麼等待的時間可能很長（至少在這個多處理器、DSL 沒有等待的世界中是如此）。

而非同步請求不等待伺服器回應。發送請求後應用程式繼續執行。使用者仍然可以在 Web 表單中輸入資料，甚至離開表單。沒有旋轉的皮球或者沙漏，應用程式也沒有明顯的凍結。伺服器悄悄地回應請求，完成後告訴原來的請求者工作已經結束（具體的辦法很快就會看到）。結果是，應用程式感覺不那麼遲鈍或者緩慢，而是回應迅速、互動性強，感覺快多了。這僅僅是 Web 2.0 的一部分，但它是很重要的一部分。所有老套的 GUI 組件和 Web 設計典例都不能克服緩慢、同步的請求/回應模型。

發送請求

一旦用 open() 配置好之後，就可以發送請求了。幸運的是，發送請求的方法的名稱要比 open() 適當，它就是 send()。

send() 只有一個參數，就是要發送的內容。但是在考慮這個方法之前，回想一下前面已經透過 URL 本身發送過資料了：

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

雖然可以使用 send() 發送資料，但也能透過 URL 本身發送資料。事實上，GET 請求（在典型的 Ajax 應用中大約占 80%）中，用 URL 發送資料要容易得多。如果需要發送安全資訊或 XML，可能要考慮使用 send() 發送內容（本系列的後續文章中將討論安全資料和 XML 消息）。如果不需要透過 send() 傳遞資料，則只要傳遞 null 作為該方法的參數即可。因此您會發現在本文中的例子中只需要這樣發送請求（參見清單 10）。

清單 10. 發送請求

    function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

     request.open("GET", url, true);

     request.send(null);

   }

指定回調方法

現在我們所做的只有很少一點是新的、革命性的或非同步的。必須承認，open() 方法中 “true” 這個小小的關鍵字建立了非同步請求。但是除此之外，這些程式碼與用 Java servlet 及 JSP、PHP 或 Perl 程式開發沒有什麼兩樣。那麼 Ajax 和 Web 2.0 最大的秘密是什麼呢？秘密就在於 XMLHttpRequest 的一個簡單屬性 onreadystatechange。

首先一定要理解這些程式碼中的流程（如果需要請回顧清單 10）。建立其請求然後發出請求。此外，因為是非同步請求，所以 JavaScript 方法（例子中的 getCustomerInfo()）不會等待伺服器。因此程式碼將繼續執行，就是說，將退出該方法而把控制返回給表單。使用者可以繼續輸入資訊，應用程式不會等待伺服器。

這就提出了一個有趣的問題：伺服器完成了請求之後會發生什麼？答案是什麼也不發生，至少對現在的程式碼而言如此！顯然這樣不行，因此伺服器在完成透過 XMLHttpRequest 發送給它的請求處理之後需要某種指示說明怎麼做。



在 JavaScript 中引用函數
JavaScript 是一種弱類型的語言，可以用變數引用任何東西。因此如果聲明了一個函數 updatePage()，JavaScript 也將該函數名看作是一個變數。換句話說，可用變數名 updatePage 在程式碼中引用函數。

現在 onreadystatechange 屬性該登場了。該屬性允許指定一個回調函數。回調允許伺服器（猜得到嗎？）反向使用 Web 頁面中的程式碼。它也給了伺服器一定程度的控制權，當伺服器完成請求之後，會查看 XMLHttpRequest 物件，特別是 onreadystatechange 屬性。然後使用該屬性指定的任何方法。之所以稱為回調是因為伺服器向網頁發起使用，無論網頁本身在做什麼。比方說，可能在使用者坐在椅子上手沒有碰鍵盤的時候使用該方法，但是也可能在使用者輸入、移動滑鼠、滾動螢幕或者按下按鈕時使用該方法。它並不關心使用者在做什麼。

這就是稱之為非同步的原因：使用者在一層上操作表單，而在另一層上伺服器回應請求並觸發 onreadystatechange 屬性指定的回調方法。因此需要像清單 11 一樣在程式碼中指定該方法。

清單 11. 設定回調方法

    function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

     request.open("GET", url, true);

     request.onreadystatechange = updatePage;

     request.send(null);

   }

需要特別注意的是該屬性在程式碼中設定的位置 —— 它是在使用 send() 之前設定的。發送請求之前必須設定該屬性，這樣伺服器在回答完成請求之後才能查看該屬性。現在剩下的就只有編寫 updatePage() 方法了，這是本文最後一節要討論的重點。

處理伺服器回應

發送請求，使用者高興地使用 Web 表單（同時伺服器在處理請求），而現在伺服器完成了請求處理。伺服器查看 onreadystatechange 屬性確定要使用的方法。除此以外，可以將您的應用程式看作其他應用程式一樣，無論是否非同步。換句話說，不一定要採取特殊的動作編寫回應伺服器的方法，只需要改變表單，讓使用者存取另一個 URL 或者做回應伺服器需要的任何事情。這一節我們重點討論對伺服器的回應和一種典型的動作 —— 即時改變使用者看到的表單中的一部分。

回調和 Ajax

現在我們已經看到如何告訴伺服器完成後應該做什麼：將 XMLHttpRequest 物件的 onreadystatechange 屬性設定為要執行的函數名。這樣，當伺服器處理完請求後就會自動使用該函數。也不需要擔心該函數的任何參數。我們從一個簡單的方法開始，如清單 12 所示。

清單 12. 回調方法的程式碼

<script language="javascript" type="text/javascript">

   var request = false;

   try {

     request = new XMLHttpRequest();

   } catch (trymicrosoft) {

     try {

       request = new ActiveXObject("Msxml2.XMLHTTP");

     } catch (othermicrosoft) {

       try {

         request = new ActiveXObject("Microsoft.XMLHTTP");

       } catch (failed) {

         request = false;

       }

     }

   }

   if (!request)

     alert("Error initializing XMLHttpRequest!");

   function getCustomerInfo() {

     var phone = document.getElementById("phone").value;

     var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

     request.open("GET", url, true);

     request.onreadystatechange = updatePage;

     request.send(null);

   }

   function updatePage() {

     alert("Server is done!");

   }

</script>

它僅僅發出一些簡單的警告，告訴您伺服器什麼時候完成了任務。在自己的網頁中試驗這些程式碼，然後在瀏覽器中打開（如果希望查看該例中的 XHTML，請參閱清單 8）。輸入電話號碼然後離開該欄位，將看到一個彈出的警告視窗（如圖 3 所示），但是按下 OK 又出現了……

圖 3. 彈出警告的 Ajax 程式碼

根據瀏覽器的不同，在表單停止彈出警告之前會看到兩次、三次甚至四次警告。這是怎麼回事呢？原來我們還沒有考慮 HTTP 就緒狀態，這是請求/回應迴圈中的一個重要部分。

HTTP 就緒狀態

前面提到，伺服器在完成請求之後會在 XMLHttpRequest 的 onreadystatechange 屬性中查找要使用的方法。這是真的，但還不完整。事實上，每當 HTTP 就緒狀態改變時它都會使用該方法。這意味著什麼呢？首先必須理解 HTTP 就緒狀態。

HTTP 就緒狀態表示請求的狀態或情形。它用於確定該請求是否已經開始、是否得到了回應或者請求/回應模型是否已經完成。它還可以幫助確定讀取伺服器提供的回應文字或資料是否安全。在 Ajax 應用程式中需要瞭解五種就緒狀態：

0：請求沒有發出（在使用 open() 之前）。

1：請求已經建立但還沒有發出（使用 send() 之前）。

2：請求已經發出正在處理之中（這裏通常可以從回應得到內容頭部）。

3：請求已經處理，回應中通常有部分資料可用，但是伺服器還沒有完成回應。

4：回應已完成，可以存取伺服器回應並使用它。

與大多數跨瀏覽器問題一樣，這些就緒狀態的使用也不盡一致。您也許期望任務就緒狀態從 0 到 1、2、3 再到 4，但實際上很少是這種情況。一些瀏覽器從不報告 0 或 1 而直接從 2 開始，然後是 3 和 4。其他瀏覽器則報告所有的狀態。還有一些則多次報告就緒狀態 1。在上一節中看到，伺服器多次使用 updatePage()，每次使用都會彈出警告框 —— 可能和預期的不同！

對於 Ajax 程式開發，需要直接處理的唯一狀態就是就緒狀態 4，它表示伺服器回應已經完成，可以安全地使用回應資料了。基於此，回調方法中的第一行應該如清單 13 所示。

清單 13. 檢查就緒狀態

    function updatePage() {

     if (request.readyState == 4)

       alert("Server is done!");

   }

修改後就可以保證伺服器的處理已經完成。嘗試執行新版本的 Ajax 程式碼，現在就會看到與預期的一樣，只顯示一次警告資訊了。

HTTP 狀態碼

雖然清單 13 中的程式碼看起來似乎不錯，但是還有一個問題 —— 如果伺服器回應請求並完成了處理但是報告了一個錯誤怎麼辦？要知道，伺服器端程式碼應該明白它是由 Ajax、JSP、普通 HTML 表單或其他類型的程式碼使用的，但只能使用傳統的 Web 專用方法報告資訊。而在 Web 世界中，HTTP 程式碼可以處理請求中可能發生的各種問題。

比方說，您肯定遇到過輸入了錯誤的 URL 請求而得到 404 錯誤碼的情形，它表示該頁面不存在。這僅僅是 HTTP 請求能夠收到的眾多錯誤碼中的一種（完整的狀態碼列表請參閱參考資料中的連結）。表示所存取資料受到保護或者禁止存取的 403 和 401 也很常見。無論哪種情況，這些錯誤碼都是從完成的回應 得到的。換句話說，伺服器履行了請求（即 HTTP 就緒狀態是 4）但是沒有返回使用者端預期的資料。

因此除了就緒狀態外，還需要檢查 HTTP 狀態。我們期望的狀態碼是 200，它表示一切順利。如果就緒狀態是 4 而且狀態碼是 200，就可以處理伺服器的資料了，而且這些資料應該就是要求的資料（而不是錯誤或者其他有問題的資訊）。因此還要在回調方法中增加狀態檢查，如清單 14 所示。

清單 14. 檢查 HTTP 狀態碼

    function updatePage() {

     if (request.readyState == 4)

       if (request.status == 200)

         alert("Server is done!");

   }

為了增加更健壯的錯誤處理並儘量避免過於複雜，可以增加一兩個狀態碼檢查，請看一看清單 15 中修改後的 updatePage() 版本。

清單 15. 增加一點錯誤檢查

    function updatePage() {

     if (request.readyState == 4)

       if (request.status == 200)

         alert("Server is done!");

       else if (request.status == 404)

         alert("Request URL does not exist");

       else

         alert("Error: status code is " + request.status);

   }

現在將 getCustomerInfo() 中的 URL 改為不存在的 URL 看看會發生什麼。應該會看到警告資訊說明要求的 URL 不存在 —— 好極了！很難處理所有的錯誤條件，但是這一小小的改變能夠涵蓋典型 Web 應用程式中 80% 的問題。

讀取回應文字

現在可以確保請求已經處理完成（透過就緒狀態），伺服器給出了正常的回應（透過狀態碼），最後我們可以處理伺服器返回的資料了。返回的資料保存在 XMLHttpRequest 物件的 responseText 屬性中。

關於 responseText 中的文字內容，比如格式和長度，有意保持含糊。這樣伺服器就可以將文字設定成任何內容。比方說，一種Script可能返回逗號分隔的值，另一種則使用管道符（即 | 字元）分隔的值，還有一種則返回長文字字串。何去何從由伺服器決定。

在本文使用的例子中，伺服器返回客戶的上一個訂單和客戶位址，中間用管道符分開。然後使用訂單和位址設定表單中的元素值，清單 16 給出了更新顯示內容的程式碼。

清單 16. 處理伺服器回應

function updatePage() {

     if (request.readyState == 4) {

       if (request.status == 200) {

         var response = request.responseText.split("|");

         document.getElementById("order").value = response[0];

         document.getElementById("address").innerHTML =

           response[1].replace(/\n/g, "
");

       } else

         alert("status is " + request.status);

     }

   }

首先，得到 responseText 並使用 JavaScript split() 方法從管道符分開。得到的陣列放到 response 中。陣列中的第一個值 —— 上一個訂單 —— 用 response[0] 存取，被設定為 ID 為 “order” 的欄位的值。第二個值 response[1]，即客戶位址，則需要更多一點處理。因為位址中的行用一般的行分隔符號（“\n”字元）分隔，程式碼中需要用 XHTML 風格的行分隔符號 <br /> 來代替。替換過程使用 replace() 函數和正則運算式完成。最後，修改後的文字作為 HTML 表單 div 中的內部 HTML。結果就是表單突然用客戶資訊更新了，如圖 4 所示。

圖 4. 收到客戶資料後的 Break Neck 表單

　

結束本文之前，我還要介紹 XMLHttpRequest 的另一個重要屬性 responseXML。如果伺服器選擇使用 XML 回應則該屬性包含（也許您已經猜到）XML 回應。處理 XML 回應和處理普通文字有很大不同，涉及到解析、文件物件模型（DOM）和其他一些問題。後面的文章中將進一步介紹 XML。但是因為 responseXML 通常和 responseText 一起討論，這裏有必要提一提。對於很多簡單的 Ajax 應用程式 responseText 就夠了，但是您很快就會看到透過 Ajax 應用程式也能很好地處理 XML。

結束語

您可能對 XMLHttpRequest 感到有點厭倦了，我很少看到一整篇文章討論一個物件，特別是這種簡單的物件。但是您將在使用 Ajax 編寫的每個頁面和應用程式中反復使用該物件。坦白地說，關於 XMLHttpRequest 還真有一些可說的內容。下一期文章中將介紹如何在請求中使用 POST 及 GET，來設定請求中的內容頭部和從伺服器回應讀取內容頭部，理解如何在請求/回應模型中編碼請求和處理 XML。

再往後我們將介紹常見 Ajax 工具箱。這些工具箱實際上隱藏了本文所述的很多細節，使得 Ajax 程式開發更容易。您也許會想，既然有這麼多工具箱為何還要對底層的細節編碼。答案是，如果不知道應用程式在做什麼，就很難發現應用程式中的問題。

因此不要忽略這些細節或者簡單地瀏覽一下，如果便捷華麗的工具箱出現了錯誤，您就不必撓頭或者發送郵件請求支援了。如果瞭解如何直接使用 XMLHttpRequest，就會發現很容易調試和解決最奇怪的問題。只有讓其解決您的問題，工具箱才是好東西。

因此請熟悉 XMLHttpRequest 吧。事實上，如果您有使用工具箱的 Ajax 程式碼，可以嘗試使用 XMLHttpRequest 物件及其屬性和方法重新改寫。這是一種不錯的練習，可以幫助您更好地理解其中的原理。

下一期文章中將進一步討論該物件，探討它的一些更有趣的屬性（如 responseXML），以及如何使用 POST 請求和以不同的格式發送資料。請開始編寫程式碼吧，一個月後我們再繼續討論。

　

參考資料

學習

您可以參閱本文在 developerWorks 全球站點上的英文原文。

掌握 Ajax，第 1 部分: Ajax 簡介（developerWorks，2005 年 12 月）幫助您瞭解 Ajax，這是一種構建網站的高生產率方法。（本文中的參考資料列表都值得存取！）

面向 Java 開發人員的 Ajax: 構建動態的 Java 應用程式（developerWorks，2005 年 9 月）介紹了這種革新方法，它解決了頁面重新載入難題，可以建立動態的 Web 應用程式體驗。

面向 Java 開發人員的 Ajax: Ajax 的 Java 物件序列化（developerWorks，2005 年 10 月）介紹了在 Ajax 應用程式中對資料進行序列化的五種方法。

使用 AJAX 使用 SOAP Web 服務，第 1 部分: 構建 Web 服務使用者端（developerWorks，2005 年 10 月）是關於集成 Ajax 和現有基於 SOAP 的 web 服務的相當進階的文章。

Google GMail 是一個很好的例子，說明了基於 Ajax 的應用程式如何改變 Web 的工作方式。

Google Maps 是另一種基於 Google 的 Web 2.0 應用程式。

Flickr 是一個很好的例子，說明如何使用 Ajax 建立類似桌面的 Web 應用程式。

Ajax: A New Approach to Web Applications 發明了 Ajax 一詞，所有 Ajax 開發人員都應該讀一讀。

Why Ajax Matters Now 告訴您為什麼 Ajax 很重要。

如果使用的是 Microsoft 瀏覽器 Internet Explorer，請存取 Microsoft Developer Network's XML Developer Center。

請透過線上文件進一步瞭解 MSXML，Microsoft XML 解析器。

看一看回應中包含的所有 HTTP 狀態碼列表。

developerWorks Web Architecture 專區專門發表各種基於 Web 的解決方案的文章。

獲得產品和技術

Elisabeth Freeman、Eric Freeman 和 Brett McLaughlin 合著的 Head Rush Ajax（2005 年 2 月，O'Reilly Media, Inc.）以 Head First 風格將本文中所述的內容灌輸到您的頭腦中。

Java and XML, Second Edition（Brett McLaughlin，2001 年 8 月，O'Reilly Media, Inc.）包括作者關於 XHTML 和 XML 轉換的討論。

JavaScript: The Definitive Guide（David Flanagan，2001 年 11 月，O'Reilly Media, Inc.）詳細介紹了如何使用 JavaScript、動態網頁，第二版增加了關於 Ajax 的兩章。

Head First HTML with CSS & XHTML（Elizabeth 和Eric Freeman，2005 年 12 月，O'Reilly Media, Inc.）是學習 XHTML、CSS 以及如何將兩者結合起來的完整參考。

討論

參與論壇討論。

developerWorks blogs：加入 developerWorks 社區。

關於作者

Brett McLaughlin 從 Logo 時代就開始使用電腦。（還記得那個小三角嗎？）近年來，他已經成為 Java 和 XML 社區最著名的作者和程式設計師之一。他曾經在 Nextel Communications 實現過複雜的企業系統，在 Lutris Technologies 編寫過應用伺服器，最近在 O'Reilly Media, Inc. 繼續撰寫和編輯這方面的圖書。Brett 即將出版的新書 Head Rush Ajax，和暢銷書作者 Eric 與 Beth Freeman 一起為 Ajax 帶來了獲獎的革命性 Head First 方法。最近的著作 Java 1.5 Tiger: A Developer's Notebook 是關於 Java 技術最新版本的第一本書，經典的 Java and XML 仍然是在 Java 語言中使用 XML 技術的權威著作。

　

Lotus Notes 技術分享

　

如何在Web上可依據站別名稱與UserName來控制上傳的附加檔案?

相信各位在開發Wrokflow流程表單時,一定會遇到不知如何控制每一流程站所上傳附加檔案的刪除權限的,本期智頡分享報將要提供您一個範例來解決您的問題,此範例可以很容易讓您透過參數來控制權限,因建立此範例程式之步驟較為繁雜,故建議直接至本公司網站下載範例來套用即可,以下說明此範例套用至您AP的方法。

1.      請先複製範例資料庫中的"SubFileUpload"副套表至您的AP資料庫中.

2.      請在您欲套用此功能的套表中,在需要放置附加檔案的位置處插入上述副套表.

3.      請在步驟2套表的最下方,插入如下之HTML語法(記得標記成HTML文字)

<DIV ID="last"></DIV>

　

4.      請在步驟2套表的JS Header中,插入如下之JavaScript語法:

var f = document.forms[0];

//隱藏附加物件

hiddenNotesAttach();

if (WMAttEditMode=="1"){

           WriteFileUpload();

}

wmattachment("1","User01","0"); //此function的參數請自行修改

DispAttachmentList();

5.      請在步驟2套表中建立一些測試按鈕,按鈕程式如下:

wmattachment("1","User01","0"); //此function的參數請自行修改

DispAttachmentList();

　

6.      針對wmattachment("1","User01","0") function的參數說明如下:

第一個參數(String):站別名稱或是代號

第二個參數(String):站別之使用者名稱

第三個參數(String):控制刪除權限

"0":可以刪除全部

                              "1":只能刪除自己

                              "2":只能刪除同一站
                                     "3":關閉刪除功能
　
7. 影像資源DeleteFile.gif不要忘記也要一起複製喔!!
8. Web上測試畫面如下:

註:如有需要可至智頡科技網站（http://www.wmmate.com）下載範例資料庫。

近期電子報內容預告

後續陸續會發行相關技術的電子報

內容預告如下:

Lotus Notes系統整合&應用介紹

內容相當豐富敬請期待...

註:如不想繼續收到本公司之電子報或是要介紹朋友訂閱電子報請至本公司網站線上設定/訂閱

智頡科技股份有限公司

Copyright 1999-2006 版權所有轉載必究

TEL:03-5326262 FAX:03-5344873 Email:support@wmmate.com