【第0106期2006/11/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

Top

文章分享

　

掌握 Ajax，第3部分: Ajax 中的進階請求和回應

　

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

　

　

全面理解 HTTP 的狀態代碼、就緒狀態和 XMLHttpRequest 物件

級別: 初級

Brett McLaughlin (brett@newInstance.com), 作家，編輯, O'Reilly Media Inc.

2006 年 3 月 23 日

對於很多 Web 開發人員來說，只需要建立簡單的請求並接收簡單的回應即可；但是對於希望掌握 Ajax 的開發人員來說，必須要全面理解 HTTP 狀態代碼、就緒狀態和 XMLHttpRequest 物件。在本文中，Brett McLaughlin 將向您介紹各種狀態代碼，並展示瀏覽器如何對其進行處理，本文還給出了在 Ajax 中使用的比較少見的 HTTP 請求。

在本系列的 上篇文章 中，我們將詳細介紹 XMLHttpRequest 物件，它是 Ajax 應用程式的中心，負責處理伺服器端應用程式和Script的請求，並處理從伺服器端元件返回的資料。由於所有的 Ajax 應用程式都要使用 XMLHttpRequest 物件，因此您可能會希望熟悉這個物件，從而能夠讓 Ajax 執行得更好。

在本文中，我將在上一篇文章的基礎上重點介紹這個請求物件的 3 個關鍵部分的內容：

  • HTTP 就緒狀態
  • HTTP 狀態代碼
  • 可以建立的請求類型

這三部分內容都是在構造一個請求時所要考慮的因素；但是介紹這些主題的內容太少了。然而，如果您不僅僅是想瞭解 Ajax 程式開發的常識，而是希望瞭解更多內容，就需要熟悉就緒狀態、狀態代碼和請求本身的內容。當應用程式出現問題時 —— 這種問題總是存在 —— 那麼如果能夠正確理解就緒狀態、如何建立一個 HEAD 請求或者 400 的狀態代碼的確切含義，就可以在 5 分鐘內測試出問題，而不是在各種挫折和困惑中度過 5 個小時。

下面讓我們首先來看一下 HTTP 就緒狀態。

深入瞭解 HTTP 就緒狀態

您應該還記得在上一篇文章中 XMLHttpRequest 物件有一個名為 readyState 的屬性。這個屬性確保伺服器已經完成了一個請求，通常會使用一個回傳函數從伺服器中讀出資料來更新 Web 表單或頁面的內容。清單 1 給出了一個簡單的範例（這也是本系列的上一篇文章中的一個範例 —— 請參見 參考資料）。

 

XMLHttpRequest 或 XMLHttp：

Microsoft™ 和 Internet Explorer 使用了一個名為 XMLHttp 的物件，而不是 XMLHttpRequest 物件，而 Mozilla、Opera、Safari 和 大部分非 Microsoft 瀏覽器都使用的是後者。為了簡單性起見，我將這兩個物件都簡單地稱為 XMLHttpRequest。這既符合我們在 Web 上看到的情況，又符合 Microsoft 在 Internet Explorer 7.0 中使用 XMLHttpRequest 作為請求對象的意圖。（有關這個問題的更多內容，請參見 第 2 部分。）

 清單1. 在回傳函數中處理伺服器的回應

  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, "<br />");

     } else

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

   }

 }

 

這顯然是就緒狀態最常見（也是最簡單）的用法。正如您從數位 "4" 中可以看出的一樣，還有其他幾個就緒狀態（您在上一篇文章中也看到過這個清單 —— 請參見 參考資料）：

  • 0：請求未初始化（還沒有使用 open()）。
  • 1：請求已經建立，但是還沒有發送（還沒有使用 send()）。
  • 2：請求已發送，正在處理中（通常現在可以從回應中獲取內容表頭）。
  • 3：請求在處理中；通常回應中已有部分資料可用了，但是伺服器還沒有完成回應的建立。
  • 4：回應已完成；您可以獲取並使用伺服器的回應了。

如果您希望不僅僅是瞭解 Ajax 程式開發的基本知識，那麼就不但需要知道這些狀態，瞭解這些狀態是何時出現的，以及如何來使用這些狀態。首先，您需要學習在每種就緒狀態下可能碰到的是哪種請求狀態。不幸的是，這一點並不直觀，而且會涉及幾種特殊的情況。

Top

　

隱藏就緒狀態

第一種就緒狀態的特點是 readyState 屬性為 0（readyState == 0），表示未初始化狀態。一旦對請求物件使用 open() 之後，這個屬性就被設定為 1。由於您通常都是在一對請求進行初始化之後就立即使用 open()，因此很少會看到 readyState == 0 的狀態。另外，未初始化的就緒狀態在實際的應用程式中是沒有真正的用處的。

不過為了滿足我們的興趣，請參見 清單 2 的內容，其中顯示了如何在 readyState 被設定為 0 時來獲取這種就緒狀態。


 清單 2. 獲取 0 就緒狀態

  function getSalesData() {

     // Create a request object

     createRequest();                             

     alert("Ready state is: " + request.readyState); 

     // Setup (initialize) the request

     var url = "/boards/servlet/UpdateBoardSales";

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

     request.onreadystatechange = updatePage;

     request.send(null);

   }

