AJAX+SVG實現即時監控圖表

前言

AJAX 已經有很多文章介紹它的原理及其應用了。但是遺憾的是現在並沒有很 多結合實際項目應用。本文結合實際項目中的應用來講述利用 AJAX 和SVG 技術 如何建立各種激動人心的功能，並附帶可以啟動並執行例子和原始碼。

本文需要一定的 AJAX，SVG 知識和應用經驗。當然它們都可以在 ibm.com/developerworks/cn 上找到。

個人對於 AJAX 應用的建議是如果傳統的 MVC 能夠滿足的應用，沒有必要使 用AJAX來代替，因為這裡 AJAX 唯一能帶來的好處只是無重新整理。AJAX 是用來幫 助我們實現以往使用傳統 web 技術難以實現的功能的。

技術名詞

1．AJAX ，AJAX(Asynchronous JavaScript and XML)是多種技術的綜合，它 使用 XHTML和 CSS 標準化呈現，使用 DOM 實現動態顯示和互動，使用 XML 和 XSTL 進行資料交換與處理，使用 XMLHttpRequest 對象進行非同步資料讀取，使 用 Javascript 綁定和處理所有資料。更重要的是它打破了使用頁面重載的慣例 技術組合，可以說 AJAX 已成為 Web 開發的重要武器

2．SVG(Scalable Vector Graphic) 是一個標準開放的向量映像格式。它使 你設計的網頁可以更加精彩，更加細緻。使用簡單的文本命令，SVG 甚至可以做 出諸如色綵線性變化、自訂置入字型、透明、動態效果、慮鏡效果等各式常見 的映像效果。SVG 映像是基於 XML(可擴充標識語言--未來的網路語言)的應用， 並由 W3C 組織的 SVG 開發組負責詳細的研究和開發。

3．DWR，DWR是一個開源的類庫，可以協助開發人員開發包含 AJAX 技術的網 站。它可以允許在瀏覽器裡的代碼使用運行在 WEB 伺服器上的 JAVA 函數，就 像它就在瀏覽器裡一樣。

閱讀本文最好具有下列知識：

1. AJAX 開發應用

2．SVG 相關知識，特別是與JavaScript互動。(developerworks 上有非常詳 盡 SVG 的技術文章)

3．DWR基礎。 (developerWworks 上有非常詳盡的DWR架構的技術文章和例子 ，本文不詳細結束DWR基礎知識。)例如： http://www.ibm.com/developerworks/cn/java/j-ajax3/

實際效果

技術敘述的再好，不如一個實際的例子，我們先看看實際效果。讀者可以先 下載本文附帶的例子，發布到任何一個支援JSP1.1的servle伺服器上，例如 Tomcat4.0或者 webshpere,weblogic上，然後訪問頁面：http://localhost:端 口/ajaxSVG/DyMeter.jsp。(以 Tomcat為例，連接埠就是8080)

點擊開始按鈕，你會發現圖表的指標會根據伺服器的資料即時擺動。很類似 與一個汽車儀器儀錶盤，這是以往 cs 軟體或者是 flash 才能實現的效果，現 在我們使用純 web 的形式實現了。

從專業術語來說，它實際上是一個 Dash Board，其實在各種 BI（商業智慧 ）應用中都可以看到它，它的靈感來自於汽車的儀錶盤，它非常直觀的反映了當 前資料的狀態，例如處於危險，安全，過低等等。

當然它並不新鮮，很多軟體都能提供這種圖表，我們今天要使用 AJAX 和 SVG 來突破傳統應用，以往的軟體產生的圖片都是靜態，注意我這裡的靜態是 指它們產生的圖片上的指標不會像真正的汽車儀錶盤一樣隨著汽車的各種資料的 變化，例如速度、油量的變化而擺動，根據汽車的即時速度而擺動，而是使用者刷 新一次頁面，軟體根據伺服器端的資料重建圖片再顯示給終端使用者。

傳統的這種方式對於一般的 BI 應用來說是完全足夠了，但是對於即時性要 求比較高的系統來說，利用監控系統來說，不可能要求使用者隨時重新整理頁面，或者 使用 JavaScript 來定時重新整理頁面，這樣效果非常差，而且伺服器端反覆在記憶體 ，或者硬碟中產生圖片，使用者數量多之後，系統負擔太重了。

我們拋開技術想一下，我們實際上只想改變指標的位置就行了，根本沒有必 要產生整個圖片或者是傳遞整個圖片的資料給用戶端。這種設定非常不合理，但 是這在以往的技術上是難以完成的。

現在如果使用AJAX技術，我們只需要傳輸過來當前的資料，告訴儀錶盤的指 針應該指向哪裡就行了。無需頁面重新整理，無需重建圖片，並且網路端，服務 器端，使用者端的開銷都非常少，以往的方案沒有經驗的程式員經常會導致記憶體溢 出，現在採用這種方案這種錯誤的風險就大大減小了。