增強網站互動性 Ajax小組件鑒賞(1)

Web 2.0 強調以獨特、新穎的方式與網站的客戶互動。其中很多創新技術都使用圖形和小組件，它們與伺服器進行通訊，擷取用於顯示的資料。在本文中，我將介紹五個這樣的小組件 —— 有些是開源的，有些是需要許可的 —— 它們通過 Ajax 和 XML 與伺服器通訊。

• carousel: 這個小組件是一個滾動的映像瀏覽器，客戶可以通過滾動查看一系列的項目，每個項目用一個小圖形表示。當使用者單擊一個項目時，進行什麼處理可以由您來決定。carousel 在實際情況中的例子有 Flikr 網站和 Apple 的 iTunes 介面。carousel 是免費提供的，它基於流行的 jQuery JavaScript 架構。
• SWF/Charts:這種基於 Adobe Flash 的控制項從伺服器上的 XML 中讀取圖表資料和樣式選項，然後根據資料顯示一個圖表。它的介面非常優雅，由於很容易建立 XML 資料，所以很容易將動態圖形添加到頁面中。
• SWF/Gauge: 與 SWF/Charts 類似，這個 Flash 小組件使用伺服器上的 XML 來構建一個完全可定製的儀錶盤顯示屏。其外觀可以仿製飛機或汽車上的儀錶盤，或者更流行的樣式。這可完全由您選擇。
• 就地編輯: 嚴格來說它不能算是個小組件，而是從使用者那裡獲得資訊的一種直觀的、互動、輕量級的方式。這種功能是 Scriptaculous 架構附帶的，位於 prototype.js 庫之上。
• DHTML windows: DHTML window 為在頁面內容上放置無模式的懸浮窗提供了一種機制。使用者可以移動視窗，調整它的大小，或者使之消失。視窗的內容可以由頁面上的 JavaScript 指定，也可以通過 Ajax 從伺服器上讀取。這種類型的視窗非常適合用作一種警示機制，也很適合用於彈出小的表單，從而避免重新裝載整個頁面。

我將首先展示 SWF/Charts 小組件，因為我認為它是最容易部署的小組件之一。相對於所花費的精力，它的回報也是最大的。

一、SWF/Charts 小組件

俗話說：“一畫抵千言”。這句話很難反駁，尤其是在談論圖形的時候。然而一直以來，在 Web 上畫圖並非易事。雖然有些 Web 架構套件括了一些用於構建映像的基本圖形，但大多數 Web 架構都缺少即開即用的畫圖工具。這種功能的缺失使您必須自己來構造圖形。

如果有一個小組件能將 XML 編碼的資料畫出來，豈不是很好?事實上就有這麼一個小組件：SWF/Charts。為了開始使用這個小組件，我從網站下載了 SWF 檔案，另外還下載了這個小組件所使用的其他一些 SWF 檔案。然後，我將這些檔案安裝在我的網站上，並在 HTML 上添加了一個到 SWF 小組件的連結，如 清單 1 所示。

清單 1. Chart_page.html

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0" width="400" height="250"> value="charts.swf?xml_source=chart_data.xml&library_path=charts_library"> src="charts.swf?xml_source=chart_data.xml&library_path=charts_library" width="400" height="250" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer">

Charts.swf 有兩個參數：一個是其庫目錄的位置，還有一個是 XML 資料的 URL。XML 資料格式相當簡單。清單 2 顯示了一個簡單的例子。

清單 2. Chart_data.xml

bar 2005 2006 Projected 500 700 Actual 600 900

這個檔案基本上都是用於圖表的資料，還有一些可選的視覺資訊。在這個例子中，我將圖表的類型指定為橫條圖。我下載的 SWF 檔案所在的那個網站上有關於可以設定的選項以及可用的圖形類型的更多資訊。

當在 Firefox 瀏覽器中瀏覽到這個檔案時，可以看到如 圖 1 顯示的圖形。

圖 1. 使用中的 Chart 小組件

可以看到，這個圖表的預設顏色模式和外觀確實很整潔。這個圖恰到好處地對軸線值進行了均勻布置。整體效果非常好，而我為之付出的精力並不多。

顯然，可以用一個動態 Web 頁面替換 graph_data.xml 檔案：只要返回的資料具有正確的格式，圖形控制項關係不大。本文中的所有例子都是這樣的。實際上，可以在一個 網頁瀏覽器中運行本地檔案上的所有例子，而不必使用 Web 服務器(比如 Apache Tomcat 或 IBM® WebSphere® Application Server)或 Web 程式設計語言(比如 PHP、Microsoft® ASP.NET、Java™ 2 Enterprise Edition [Java EE])。