在這個簡單的範例中，getSalesData() 是 Web 頁面使用來啟動請求（例如點擊一個按鈕時）所使用的函數。注意您必須在使用 open()之前 來查看就緒狀態。圖 1 給出了執行這個應用程式的結果。


 圖 1. 就緒狀態 0

顯然，這並不能為您帶來多少好處；需要確保 尚未 使用 open() 函數的情況很少。在大部分 Ajax 程式開發的真實情況中，這種就緒狀態的唯一用法就是使用相同的 XMLHttpRequest 物件在多個函數之間建立多個請求。在這種（不常見的）情況中，您可能會在建立新請求之前希望確保請求物件是處於未初始化狀態（readyState == 0）。這實際上是要確保另外一個函數沒有同時使用這個物件。 

當 0 等於 4 時

在多個 JavaScript 函數都使用相同的請求物件時，您需要檢查就緒狀態 0 來確保這個請求物件沒有正在使用，這種機制會產生問題。由於 readyState == 4 表示一個已完成的請求，因此您經常會發現那些目前沒在使用的處於就緒狀態的請求物件仍然被設定成了 4 —— 這是因為從伺服器返回來的資料已經使用過了，但是從它們被設定為就緒狀態之後就沒有進行任何變化。有一個函數 abort() 會重新設定請求物件，但是這個函數卻不是真正為了這個目的而使用的。如果您 必須 使用多個函數，最好是為每個函數都建立並使用一個函數，而不是在多個函數之間共用相同的物件。

 查看正在處理的請求的就緒狀態

除了 0 就緒狀態之外，請求物件還需要依次經歷典型的請求和回應的其他幾種就緒狀態，最後才以就緒狀態 4 的形式結束。這就是為什麼您在大部分回傳函數中都可以看到 if (request.readyState == 4) 這行程式碼；它確保伺服器已經完成對請求的處理，現在可以安全地更新 Web 頁面或根據從伺服器返回來的資料來進行操作了。

要查看這種狀態發生的過程非常簡單。如果就緒狀態為 4，我們不僅要執行回傳函數中的代碼，而且還要在每次使用回傳函數時都輸出就緒狀態。 清單 3 給出了一個實現這種功能的範例。

Top

　


 清單 3. 查看就緒狀態

    function updatePage() {

     // Output the current ready state

     alert("updatePage() called with ready state of " + request.readyState);

   }

 如果您不確定如何執行這個函數，就需要建立一個函數，然後在 Web 頁面中使用這個函數，並讓它向伺服器端的元件發送一個請求（例如 清單 2 給出的函數，或本系列文章的第 1 部分和第 2 部分中給出的範例）。確保在建立請求時，將回傳函數設定為 updatePage()；要實現這種設定，可以將請求物件的 onreadystatechange 屬性設定為 updatePage()。

這段程式碼就是 onreadystatechange 意義的一個確切展示 —— 每次請求的就緒狀態發生變化時，就使用 updatePage()，然後我們就可以看到一個警告了。圖 2 給出了一個使用這個函數的範例，其中就緒狀態為 1。


 圖 2. 就緒狀態 1

您可以自己嘗試執行這段程式碼。將其放入 Web 頁面中，然後啟動事件處理程式（按下按鈕，在欄位之間按 tab 鍵切換焦點，或者使用設定的任何方法來觸發請求）。這個回傳函數會執行多次 —— 每次就緒狀態都會改變 —— 您可以看到每個就緒狀態的警告。這是跟蹤請求所經歷的各個階段的最好方法。

瀏覽器的不一致性

在對這個過程有一個基本的瞭解之後，請試著從幾個不同的瀏覽器中連線您的頁面。您應該會注意到各個瀏覽器如何處理這些就緒狀態並不一致。例如，在 Firefox 1.5 中，您會看到以下就緒狀態：

  • 1
  • 2
  • 3
  • 4

這並不奇怪，因為每個請求狀態都在這裏表示出來了。然而，如果您使用 Safari 來連線相同的應用程式，就應該看到 —— 或者看不到 —— 一些有趣的事情。下面是在 Safari 2.0.1 中看到的狀態：

  • 2
  • 3
  • 4

Safari 實際上把第一個就緒狀態給丟棄了，也並沒有什麼明顯的原因說明為什麼要這樣做；不過這就是 Safari 的工作方式。這還說明了一個重要的問題：儘管在使用伺服器上的資料之前確保請求的狀態為 4 是一個好主意，但是依賴於每個過渡期就緒狀態編寫的程式碼的確會在不同的瀏覽器上得到不同的結果。

Top

　

例如，在使用 Opera 8.5 時，所顯示的就緒狀態情況就更加糟糕了：

  • 3
  • 4

最後，Internet Explorer 會顯示如下狀態：

  • 1
  • 2
  • 3
  • 4

