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

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

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

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

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

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

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

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

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