YUI 入門：第一個範例

測試 YUI (I)

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

請勿轉貼

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

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

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

01  function callRemote() {
02    sUrl = "/jlu/servlet/HelloWorld?name=" +
03           encodeURIComponent(document.getElementById('name').value);
04    transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
05  }

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

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

YUI 提供的外部 Javascript 檔的種類蠻複雜的，選取適當以及必要的檔案就變得非常重要；而能夠選取適當以及必要的檔案卻又必須先知道自己要使用哪一個 YUI 的元件；但是 YUI 的元件超多，想要一個一個了解勢必要花很多時間，我個人認為這就是 YUI 不容易入手的主要原因。YUI 的設計人員很明顯知道 YUI 的缺陷，所以他們針對"選取適當以及必要的檔案"的部份，提供了兩個工具讓網頁開發人員使用，其中一個叫做 The Yahoo! Loader Utility，另一個是 YUI Dependency Configurator。在本文中，我們介紹後者。

請點選 YUI Dependency Configurator 的聯結，你會看到如下的畫面：

在一開始，並沒有任何元件被選取。由於我們需要使用 Connection Manager，所以我們在 Connection Manager 上點一下，如此所有跟 Connection Manager 相關的元件也會被自動選取（如畫面中的 -min, Yahoo! 等），而且我們所需要輸入網頁的 Javascript 程式碼也會被產生，然後我們只需要在 "copy to clipboard" 上點一下，就可以把程式碼複製進來。複製的程式碼如下所示，請將它貼到網頁的 <head> 的部份，我們就完成了選擇適當的外部 Javascript 檔案的工作了。

<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js&2.7.0/build/connection/connection-min.js"></script>

許多初學者對於為什麼要選擇 Connection Manager 元件有疑問。其實這是正常的，你必須把 YUI 每一個元件的功能以及用法搞清楚了以後，才能寫出一個比較好的網頁；因此學習過程中，如果有新的需求，那麼最好的方式就是去 YUI 的首頁查詢；利用慢慢累積的方式來學習 YUI 才不會一下子被搞昏了頭。

YAHOO.util.Connect.asyncRequest 的用法：AJAX 的 XMLHttpRequest 的物件在 YUI 被隱藏起來，而改用簡單的 YAHOO.util.Connect.asyncRequest。它的用法如下所示：

var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);

YAHOO.util.Connect.asyncRequest() 的四種參數的意義如下：

第一個參數表示 HTTP 方法，常見的值有 GET 或者 POST。這一個部分的設定跟 XMLHttpRequest 類似。
第二個參數表示 AJAX 要呼叫的 URL，在我們的範例中，就是遠端的 servlet 的 URL。這一個部分的設定跟之前 AJAX 範例中的 url 類似。
第三個參數 callback 代表一個事件處理的 function 名稱，用來處理伺服器端的回應。至於 callback 要如何定義，我們等一下進一步說明。這一個部分的設定跟之前 AJAX 範例中的 alertContents() 和 showXML() 類似。
第四個參數代表要傳給伺服器端的參數，這一部分也跟 XMLHttpRequest 類似。一般來說，如果第一個參數是 GET，則第四個參數就是 null；如果第一個參數是 POST，則我們需要把傳給遠端程式的參數定義在這裡，例如之前說的 'name=value&anothername=othervalue&so=on'。

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

把名為 callback 的 function 定義出來：這一種不常見（在 YUI 的程式中卻使用的非常頻繁），但是卻是非常 powerful 的宣告方式有一個專有名詞，稱之為匿名方法（anonymous function）。依據 Javascript anonymous functions 的說明，以下兩種都是宣告一個名為 helloWorld 方法的宣告：

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

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

由於 YAHOO.util.Connect.asyncRequest() 會呼叫遠端的 URL，然後跟 AJAX 網頁一樣，必須處理伺服器端的回應；在本範例中，事件處理方法為 callback。而一般來說，我們有興趣的情形只有成功（success）或者非成功（failure）的狀況，這跟之前 AJAX 網頁中，我們只對 status 為 200 做檢查一樣。因此我們為 callback 設定了兩個不同的命名空間（name spaces）；或者用比較口語化的說法，如果執行結果為 success，我們希望執行的是 callback.success()；如果執行結果為 failure，我們希望執行的是 callback.failure()；則 callback 的定義如下：

  var callback = {
    success: function(o) {
      // 回傳成功所要執行的程式碼
    },
    failure: function(o) {
      // 回傳失敗所要執行的程式碼
    }
  };

這一段程式碼幾乎可以照抄，這裡頭需要說明一下的是變數 o，它是代表伺服器端回傳的結果。由於伺服器端回傳的是字串，所以我們就以 alert() 把結果呈現出來。我們的程式碼如下：

  var callback = {
    success: function(o) {
      alert(o.responseText);
    },
    failure: function(o) {
      alert("錯誤：無法取得回應");
    }
  };

完整的程式碼如下：

<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js&2.7.0/build/connection/connection-min.js"></script>

<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);
    transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
  }
</script>
</head>

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