如果您碰到請求方面的問題，這就是用來發現問題的 首要之處。最好的方式是在 Internet Explorer 和 Firefox 都進行一下測試 —— 您會看到所有這 4 種狀態，並可以檢查請求的每個狀態所處的情況。

接下來我們再來看一下回應端的情況。

顯微鏡下的回應資料

一旦我們理解在請求過程中發生的各個就緒狀態之後，接下來就可以來看一下 XMLHttpRequest 物件的另外一個方面了 —— responseText 屬性。回想一下在上一篇文章中我們介紹過的內容，就可以知道這個屬性用來從伺服器上獲取資料。一旦伺服器完成對請求的處理之後，就可以將回應請求資料所需要的任何資料放到請求的 responseText 中了。然後回傳函數就可以使用這些資料，如 清單 1 和 清單 4 所示。


 清單 4. 使用伺服器上返回的回應

    function updatePage() {

     if (request.readyState == 4) {

       var newTotal = request.responseText;

       var totalSoldEl = document.getElementById("total-sold");

       var netProfitEl = document.getElementById("net-profit");

       replaceText(totalSoldEl, newTotal); 

       /* 圖 out the new net profit */

       var boardCostEl = document.getElementById("board-cost");

       var boardCost = getText(boardCostEl);

       var manCostEl = document.getElementById("man-cost");

       var manCost = getText(manCostEl);

       var profitPerBoard = boardCost - manCost;

       var netProfit = profitPerBoard * newTotal; 

       /* Update the net profit on the sales form */

       netProfit = Math.round(netProfit * 100) / 100;

       replaceText(netProfitEl, netProfit);

     }

 清單 1 相當簡單；清單 4 稍微有點複雜，但是它們在開始時都要檢查就緒狀態，並獲取 responseText 屬性的值。

Top

　

查看請求的回應文字

與就緒狀態類似，responseText 屬性的值在整個請求的生命週期中也會發生變化。要查看這種變化，請使用如 清單 5 所示的程式碼來測試請求的回應文字，以及它們的就緒狀態。


 清單 5. 測試 responseText 屬性

    function updatePage() {

     // Output the current ready state

     alert("updatePage() called with ready state of " + request.readyState +

           " and a response text of '" + request.responseText + "'");

     }

現在在瀏覽器中打開 Web 應用程式，並啟動您的請求。要更好地看到這段程式碼的效果，請使用 Firefox 或 Internet Explorer，因為這兩個瀏覽器都可以報告出請求過程中所有可能的就緒狀態。例如在就緒狀態 2 中，就沒有定義 responseText （請參見 圖 3）；如果 JavaScript 控制臺也已經打開了，您就會看到一個錯誤。


 圖 3. 就緒狀態為 2 的回應文字

不過在就緒狀態 3 中，伺服器已經在 responseText 屬性中放上了一個值，至少在這個範例中是這樣（請參見 圖 4）。


 圖 4. 就緒狀態為 3 的回應文字

您會看到就緒狀態為 3 的回應在每個Script、每個伺服器甚至每個瀏覽器上都是不一樣的。不過，這在測試應用程式中依然是非常有用的。

Top

　

獲取安全資料

所有的文件和規範都強調，只有在就緒狀態為 4 時資料才可以安全使用。相信我，當就緒狀態為 3 時，您很少能找到無法從 responseText 屬性獲取資料的情況。然而，在應用程式中將自己的邏輯依賴於就緒狀態 3 可不是什麼好主意 —— 一旦您編寫了依賴於就緒狀態 3 的完整資料的程式碼，幾乎就要自己來負責當時的資料不完整問題了。

比較好的做法是向使用者提供一些回饋，說明在處於就緒狀態 3 時，很快就會有回應了。儘管使用 alert() 之類的函數顯然不是什麼好主意 —— 使用 Ajax 然後使用一個警告對話方塊來阻擋使用者顯然是錯誤的 —— 不過您可以在就緒狀態發生變化時更新表單或頁面中的域。例如，對於就緒狀態 1 來說要將進度指示器的寬度設定為 25%，對於就緒狀態 2 來說要將進度指示器的寬度設定為 50%，對於就緒狀態 3 來說要將進度指示器的寬度設定為 75%，當就緒狀態為 4 時將進度指示器的寬度設定為 100%（完成）。

當然，正如您已經看到的一樣，這種方法非常聰明，但它是依賴於瀏覽器的。在 Opera 上，您永遠都不會看到前兩個就緒狀態，而在 Safari 上則沒有第一個（1）。由於這個原因，我將這段程式碼留作練習，而沒有在本文中包括進來。

現在應該來看一下狀態代碼了。

深入瞭解 HTTP 狀態代碼

有了就緒狀態和您在 Ajax 程式開發技術中學習到的伺服器的回應，您就可以為 Ajax 應用程式增加另外一級複雜性了 —— 這要使用 HTTP 狀態代碼。這些代碼對於 Ajax 來說並沒有什麼新鮮。從 Web 出現以來，它們就已經存在了。在 Web 瀏覽器中您可能已經看到過幾個狀態代碼：

  • 401：未經授權
  • 403：禁止
  • 404：沒找到

您可以找到更多的狀態代碼（完整清單請參見 參考資料）。要為 Ajax 應用程式另外增加一層控制和回應（以及更為健壯的錯誤處理）機制，您需要適當地查看請求和回應中的狀態代碼。

  • 200：一切正常

在很多 Ajax 應用程式中，您將看到一個回傳函數，它負責檢查就緒狀態，然後繼續利用從伺服器回應中返回的資料，如 清單 6 所示。


 清單 6. 忽略狀態代碼的回傳函數

    function updatePage() {

     if (request.readyState == 4) {

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

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

       document.getElementById("address").innerHTML =

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

     }

   }

 這對於 Ajax 程式開發來說證明是一種短視而錯誤的方法。如果Script需要認證，而請求卻沒有提供有效的證書，那麼伺服器就會返回諸如 403 或 401 之類的錯誤代碼。然而，由於伺服器對請求進行了應答，因此就緒狀態就被設定為 4（即使應答並不是請求所期望的也是如此）。最終，使用者沒有獲得有效資料，當 JavaScript 試圖使用不存在的伺服器資料時就可能會出現嚴重的錯誤。

它花費了最小的努力來確保伺服器不但完成了一個請求，而且還返回了一個 “一切良好” 的狀態代碼。這個代碼是 "200"，它是透過 XMLHttpRequest 物件的 status 屬性來報告的。為了確保伺服器不但完成了一個請求，而且還報告了一個 OK 狀態，請在您的回傳函數中增加另外一個檢查功能，如 清單 7 所示。

Top

　


 清單 7. 檢查有效狀態代碼

    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, "<br />");

       } else

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

     }

   }

