ajax + svg 實現(xiàn)實時監(jiān)控圖表

1、AJAXSVG實現(xiàn)實時監(jiān)控圖表實現(xiàn)實時監(jiān)控圖表AJAX已經(jīng)有很多文章介紹它的原理及其應(yīng)用了。但是遺憾的是現(xiàn)在并沒有很多結(jié)合實際項目應(yīng)用。本文結(jié)合實際項目中的應(yīng)用來講述利用AJAX和SVG技術(shù)如何創(chuàng)建各種激動人心的功能，并附帶可以運行的例子和源代碼。0評論：皮振華(pi_zh@)自由撰稿人北京能博文公司2006年6月15日?內(nèi)容內(nèi)容前言前言AJAX已經(jīng)有很多文章介紹它的原理及其應(yīng)用了。但是遺憾的是現(xiàn)在并沒有很多結(jié)合實際項目應(yīng)用。本文結(jié)合實

2、際項目中的應(yīng)用來講述利用AJAX和SVG技術(shù)如何創(chuàng)建各種激動人心的功能，并附帶可以運行的例子和源代碼。本文需要一定的AJAX，SVG知識和應(yīng)用經(jīng)驗。當(dāng)然它們都可以在developerwkscn上找到。個人對于AJAX應(yīng)用的建議是如果傳統(tǒng)的MVC能夠滿足的應(yīng)用，沒有必要使用AJAX來代替，因為這里AJAX唯一能帶來的好處只是無刷新。AJAX是用來幫助我們實現(xiàn)以往使用傳統(tǒng)web技術(shù)難以實現(xiàn)的功能的。技術(shù)名詞技術(shù)名詞1AJAX，AJAX(As

3、ynchronousJavriptXML)是多種技術(shù)的綜合，它使用XHTML和CSS標(biāo)準化呈現(xiàn)，使用DOM實現(xiàn)動態(tài)顯示和交互，使用XML和XSTL進行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進行異步數(shù)據(jù)讀取，使用Javript綁定和處理所有數(shù)據(jù)。更重要的是它打破了使用頁面重載的慣例技術(shù)組合，可以說AJAX已成為Web開發(fā)的重要武器2SVG(ScalableVectGraphic)是一個標(biāo)準開放的矢量圖像格式。它使你設(shè)計的網(wǎng)頁

4、可以更加精彩，更加細致。使用簡單的文本命令，SVG甚至可以做出諸如色彩線性變化、自定義置入字體、透明、動態(tài)效果、慮鏡效果等各式常見的圖像效果。SVG圖像是基于XML(可擴展標(biāo)識語言未來的網(wǎng)絡(luò)語言)的應(yīng)用，并由W3C組織的SVG開發(fā)組負責(zé)詳細的研究和開發(fā)。點擊開始按鈕，你會發(fā)現(xiàn)圖表的指針會根據(jù)服務(wù)器的數(shù)據(jù)實時擺動。很類似與一個汽車儀器儀點擊開始按鈕，你會發(fā)現(xiàn)圖表的指針會根據(jù)服務(wù)器的數(shù)據(jù)實時擺動。很類似與一個汽車儀器儀表盤，這是以往表盤，這

5、是以往cs軟件或者是軟件或者是flash才能實現(xiàn)的效果，現(xiàn)在我們使用純才能實現(xiàn)的效果，現(xiàn)在我們使用純web的形式實現(xiàn)了。的形式實現(xiàn)了。從專業(yè)術(shù)語來說，它實際上是一個從專業(yè)術(shù)語來說，它實際上是一個DashBoard，其實在各種，其實在各種BI（商業(yè)智能）應(yīng)用中都可以（商業(yè)智能）應(yīng)用中都可以看到它，它的靈感來自于汽車的儀表盤，它非常直觀的反映了當(dāng)前數(shù)據(jù)的狀態(tài)，例如處于危險，看到它，它的靈感來自于汽車的儀表盤，它非常直觀的反映了當(dāng)前數(shù)據(jù)的狀態(tài)

6、，例如處于危險，安全，過低等等。安全，過低等等。當(dāng)然它并不新鮮，很多軟件都能提供這種圖表，我們今天要使用當(dāng)然它并不新鮮，很多軟件都能提供這種圖表，我們今天要使用AJAX和SVG來突破傳統(tǒng)來突破傳統(tǒng)應(yīng)用，以往的軟件生成的圖片都是靜態(tài)的，注意我這里的靜態(tài)是指它們生成的圖片上的指針不應(yīng)用，以往的軟件生成的圖片都是靜態(tài)的，注意我這里的靜態(tài)是指它們生成的圖片上的指針不會像真正的汽車儀表盤一樣隨著汽車的各種數(shù)據(jù)的變化，例如速度、油量的變化而擺動，根

7、據(jù)會像真正的汽車儀表盤一樣隨著汽車的各種數(shù)據(jù)的變化，例如速度、油量的變化而擺動，根據(jù)汽車的實時速度而擺動，而是用戶刷新一次頁面，軟件根據(jù)服務(wù)器端的數(shù)據(jù)重新生成圖片再顯汽車的實時速度而擺動，而是用戶刷新一次頁面，軟件根據(jù)服務(wù)器端的數(shù)據(jù)重新生成圖片再顯示給最終用戶。示給最終用戶。傳統(tǒng)的這種方式對于一般的傳統(tǒng)的這種方式對于一般的BI應(yīng)用來說是完全足夠了，但是對于實時性要求比較高的系統(tǒng)來應(yīng)用來說是完全足夠了，但是對于實時性要求比較高的系統(tǒng)來說，

8、利用監(jiān)控系統(tǒng)來說，不可能要求用戶隨時刷新頁面，或者使用說，利用監(jiān)控系統(tǒng)來說，不可能要求用戶隨時刷新頁面，或者使用Javript來定時刷新頁來定時刷新頁面，這樣效果非常差，而且服務(wù)器端反復(fù)在內(nèi)存，或者硬盤中生成圖片，用戶數(shù)量多之后，系面，這樣效果非常差，而且服務(wù)器端反復(fù)在內(nèi)存，或者硬盤中生成圖片，用戶數(shù)量多之后，系統(tǒng)負擔(dān)太重了。統(tǒng)負擔(dān)太重了。我們拋開技術(shù)想一下，我們實際上只想改變指針的位置就行了，根本沒有必要生成整個圖片或我們拋開技術(shù)想一