AJAX + SVG 實現即時監控圖表

簡介： AJAX 已經有很多文章介紹它的原理及其應用了。但是遺憾的是現在並沒有很多結合實際項目應用。本文結合實際項目中的應用來講述利用 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技術，我們只需要傳輸過來當前的資料，告訴儀錶盤的指標應該指向哪裡就行了。無需頁面重新整理，無需重建圖片，並且網路端，伺服器端，使用者端的開銷都非常少，以往的方案沒有經驗的程式員經常會導致記憶體溢出，現在採用這種方案這種錯誤的風險就大大減小了。

回頁首

原理

其實原理並不複雜，我們利用 SVG 來繪製儀錶盤，然後利用 AJAX 技術定時向伺服器請求更新資料（也就是指標所指向的資料），如果資料更新了，則調用 JavaScript 指令碼讓SVG 的儀錶盤重新置放指標，這樣就實現了圖表的即時重新整理。描述了各種技術的在本教程中的用途。

回頁首

代碼細節

這個例子程式由一個 SVG 檔案，JSP 檔案，和一個 JAVA 類組成：

• MeterRemote.java
• MeterChart.svg
• DyMeter.jsp

首先看看 MeterRemote.java，它產生了指標所指向的資料，作為例子我只是產生一個隨機資料，在實際項目中它就應該是返回實際的資料，例如，汽車儀錶盤就是當前汽車的時速。它們在實際項目中可以來自在實際項目中資料可以是來自資料庫，JMS，Web 服務，EJB 等。

import java.util.Random;public class MeterRemote {private double curr_value,full_value=200;public double getDegree(){Random r=new Random();curr_value=r.nextInt(200);return curr_value/full_value*270;}}

接著我們利用 DWR 引擎把該 Java 類發布，讓遠程 AJAX 應用能夠調用該 Java 類的方法 getDegree（）。

開啟 dwr.xml 檔案，在本文提供的例子從您可以看到它，添加如下代碼：

<allow> <create creator="new" javascript="MeterRemote"> <param name="class" value="com.nbw.svg.DyChart.ajax.MeterRemote"/> </create> </allow>

這樣 DWR 就把一個 Java 類發布出來了，可以在頁面通過 js 就可以直接調用它了，非常的簡單。它和大多數架構一樣使用了一個 xml 檔案來完成自己的配置，使用 creat 標籤發行就緒一個 java 類，creator=new 表明建立方式是通過new來建立執行個體，java 類這裡的配置都是一樣的，因為它支援spring和struts才會有不同的creator。Javascript="MeterRemote"說明了它在頁面中使用MeterRemote對象(js對象)來調用。Param標籤就定義了具體的類的名稱。使用DWR還可以指定調用的許可權和指定具體的java類的方法，而不是把所有的對象的方法都發布出來。跟多的配置資訊請查閱ibm上其它文章。

重新啟動伺服器，使用瀏覽器開啟如下地址：

http://localhost:8080/ajaxSVG/dwr

如所示：

會看到MeterRemote連結，說明發表成功了，單擊該連結http://localhost:8080/ajaxSVG/dwr/test/MeterRemote會看到測試頁面，它上麵包含了如何使用，和可以調用的方法。

如所示：

你可以點擊 Excute 來測試一下效果，這樣網頁就能夠直接調用 java 端的程式了。接著我們看看 JSP 檔案。

首先匯入 js，這樣才能：

1.<script type='text/javascript' src='/ ajaxSVG/dwr/engine.js'></script>2.<script type='text/javascript' src='/ ajaxSVG/dwr/util.js'></script>3.<script type='text/javascript'src='/ ajaxSVG/dwr/interface/MeterRemote.js'></script>

1,2行是DWR引擎所需要的兩個js檔案。第3行是匯入DWR引擎調用POJO java所需要的js檔案。

function getValue(){ MeterRemote.getDegree(loadinfo); }

上面的方法從伺服器端取得儀錶盤的指標的資料。

重點是以下代碼：

function loadinfo(data){DWRUtil.setValue("reply1", data); curr_degree=data; var svgDocument = window.sample.getSVGDocument();chart=svgDocument.getElementById("line2");chart.setAttribute( "from", last_degree+",250,250"); chart.setAttribute( "to", curr_degree+",250,250"); chart.beginElement(); last_degree=curr_degree;}

上面的代碼根據遠程調用得到的儀錶盤的指標資料來動態改變SVG圖中指標的位置。

其中：

var svgDocument = window.sample.getSVGDocument();

得到SVG對象。

chart=svgDocument.getElementById("line2");

得到指標對象。

chart.setAttribute( "from", last_degree+",250,250"); chart.setAttribute( "to", curr_degree+",250,250");chart.beginElement();

遠程調用得到的儀錶盤的指標資料來動態改變SVG圖中指標的位置。

最後我們看看SVG檔案，下面是值得關注的代碼部分

<circle cx="250" cy="250" r="150.0" fill="#ffffff"/><path d="M143.93398282201787 356.0660171779821 A150.0 150.0 , 0, 0,1,101.84674891072936 226.53483024396536 L250 250, Z" class="fill1"/><path d="M101.84674891072936 226.53483024396536 A150.0 150.0 , 0, 0,1,181.90142503906804 116.34902137174478 L250 250, Z" class="fill2"/><path d="M181.90142503906804 116.34902137174478 A150.0 150.0 , 0, 0,1,318.098574960932 116.34902137174484 L250 250, Z" class="fill3"/><path d="M318.098574960932 116.34902137174484 A150.0 150.0 , 0, 0,1,398.1532510892706 226.53483024396536 L250 250, Z" class="fill4"/><path d="M398.1532510892706 226.53483024396536 A150.0 150.0 , 0, 0,1,356.06601717798213 356.06601717798213 L250 250, Z" class="fill5"/><circle cx="250" cy="250" r="3" style="fill: #00C"/><line x1="129.7918471982869" y1="370.208152801713" x2="250" y2="250"style="stroke: #F00;stroke-width: 2px" id="finger"><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,250,250" begin="run()" to="20,250,250" dur="2"fill="freeze" style="stroke: #F00;stroke-width: 2px" id="line2"/></line>

實際上上面的 SVG 代碼定義了一個靜態指標指向 0 度的儀錶盤。它由 <path> 標籤定義的。它往往是通過軟體來生產的，因為能產生 SVG 圖表的軟體非常多，例如 jfreechart 等，和文章篇幅限制就不詳細結束 SVG 圖表了。

回頁首

結束語

使用本例子的原理我們已經在數個實際項目中應用了，從使用者使用的實際效果來說，效能和效果都非常滿意。替代了以往使用者使用 CS 軟體才能實現的即時監控圖表的功能，現在 AJAX 替代傳統的各種 MVC（例如Struts，JSF）架構並不能顯示出它的威力，特別是在開發 AJAX 工具奇缺，開發測試效率低下。但是它與其他技術的融合例如 SVG，往往能發揮意想不到的效果。AJAX 和各種新興的 Web 2.0 技術的出現大大的豐富了 Web 程式員的技術力量，把以往只有 CS 軟體才能實現的功能，不僅實現了，而且更加完美和高效。

擁抱 AJAX 擁抱 Web 2.0 你能做得更好！