透過增加這幾行程式碼，您就可以確認是否存在問題，使用者會看到一個有用的錯誤訊息，而不僅僅是看到一個由斷章取義的資料所構成的頁面，而沒有任何解釋。

重定向和重新路由

在深入介紹有關錯誤的內容之前，我們有必要來討論一下有關一個在使用 Ajax 時 並不需要 關心的問題 —— 重定向。在 HTTP 狀態代碼中，這是 300 系列的狀態代碼，包括：

  • 301：永久移動
  • 302：找到（請求被重新定向到另外一個 URL/URI 上）
  • 305：使用代理（請求必須使用一個代理來連線所請求的資源）

Ajax 程式設計師可能並不太關心有關重定向的問題，這是由於兩方面的原因：

  • 首先，Ajax 應用程式通常都是為一個特定的伺服器端Script、servlet 或應用程式而編寫的。對於那些您看不到就消失了的組件來說，Ajax 程式設計師就不太清楚了。因此有時您會知道資源已經移動了（因為您移動了它，或者透過某種手段移動了它），接下來要修改請求中的 URL，並且不會再碰到這種結果了。
  • 更為重要的一個原因是：Ajax 應用程式和請求都是封裝在沙盒中的。這就意味著提供建立 Ajax 請求的 Web 頁面的欄位必須是對這些請求進行回應的欄位。因此 ebay.com 所提供的 Web 頁面就不能對一個在 amazon.com 上執行的Script建立一個 Ajax 風格的請求；在 ibm.com 上的 Ajax 應用程式也無法對在 netbeans.org 上執行的 servlets 發出請求。

結果是您的請求無法重定向到其他伺服器上，而不會產生安全性錯誤。在這些情況中，您根本就不會得到狀態代碼。通常在測試控制臺中都會產生一個 JavaScript 錯誤。因此，在對狀態代碼進行充分的考慮之後，您就可以完全忽略重定向代碼的問題了。 

邊界情況和困難情況

看到現在，一些新手程式設計師就可能會這究竟是要討論什麼內容。有一點事實大家需要知道：只有不到 5% 的 Ajax 請求需要使用諸如 2、3 之類的就緒狀態和諸如 403 之類的狀態代碼（實際上，這個比率可能更接近於 1% 甚至更少）。這些情況非常重要，稱為 邊界情況（edge case） —— 它們只會在一些非常特殊的情況下發生，其中遇到的都是最奇特的問題。雖然這些情況並不普遍，但是這些邊界情況卻佔據了大部分使用者所碰到的問題的 80%!

對於典型的使用者來說，應用程式 100 次都是正常工作的這個事實通常都會被忘記，然而應用程式只要一次出錯就會被他們清楚地記住。如果您可以很好地處理邊界情況（或困難情況），就可以為再次連線站點的使用者提供滿意的回報。

 錯誤

一旦接收到狀態代碼 200 並且意識到可以很大程度上忽略 300 系列的狀態代碼之後，所需要擔心的唯一一組代碼就是 400 系列的代碼了，這說明了不同類型的錯誤。回頭再來看一下 清單 7，並注意在對錯誤進行處理時，只將少數常見的錯誤訊息輸出給使用者了。儘管這是朝正確方向前進的一步，但是要告訴從事應用程式開發的使用者和程式設計師究竟發生了什麼問題，這些訊息仍然是沒有太大用處的。

Top

　

