使用 YUI 的 Connection Manager

在「AJAX 是什麼？」這篇文章的結尾提到了：因為瀏覽器支援度 ( Browser Compability ) 及 Request 控管的兩大問題，我們必須用市面上的 Javascript Library 來寫 AJAX。本篇就是在介紹 Yahoo! User Interface ( 後續簡稱 YUI ) 的 Connection Manager。

關於 Connection Manager
開始使用
POST
表單 POST
上傳檔案
常用小技巧

關於 Connection Manager

優點

Connection Manager 把每一個 Request 當作是一個連線 (Connection)。而每一個連線就是一個 Js 物件，你可以透過 Connection Manager 所提供的方法、針對每個連線來丟棄 (Abort)、設定 Header、設定例外處理等等...

使用 Connection Manager 的好處有：更好的瀏覽器支援度 (Browser Compability) 、讓你的 Code 更美觀。(Object-Oriented Javascript)

回到最上層

開始使用

第一步：準備好你要呼叫的 Server 端檔案 (demo.php)

如同「AJAX 是什麼」的 Hello World ! AJAX !! 範例，我們現在想利用 AJAX 去抓一個 HTML

第二步：新開一份 HTML，掛進所需外部 Javascript 檔案

YAHOO Namespace Library : 只要用到 YUI，就一定要記得掛進此函式庫。
Connection Manager Library : 命名空間為 YAHOO.util.Connect
Event Library : 事件函式庫只有在利用表單傳送 AJAX 的時候會用到，你可以看你自己的需求決定。

第三步：想好傳回來的 HTML 應該要放在哪邊？

我們在 body 中放置一個 id 為 ajax_container 的 div

第四步：撰寫 Callback 物件

Callback 物件是負責處理 Server 端的所傳回的 Response，最基本必須要有兩個子物件 : success 與 failure。

第五步：發出一個非同步 Request

我們已經將所必備的東西皆準備齊全了！只剩下一道執行的指令 : asyncRequest

參數一是指定傳輸方法，後面會繼續介紹 POST，參數二是 Server 端 Request 的網址，參數三是 Callback 物件

完整程式碼

<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>Connection Manager 範例</title>

<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0.js"></script>

<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/connection_2.0.0.js"></script>

<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0.js" ></script>
<script>
window.onload = function() {
	//取得放置 html 的  div 
	var dContainer = document.getElementById('ajax_container');
	// Callback 物件，最基本的寫法，一定要有 succes 跟  failure
	var oCallback = {	    
		// 當 Server 成功傳回時
		success:function(oResponse) {
			dContainer.innerHTML = oResponse.responseText;
		},
		// 當 Server 產生錯誤時
		failure:function(oResponse) {
			//我們就不放在 dContainer 中，只出現一個警告訊息
			alert(oResponse.errorText);
		}
	}
	YAHOO.util.Connect.asyncRequest('GET','demo.php',oCallback);
}
</script>
</head>
<body>
    <div id="ajax_container"></div>
</body>
</html>

唯一要注意的就是我們把是在「網頁讀取完畢」(window.onload) 之後才執行的 ( 範例 )

回到最上層

POST

參數傳遞

在上面的例子，我們是用 GET 的方式、去存取 demo.php 這個網頁，當然你也可以視情況所需直接傳遞參數 ( 範例 )

但是有時候當我們需要傳遞大量的參數（可能會超過 GET 的限制時）、或後端的 PHP 只接受 POST 時，我們僅須修改 asyncRequest() 的參數即可

如上所示，將第一個參數從 GET 改為 POST、把所需要傳遞的參數放到第四個參數即可( 範例 )

回到最上層

Form

setForm 方法

有了 Connection Manager 後我們可以很輕鬆地將表單以 AJAX 的方式送出喔！

Html

Javascript

這邊我們多用了 Event Library，讓 AJAX 是由按鈕的點選驅動，這樣更有 AJAX 的感覺了吧？( 範例 )

回到最上層

上傳檔案

Connection Manager 的新功能

上傳檔案需要將表單 enctype 屬性設定為 multipart/form-data，XMLHttpRequest 是辦不到這點的。但是各位很幸運，Connection Manager 後來增加了上傳的功能。

它是利用 Iframe，並將表單送出的 target 設定為那個 Iframe，再利用 Javascript 取得 Iframe 頁面傳回的內容。

要怎麼使用呢？你只要替 setForm 多加一個 true 的參數、及設定 enctype 屬性就可以了喔！

Html

Javascript

PHP

用了 Connection Manager 之後我們可以很容易地做出不換頁上傳的功能。( 範例 )

回到最上層

常用小技巧

替 YUI Library 設定 Reference

因為我們使用 YAHOO.util.Connect 的次數很高，所以可以設定一下 Reference，不但好寫、效能也會提升！

GET 請記得編碼

若你使用 GET 傳送資料，請記得用 encodeURIComponent 替參數值編碼

Cache

若你發現不管怎麼變，傳回的值都相同，那麼可能是 Cache 的問題，你可以自己產生 random 參數，讓 Query String 有所不同，瀏覽器就會以為是不同的網址。

XML Response

如果 Server 傳回的格式是 XML，請務必設定 Header 為 text/xml

Callback 層級

絕對不要把所有的 Callback 物件擺在同一個層級，否則名稱不好控制、也不好維護。

Good Example

Bad Example

encoding

有時失敗是因為 encoding 的問題、Response 的頁面必須是 utf-8。( 範例 | 圖片 )

如果你有用 EditPlus v2.20 時，你可以設定快速鍵方便轉換 encodeing : Preferences > Tools > Keyboard > types : document > commands : DocReloadAs，我個人是設定 F8

Connection Watcher

在我們剛開始開發 AJAX 應用程式時，總是會碰到許多出問題的地方，所以我們在這個階段必須經常性地監控連線的狀況、 Server 傳回的訊息。

而既然是 Connection Manager，其實本身就有控管連線的機制。我們可以利用 Connection Manager 所提供的方法寫一個監控的工具。但如果你跟我一樣是懶人 :p 請多用 Hedgerwow 的 Connection Watcher。

失敗處理

AJAX 一定會有失敗的風險性，通常是因為伺服器錯誤、程式錯誤等。

基本上我們必須設定 Timeout 以避免讓使用者花不必要的等待時間。

此外，有時可用程式把錯誤 Throw 出來提供給前端，如資料筆數為零的情況。

PHP

Javascript

回到最上層