Dojo 入門：第一個範例

測試 Dojo (I)

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

請勿轉貼

首先，我們還是看一下網頁的 HTML 元件，其內容如下：

<form name="myform">
姓名：<input type="text" id="name"></input>
<input type="button" onClick="callRemote();" value="確定"></input>
</form>

在這個範例，我們沒有使用任何 Dojo 的 CSS 元件，而是使用傳統 HTML 的元件。當使用者按下"確定"鈕之後，callRemote() 會被呼叫。就像之前所說的， callRemote() 只是呼叫遠端的 servlet，並將 servlet 的回傳結果呈現出來。 callRemote() 的程式碼如下：

01  function callRemote() {
02    sUrl = "/jlu/servlet/HelloWorld?name=" +
03           encodeURIComponent(document.getElementById('name').value);
04           dojo.xhrGet({
05             url: sUrl,
06             load: function(data) {
07               alert(data);
08             },
09             error: function(data) {
11               alert('Server error');
12             }
13           });
14  }

從第 02-03 行可以清楚的看出，程式碼的目的在於組成適當的 sUrl 的值，它的語法以及使用 encodeURIComponent() 在之前已經解釋過了，就不再贅述。第 04-13 行是之前完全沒看過的東西，但是從 dojo.xhrGet 可以猜出程式使用了 dojo 的元件。

怎麼使用 Dojo 的功能？在前一個步驟中，我們使用了 dojo.xhrGet 的程式。從之前 Javascript 的介紹，我們知道要使用第三者開發的 Javascript，我們必須在網頁中加入所需的外部 Javascript 檔。Dojo 提供兩種方式讓網頁開發人員使用，第一個方式是從 Dojo 的網站下載並將內容放置於你自己的網站上，另一個方式是參考 Dojo CDN 的伺服器。第一種方式可能比較快，但是維護比較困難，而第二種方式可能相對比較慢，但是幾乎不需要更新維護，你可以依照自己的需求來決定。本文採用第二種方式。目前提供線上 Dojo 外部程式的有 AOL Developer Network 以及 Google AJAX Libraries API。

Dojo 號稱它所使用的 Javascript 檔非常精簡，所以非常的小；而且它採用的方式是把一個最小的基本 Javascript 檔下載下來，然後在需要某各特定元件的時候，再利用 require() 的方式把所需要的元件下載下來。以 Google 所提供的外部 Javascript 檔為例，我們需要在每一個 Dojo 網頁加上如下的敘述：

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

dojo.xhrGet 的用法：AJAX 的 XMLHttpRequest 的物件在 Dojo 被隱藏起來，而改用簡單的 dojo.xhrGet。它的用法如下所示：

01           dojo.xhrGet({
02             url: sUrl,
03             load: function(data) {
04               alert(data);
05             },
06             error: function(data) {
07               alert('Server error');
08             }
09           });

在本範例中，dojo.xhrGet() 包含一個物件參數，該物件參數從第 01 行的左大括號開始到第 09 行的右大括號為止；這個物件有一個名為 url 的資料成員（其值被初始化為 sUrl，以及兩個方法成員，名稱分別為 load 以及 error。以 AJAX 的設定方式來說明，dojo.xhrGet() 代表一個利用 HTTP GET 方法的 XMLHttpRequest 呼叫，遠端的呼叫端定義在 url；如果該呼叫成功，則執行 load() 方法，並將執行結果以參數 data 傳遞給 load；反之，若呼叫失敗，則執行 error() 方法。

Dojo 的設計方式有明顯的好處：我們不需要再檢查使用者使用哪一種瀏覽器，因為這部份由 Dojo 處理了，以後我們也不必擔心，我們寫的程式碼能不能用在其他的瀏覽器；也因為這樣，我們所需要寫的程式碼也變得簡單了。很棒，不是嗎？

Javascript 的 anonymous function來：剛剛宣告 load() 以及 error() 方法的方式不常見，但是在 Dojo 的程式中卻使用的非常頻繁。這種 function 的宣告方式有一個專有名稱稱之為匿名方法（anonymous function）。依據 Javascript anonymous functions 的說明，以下兩種都是宣告一個名為 helloWorld 方法的宣告：

// 方法一（常用的方式）
function helloWorld() {
  alert("Hello World");
}

// 方法二（匿名方法）
var helloWorld = function() {
  alert("Hello World");
};

另外，在 Javascript 中，我們可以利用大括號的方式宣告並產生物件；例如，以下程式碼產生了一個物件，該物件名稱為 obj；obj 內含有兩個資料成員，分別是 name 和 hours，且它們的初始值分別為 "Java" 和 50。

  var obj = {name: "Java, hours: 50};

由於 obj 含有兩個以上的成員，成員和成員之間以逗點分開。在 Javascript 中，物件當然也可以包含有方法成員；例如，在以下程式碼中，我們也宣告了一個名為 toString() 的方法：

  var obj = {name: "Java, hours: 50,
             toString: function() {
               alert(this.name + " 工作了 " + this.hours + " 小時");
             }
            };
  obj.toString();

obj 產生完畢之後，我們就可以利用 obj.成員名稱 的方式來存取它。例如，在上面的 obj.toString(); 就是呼叫執行 obj 的 toString() 方法；當然，你也可以使用 obj.name 和 obj.hours 來存取資料成員。

讓我們再次的回顧之前的 dojo.xhrGet() 程式碼，這個程式碼中同時結合的產生物件的方式（一個 url 資料成員，以及兩個 load 和 error 方法成員）以及使用匿名方法的方式在一個敘述中。這一類的方式經常出現，如果你覺得沒把握，我建議你好好的去看一下 Javascript 比較進階的教材。

完整的程式碼如下：

<SCRIPT TYPE="text/javascript" SRC="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js" 

<script type="text/javascript">
  var transaction;
  var sUrl;
  var callback = {
    success: function(o) {
      alert(o.responseText);
    },
    failure: function(o) {
      alert("錯誤：無法取得回應");
    }
  };

  function callRemote() {
    sUrl = "/jlu/servlet/HelloWorld?name=" +
           encodeURIComponent(document.getElementById('name').value);
    dojo.xhrGet({
      url: sUrl,
      load: function(data) {
        alert(data);
      },
      error: function(data) {
        alert('Server error');
      }
    });
  }
</script>
</head>

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