首先，我們要增加對找不到的網頁的支援。實際上這在大部分產品系統中都不應該出現，但是在測試Script位置發生變化或程式設計師輸入了錯誤的 URL 時，這種情況並不罕見。如果您可以自然地報告 404 錯誤，就可以為那些困擾不堪的使用者和程式設計師提供更多幫助。例如，如果伺服器上的一個Script被刪除了，我們就可以使用 清單 7 中的代碼，這樣使用者就會看到一個如 圖 5 所示的非描述性錯誤。


 圖 5. 常見錯誤處理

使用者無法判斷問題究竟是認證問題、沒找到Script（此處就是這種情況）、使用者錯誤還是程式碼中有些地方產生了問題。增加一些簡單的程式碼可以讓這個錯誤更加具體。請參照 清單 8，它負責處理沒找到的Script或認證發生錯誤的情況，在出現這些錯誤時都會給出具體的訊息。


 清單 8. 檢查有效狀態程式碼

    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, "<br />");

       } else if (request.status == 404) {

         alert ("Requested URL is not found.");

       } else if (request.status == 403) {

         alert("Access denied.");

       } else

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

     }

   }

 雖然這依然相當簡單，但是它的確多提供了一些有用的資訊。圖 6 給出了與 圖 5 相同的錯誤，但是這一次錯誤處理程式碼向使用者或程式設計師更好地說明了究竟發生了什麼。


 圖 6. 特殊錯誤處理

Top

　

在我們自己的應用程式中，可以考慮在發生認證失敗的情況時清除使用者名和密碼，並向螢幕上增加一條錯誤訊息。我們可以使用類似的方法來更好地處理找不到Script或其他 400 類型的錯誤（例如 405 表示不允許使用諸如發送 HEAD 請求之類不可接受的請求方法，而 407 則表示需要進行代理認證）。然而不管採用哪種選擇，都需要從對伺服器上返回的狀態代碼開始入手進行處理。

其他請求類型

如果您真希望控制 XMLHttpRequest 物件，可以考慮最後實現這種功能 —— 將 HEAD 請求增加到指令中。在前兩篇文章中，我們已經介紹了如何建立 GET 請求；在馬上就要發表的一篇文章中，您會學習有關使用 POST 請求將資料發送到伺服器上的知識。不過本著增強錯誤處理和資訊搜集的精神，您應該學習如何建立 HEAD 請求。

建立請求

實際上建立 HEAD 請求非常簡單；您可以使用 "HEAD"（而不是 "GET" 或 "POST"）作為第一個參數來使用 open() 方法，如 清單 9 所示。


 清單 9. 使用 Ajax 建立一個 HEAD 請求

    function getSalesData() {

     createRequest();

     var url = "/boards/servlet/UpdateBoardSales";

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

     request.onreadystatechange = updatePage;

     request.send(null);

   }

 當您這樣建立一個 HEAD 請求時，伺服器並不會像對 GET 或 POST 請求一樣返回一個真正的回應。相反，伺服器只會返回資源的 頭（header），這包括回應中內容最後修改的時間、請求資源是否存在和很多其他有用資訊。您可以在伺服器處理並返回資源之前使用這些資訊來瞭解有關資源的資訊。

對於這種請求您可以做的最簡單的事情就是簡單地輸出所有的回應表頭的內容。這可以讓您瞭解透過 HEAD 請求可以使用什麼。清單 10 提供了一個簡單的回傳函數，用來輸出從 HEAD 請求中獲得的回應表頭的內容。


 清單 10. 輸出從 HEAD 請求中獲得的回應表頭的內容

    function updatePage() {

     if (request.readyState == 4) {

       alert(request.getAllResponseHeaders());

     }

   }

 請參見 圖 7，其中顯示了從一個向伺服器發出的 HEAD 請求的簡單 Ajax 應用程式返回的回應表頭。


 圖 7. HEAD 請求的回應表頭

Top

　

您可以單獨使用這些表頭（從伺服器類型到內容類型）在 Ajax 應用程式中提供其他資訊或功能。

檢查 URL

您已經看到了當 URL 不存在時應該如何檢查 404 錯誤。如果這變成一個常見的問題 —— 可能是缺少了一個特定的Script或 servlet —— 那麼您就可能會希望在建立完整的 GET 或 POST 請求之前來檢查這個 URL。要實現這種功能，建立一個 HEAD 請求，然後在回傳函數中檢查 404 錯誤；清單 11 給出了一個簡單的回傳函數。


 清單 11. 檢查某個 URL 是否存在

   function updatePage() {

     if (request.readyState == 4) {

       if (request.status == 200) {

         alert("URL exists");

       } else if (request.status == 404) {

         alert("URL does not exist.");

       } else {

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

       }

     }

   }

　

誠實地說，這段程式碼的價值並不太大。伺服器必須對請求進行回應，並構造一個回應來填充內容長度的回應表頭，因此並不能節省任何處理時間。另外，這花費的時間與建立請求並使用 HEAD 請求來查看 URL 是否存在所需要的時間一樣多，因為它要建立使用 GET 或 POST 的請求，而不僅僅是如 清單 7 所示一樣來處理錯誤代碼。不過，有時確切地瞭解目前什麼可用也是非常有用的；您永遠不會知道何時創造力就會迸發或者何時需要 HEAD 請求！

