Dojo 入門：第五個範例

測試 Dojo (V)

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟

請勿轉貼

姓名：

在說明如何使用 Dojo 內建的除錯功能之前，我們先說一下一個蠻奇怪的現象，花了兩、三個小時還找不出原因之後，我先在這裡記錄一下：在這個範例中，我使用 dijit.form.TextBox（即一般的文字欄位，沒有任何使用上的限制）來取代前一個範例中的 dijit.form.NumberTextBox；可是，取代之後，在 IE 的環境下，使用上沒有任何問題，但是在 Firefox 的環境下，使用者卻沒有辦法在文字欄位內輸入任何資料。（目前，如果以 dijit.form.ValidationTextBox 來取代 dijit.form.TextBox， Firefox 可以正確顯示，只是這樣子一來，IE 在顯示網頁的部分卻有不盡完善的地方。）

撰寫 AJAX 的程式過程中，經常程式會出現錯誤。要在 AJAX 的環境下進行除錯是一件不太容易的事情；一般來說，大多的程式開發人員選擇最簡單的除錯方式就是使用 Javascript 的 alert() 函數，把希望可能出錯的資料呈現出來，可是難道沒有更簡單的方法了嗎？

Dojo 的開發團隊強烈建議使用一個 Firefox 的外掛套件來進行除錯，而該套件的名稱為 Firebug。雖然我是 Firefox 的愛好者，但是為了簡化這份文件，我們還是採用 Dojo 內建的除錯功能來說明。雖然如此，我們仍然建議讀者使用 Firebug。

Dojo 內建的除錯功能使用了 Firebug 的輕量版的程式庫，雖然互動性沒有 Firebug 那麼好，但是使用上也還蠻容易的。啟動 Dojo 內建的除錯功能只需要進行下列的設定：

<SCRIPT TYPE="text/javascript" SRC="http://ajax.googleapis.com/ajax/libs/dojo/1.2/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true , isDebug: true"></SCRIPT>

從以上紅色字體顯示出：我們只需要在 djConfig 的部分加上 isDebug: true，而且由於 djConfig 多了一項設定，所以設定參數之間需要以逗點分開。在加入這項新設定之後，請重新載入網頁，你會發現網頁的最下方多出了類似如下的畫面，由於程式還沒有執行，畫面中的內容部分是空的。

除錯畫面由一個名為 console 的物件所代表，而該物件擁有下列常用的方法來列印字串或者變數的內容。基本上，下列五個方法都可以達到同樣的目標，它們的差別只是用來代表不同的嚴重等級；或者從顯示的角度來看，它們顯示的方式不同。

console.log("訊息或者變數名稱");
console.debug("顯示訊息或者變數名稱以便確定一切 OK");
console.info("顯示訊息或者變數名稱，因為可能有問題");
console.warn("顯示訊息或者變數名稱，因為已經有問題了，但是不嚴重");
console.error("顯示訊息或者變數名稱，因為問題大了");

由於我們目前的程式碼是正確的，所以我們只是利用除錯方法來顯示不同的訊息，以及其顯示的方式。因為只有一個 callRemote() 的方法，所以程式碼被修改成：

01  function callRemote() {
02    console.log("entering callRemote()");
03    var sUrl = "/jlu/servlet/HelloWorld?name=" +
04               encodeURIComponent(dojo.byId('name').value);
05    console.info("sUrl: " + sUrl);
06    console.warn("sUrl: " + sUrl);
07    dojo.xhrGet({
08      url: sUrl,
09      load: function(data) {
10        console.debug(data);
11        dojo.byId('textBox').innerHTML = data;
12      },
13      error: function(data) {
14        console.error("連線失敗");
15        dojo.byId('textBox').innerHTML = data;
16      }
17    });
18  }

我們在第 02 行使用 console.log() 方法顯示目前已經開始執行 callRemote() 方法；在第 05、06 行，我們分別使用 console.info() 以及 console.warn() 來顯示字串 sURL 以及變數 sURL 的內容，從以下的執行畫面，我們可以看出訊息被正確的顯示，而且 info() 和 warn() 的訊息之前分別有不同的圖示。在第 10 行，我們使用 console.debug() 來確認回傳的資料是否正確；如果聯線失敗，則執行 console.error()。以下畫面是在文字欄位輸入 "Eric" 之後的執行情形。

Last Updated:
Written by: 國立中興大學資管系呂瑞麟