有用的 HEAD 請求

您會發現 HEAD 請求非常有用的一個領域是用來查看內容的長度或內容的類型。這樣可以確定是否需要發回大量資料來處理請求，和伺服器是否試圖返回二進位資料，而不是 HTML、文字或 XML（在 JavaScript 中，這 3 種類型的資料都比二進位資料更容易處理）。

在這些情況中，您只使用了適當的表頭名稱，並將其傳遞給 XMLHttpRequest 物件的 getResponseHeader() 方法。因此要獲取回應的長度，只需要使用 request.getResponseHeader("Content-Length");。要獲取內容類型，請使用 request.getResponseHeader("Content-Type");。

在很多應用程式中，建立 HEAD 請求並沒有增加任何功能，甚至可能會導致請求速度變慢（透過強制建立一個 HEAD 請求來獲取有關回應的資料，然後在使用一個 GET 或 POST 請求來真正獲取回應）。然而，在出現您不確定有關Script或伺服器端元件的情況時，使用 HEAD 請求可以獲取一些基本的資料，而不需要對回應資料真正進行處理，也不需要大量的頻寬來發送回應。

結束語

對於很多 Ajax 和 Web 程式設計師來說，本文中介紹的內容似乎是太進階了。建立 HEAD 請求的價值是什麼呢？到底在什麼情況下需要在 JavaScript 中明顯地處理重定向狀態代碼呢？這些都是很好的問題；對於簡單的應用程式來說，答案是這些進階技術的價值並不是非常大。

然而，Web 已經不再是只需實現簡單應用程式的地方了；使用者已經變得更加進階，客戶期望能夠獲得更好的穩定性、更進階的錯誤報告，如果應用程式有 1% 的時間停機，那麼經理就可能會因此而被解雇。

因此您的工作就不能僅僅局限於簡單的應用程式了，而是需要更深入理解 XMLHttpRequest。

  • 如果您可以考慮各種就緒狀態 —— 並且理解了這些就緒狀態在不同瀏覽器之間的區別 —— 就可以快速測試應用程式了。您甚至可以基於就緒狀態而開發一些創造性的功能，並向使用者和客戶回報請求的狀態。
  • 如果您要對狀態代碼進行控制，就可以設定應用程式來處理Script錯誤、非預期的回應以及邊緣情況。結果是應用程式在所有的時間都可以正常工作，而不僅僅是只能一切都正常的情況下才能執行。
  • 增加這種建立 HEAD 請求的能力，檢查某個 URL 是否存在，以及確認某個檔是否被修改過，這樣就可以確保使用者可以獲得有效的頁面，使用者所看到的資訊都是最新的，（最重要的是）讓他們驚訝這個應用程式是如何健壯和通用。

Top

　

本文的目的並非是要讓您的應用程式顯得十分華麗，而是幫助您去掉黃色聚光燈後重點昭顯文字的美麗，或者外觀更像桌面一樣。儘管這些都是 Ajax 的功能（在後續幾篇文章中就會介紹），不過它們卻像是蛋糕表面的一層奶油。如果您可以使用 Ajax 來構建一個堅實的基礎，讓應用程式可以很好地處理錯誤和問題，使用者就會返回您的站點和應用程式。在接下來的文章中，我們將增加這種直觀的技巧，這會讓客戶興奮得發抖。（認真地說，您一定不希望錯過下一篇文章！）

下載

描述

名字

大小

下載方法

Example code for this article

wa-ajaxintro3_ajax-xhr_adv.zip

183KB

HTTP

　

參考資料

學習


獲得產品和技術


討論

關於作者

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 技術的權威著作。

　

Top

Lotus Notes 技術分享

　

如何在Web上利用VML畫出圓餅統計圖?

本次智頡分享報將告訴您如何利用VML技術去繪製圓餅統計圖,此程式範例僅限使用於IE5.5版以上之版本,且不支援非IE之瀏覽器,所以請特別注意.

實作步驟如下:

1.      請先在資料庫中建立一網頁,網頁名稱為”DrawPie.js”,並在網頁屬性中勾選”將網頁內容視為HTML”,網頁中並貼上如下程式:

function NumberRound(s,lno){

                var index=s.indexOf(".")

                var index1=-1;

                var tno=1;

                var s1="";

                var s2="";

                var s3="";

                for (var k=0;k<=lno;k++){

                                tno=tno*10;

                }                             

                if (index==-1){

                                return s

                }else {

                                s1=parseFloat(s.substring(0,index-1)+"0")+(((parseFloat(s.substring(index-1,index+lno+2))*tno)+5)/tno)+"";

                                index1=s1.indexOf(".")

                                return parseFloat(s1.substring(0,index+lno+1))+"";

                }

}

function Add(){

    var shape=document.createElement("v:shape");

    shape.type="#tooltipshape";

    shape.style.width="150px";

    shape.style.height="150px";

    shape.coordsize="21600,21600";

    shape.fillcolor="infobackground";  

    var textbox=document.createElement("v:textbox");

    textbox.style.border="1px solid red";

    textbox.style.innerHTML="??";

    shape.appendChild(textbox);    

    document.body.appendChild(shape);

} 

function VMLPie(pContainer,pWidth,pHeight,pCaption){

    this.Container=pContainer;

    this.Width= pWidth || "400px";

    this.Height=pHeight || "250px";

    this.Caption = pCaption || "VML Chart";

    this.backgroundColor="";

    this.Shadow=false;

    this.BorderWidth=0;

    this.BorderColor=null;

    this.all=new Array();

    this.RandColor=function(){       

        return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";

    }

    this.VMLObject=null;

} 

VMLPie.prototype.Draw=function(){

    //畫外框

        var o=document.createElement("v:group");

        o.style.width=this.Width;

        o.style.height=this.Height;

        o.coordsize="21600,21600";

    //增加一個背景層

        var vRect=document.createElement("v:rect");

        vRect.style.width="23600px"

        vRect.style.height="21600px"

        o.appendChild(vRect);       

        var vCaption=document.createElement("v:textbox");

        vCaption.style.fontSize="24px";       

        vCaption.style.height="24px"

        vCaption.style.fontWeight="bold";

        vCaption.innerHTML=this.Caption;

        vCaption.style.textAlign="center";       

        vRect.appendChild(vCaption);

    //設定邊框大小   

        if(this.BorderWidth){

            vRect.strokeweight=this.BorderWidth;

        }

    //設定邊框顏色

        if(this.BorderColor){

            vRect.strokecolor=this.BorderColor;

        }

    //設定背景顏色

        if(this.backgroundColor){       

            vRect.fillcolor=this.backgroundColor;

        }

    //設定是否出現陰影

        if(this.Shadow){

            var vShadow=document.createElement("v:shadow");

            vShadow.on="t";

            vShadow.type="single";

            vShadow.color="graytext";

            vShadow.offset="4px,4px";

            vRect.appendChild(vShadow);

        }

        this.Container.appendChild(o);       

    //開始畫內部圓

        var oOval=document.createElement("v:oval");

        oOval.style.width="15000px";

        oOval.style.height="14000px";

        oOval.style.top="4000px";

        oOval.style.left="1000px";

        oOval.fillcolor="#d5dbfb";       

        //本來計畫加入3D的效果，後來感覺確實不好控制，就懶得動手了

        //var o3D=document.createElement("o:extrusion");

        var formatStyle=' <v:fill  rotate="t" angle="-135" focus="100%" type="gradient"/>';

        //formatStyle+='<o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';

        //formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';

        //formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/>';

        formatStyle+='<o:extrusion v:ext="view" backdepth="1in" on="t" viewpoint="0,34.72222mm"   viewpointorigin="0,.5" skewangle="90" lightposition="-50000"   lightposition2="50000" type="perspective"/>';

        oOval.innerHTML=formatStyle;        

        o.appendChild(oOval);

        this.CreatePie(o);         

}

VMLPie.prototype.CreatePie=function(vGroup){

        var mX=Math.pow(2,16) * 360;

        //這個參數是畫圖形的關鍵

        //AE x y width height startangle endangle

        //x y表示圓心位置

        //width height形狀的大小

        //startangle endangle的計算方法如下

        // 2^16 * 度數        

        var vTotal=0;

        var startAngle=0;

        var endAngle=0;

        var pieAngle=0;

        var prePieAngle=0;       

        var objRow=null;

        var objCell=null;       

        for(i=0;i<this.all.length;i++){

            vTotal+=this.all[i].Value;

        }       

        var objLegendRect=document.createElement("v:rect");       

        var objLegendTable=document.createElement("table");

        objLegendTable.cellPadding=0;

        objLegendTable.cellSpacing=5;

        objLegendTable.width="100%";

        with(objLegendRect){

         //調整顯示圖例的位置與框的大小

            style.left="17000px";

            style.top="2000px";

            style.width="5000px";

            style.height="18000px";

            fillcolor="#e6e6e6";

            strokeweight="1px";           

        }

        objRow=objLegendTable.insertRow();

        objCell=objRow.insertCell();

        objCell.colSpan="2";

        //objCell.style.border="1px outset";

        objCell.style.backgroundColor="black";

        objCell.style.padding="5px";

        objCell.style.color="window";

        objCell.style.font="caption";

        objCell.innerText="總數:"+vTotal;        

        var vTextbox=document.createElement("v:textbox");       

        vTextbox.appendChild(objLegendTable);

        objLegendRect.appendChild(vTextbox);       

        var vShadow=document.createElement("v:shadow");

        vShadow.on="t";

        vShadow.type="single";

        vShadow.color="graytext";

        vShadow.offset="2px,2px";

        objLegendRect.appendChild(vShadow);        

        vGroup.appendChild(objLegendRect);        

        var strAngle="";

        for(i=0;i<this.all.length;i++){ //依序畫出各個餅圖

            var vPieEl=document.createElement("v:shape");

            var vPieId=document.uniqueID;

            vPieEl.style.width="15000px";

            vPieEl.style.height="14000px";

            vPieEl.style.top="4000px";

            vPieEl.style.left="1000px";

            vPieEl.coordsize="1500,1400";

            vPieEl.strokecolor="white";           

            vPieEl.id=vPieId;

            pieAngle= this.all[i].Value / vTotal;

            //pieAngle= NumberRound((this.all[i].Value / vTotal)+"",4);

//alert(pieAngle);

            startAngle+=prePieAngle;

            prePieAngle=pieAngle;

            endAngle=pieAngle;            

            //strAngle+=this.all[i].Name +":" +this.all[i].Value+ " Start:"+startAngle +"  End:"+ endAngle +"\n";           

            vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";

            vPieEl.title=this.all[i].Name +"\n所占比例:"+ NumberRound((endAngle * 100)+"",2)+"%\n詳細描述:" +this.all[i].TooltipText;           

            //vPieEl.innerHTML='<v:fill  rotate="t" angle="-135" focus="100%" type="gradient"/>';

            var objFill=document.createElement("v:fill");

            objFill.rotate="t";

            objFill.focus="100%";

            objFill.type="gradient";

            objFill.angle=parseInt( 360 * (startAngle + endAngle /2));

            vPieEl.appendChild(objFill);           

            var objTextbox=document.createElement("v:textbox");

            objTextbox.border="1px solid black";

            objTextbox.innerHTML=this.all[i].Name +":" + this.all[i].Value;

            //vPieEl.appendChild(objTextbox);           

            var vColor=this.RandColor();

            vPieEl.fillcolor=vColor; //設定顏色

            //開始畫圖例

            objRow=objLegendTable.insertRow();           

            objCell=objRow.insertCell();//顏色標記

            objCell.style.backgroundColor=vColor;

            objCell.style.width="8px";           

            objCell=objRow.insertCell();

            objCell.style.font="icon";

            objCell.style.padding="3px";

            objCell.innerText=this.all[i].Name +":"+this.all[i].Value ;           

            vGroup.appendChild(vPieEl);

        }       

}

VMLPie.prototype.Refresh=function(){

}

VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){ 

    var oData=new Object();

    oData.Name=sName;

    oData.Value=sValue;

    oData.TooltipText=sTooltipText;

    var iCount=this.all.length;

    this.all[iCount]=oData; 

}

VMLPie.prototype.Clear=function(){

    this.all.length=0;

}

2.     在資料庫中新增一個代理程式,代理程式名稱為”DrawPie”,代理程式屬性設定如下圖:

3.      在上述代理程式中貼上如下的Lotus Script程式碼:

Sub Initialize

        Dim session As New NotesSession

        Dim db As NotesDatabase

        Dim view As NotesView

        Dim doc As NotesDocument

        Dim dbpath As Variant

        Set db=session.CurrentDatabase

        Set view=db.GetView("FeatList")

        dbpath=Evaluate({"/"+@ReplaceSubString(@SubSet(@DbName;-1);"\\";"/")+"/"})

        Print {Content-Type:text/html}

        Print {<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">}

        Print {<Title>2006年度銷售業績統計圖</Title>}

        Print {<HEAD>}    

        Print {<STYLE>}   

        Print "v\:*         {behavior:url(#default#VML);}"

        Print "o\:*         { behavior: url(#default#VML) }"

        Print ".shape       { behavior: url(#default#VML) }"

        Print {</STYLE>}

        Print {<script language="javascript" src="}+dbpath(0)+{DrawPie.js"></script>}

        Print {<script language="javascript">}

        Print {//以下是函數使用}

        Print "function DrawPie(){"

        Print {var objPie=new VMLPie(document.body,"600px","450px","2006年度銷售業績統計圖");}

        Print {//objPie.BorderWidth=3;}

        Print {//objPie.BorderColor="blue";}

        Print {//objPie.Width="800px";}

        Print {//objPie.Height="600px";}

        Print {objPie.backgroundColor="#ffffff";}

        Print {objPie.Shadow=true;}

        Print {//objPie.AddData(數據名稱,數值大小,描述)}    

        Set doc = view.GetFirstDocument

        While Not ( doc Is Nothing )

                Print {objPie.AddData("} & doc.Location(0) & {",} & doc.feat(0) & {,"} & doc.Location(0) & "業績" & {");}

                Set doc = view.GetNextDocument( doc )

        Wend      

        Print {objPie.Draw();}

        Print "}"   

        Print {</script>}

        Print {</head>}

        Print {<body onload="DrawPie()">}        

        Print {</body>}

        Print {</html>}

End Sub

4.     測試資料請自行模擬測試,如有需要可至本公司網站直接下載範例資料庫即可.

5.     請利用IE去執行上述代理程式即可測試.URL範例與結果畫面如下:

URL:http://xxx.xx.xx/xxx/VMLPie.nsf/(DrawPie)?OpenAgent

結果畫面:

                           

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

Top

近期電子報內容預告

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

內容預告如下:

Lotus Notes系統整合&應用介紹

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

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


智頡科技股份有限公司

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

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