專利名稱：一種ajax實現(xiàn)動態(tài)圖像增量傳輸與顯示的方法
技術(shù)領(lǐng)域：
本發(fā)明是一種無需瀏覽器插件支持的，在B/S架構(gòu)的客戶端利用AJAX實現(xiàn)動態(tài)圖 像增量傳輸與顯示的方法。涉及領(lǐng)域包括B/S前端開發(fā)、遠(yuǎn)程監(jiān)控與服務(wù)器技術(shù)。
背景技術(shù)：
隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，特別是近幾年來，RIA(Rich Internet Application，富 互聯(lián)網(wǎng)應(yīng)用程序)的開發(fā)模式迅速興起，許多本地化的應(yīng)用程序均開始向RIA開發(fā)模式發(fā) 展。RIA開發(fā)模式給用戶帶來了全新的互動用戶界面，在無刷新頁面的前提下提供快捷的響 應(yīng)。RIA客戶端開發(fā)技術(shù)包括Adobe公司的Flex技術(shù)、Microsoft公司的Silverlight技 術(shù)等。但是，用戶在使用傳統(tǒng)RIA技術(shù)開發(fā)的軟件之前，需要在客戶端安裝一個應(yīng)用環(huán)境軟 件(如Flash PlayeiNSilverlight等)，每次使用時還需從軟件提供者服務(wù)器上下載應(yīng)用 程序，這些繁瑣復(fù)雜的操作使得傳統(tǒng)RIA客戶端在移動性與跨平臺能力上甚至還不如傳統(tǒng) 的本地化應(yīng)用程序好。AJAX (Asynchronous JavaScript and XML，異步 JavaScript 與 XML) 是一種結(jié)合了 DHTML、XML與JavaScript技術(shù)的全新網(wǎng)頁開發(fā)技術(shù)，它擁有RIA的大多數(shù)優(yōu) 秀特性，它的客戶端無需預(yù)先安裝環(huán)境支持軟件，它的應(yīng)用程序通常只有數(shù)千字節(jié)，它的軟 件更新后用戶無需等待升級，這些都是傳統(tǒng)RIA開發(fā)模式所不具備的特性。由于它是符合 WSC標(biāo)準(zhǔn)的，得到了近乎所有的瀏覽器的支持。使用它構(gòu)建的應(yīng)用程序具備無須安裝、無須 刷新、快速響應(yīng)等特點(diǎn)，應(yīng)用十分廣泛，最為知名的應(yīng)用是Google公司的Gmail與Google Map產(chǎn)品，其中Google Map通過AJAX解析XSLT文檔實現(xiàn)動態(tài)內(nèi)容更新。遠(yuǎn)程監(jiān)控技術(shù)中的圖像傳輸與顯示技術(shù)是最為核心的技術(shù)。在技術(shù)較為先進(jìn)的C/ S架構(gòu)解決方案中，一般采用圖像增量傳輸技術(shù)以降低網(wǎng)絡(luò)要求，節(jié)省帶寬開銷。當(dāng)前許多 RIA產(chǎn)品也實現(xiàn)了這項技術(shù)，然而由于AJAX技術(shù)本身并不支持圖像編碼，其對圖形界面更 新只能通過修改、刪除和插入HTML元素實現(xiàn)，開發(fā)人員對基于AJAX的圖形增量傳輸與顯示 技術(shù)望而止步?，F(xiàn)有的AJAX動態(tài)圖像傳輸與顯示技術(shù)僅只是將動態(tài)圖像中的每一幀完整 圖像用JPEG格式反饋給瀏覽器，并簡單地利用img元素進(jìn)行顯示，沒有一種AJAX實現(xiàn)圖像 增量傳輸與顯示的方法。

發(fā)明內(nèi)容
本發(fā)明的目的在于提供一種在B/S架構(gòu)下，使用AJAX技術(shù)實現(xiàn)動態(tài)圖像增量傳輸 與顯示的方法，解決傳統(tǒng)AJAX技術(shù)傳輸動態(tài)畫面時網(wǎng)絡(luò)資源消耗大與資源利用不科學(xué)的 問題。傳統(tǒng)的動態(tài)圖像傳輸方法每幀的數(shù)據(jù)都包含完整的圖像，網(wǎng)絡(luò)通信量非常之大。 解決這個問題的常用方法即使用圖像增量傳輸技術(shù)。圖像增量傳輸技術(shù)包含兩類，一類是 時間增量方式，另一類是坐標(biāo)增量方式。這兩類圖像增量傳輸技術(shù)在C/S架構(gòu)的軟件中應(yīng) 用較多，但在B/S的純?yōu)g覽器客戶端中，因為瀏覽器腳本沒有圖像處理能力，使得開發(fā)人員 對在該環(huán)境中的圖像增量傳輸與顯示技術(shù)望而卻步。
該發(fā)明包括在瀏覽器端使用AJAX技術(shù)實現(xiàn)圖像增量傳輸與顯示的方法，包括瀏 覽器端的AJAX實現(xiàn)以及服務(wù)端的Web服務(wù)、圖形處理及數(shù)據(jù)編碼方法。該發(fā)明包括在瀏覽器端使用img元素onload事件實現(xiàn)觸發(fā)式通信的方法，即通過 更新img元素的src屬性設(shè)置onload事件，實現(xiàn)“觸發(fā)事件-更新屬性-觸發(fā)事件-更新 屬性”循環(huán)觸發(fā)方式的動態(tài)圖像即時更新。該發(fā)明的瀏覽器端Ajax技術(shù)包括XML文檔圖像拆分布局信息以及對圖像的拆分 布局方法。該發(fā)明中的服務(wù)端動態(tài)圖像預(yù)處理方法包括對原始圖像與當(dāng)前圖像的對比、差異 區(qū)域劃分，最終拼接成一個新的圖像的方法。該發(fā)明包括的主要步驟如下步驟a 客戶端(即瀏覽器，下同)向服務(wù)器發(fā)送請求；步驟b 服務(wù)端從動態(tài)圖像中截取當(dāng)前幀完整畫面并保存為未經(jīng)過壓縮的BMP圖 像文件以及經(jīng)過壓縮可訪問圖像文件，再將包括可訪問圖像信息的XML文檔返回給客戶 端；步驟c 客戶端接收到數(shù)據(jù)后解析XML文檔，在頁面中添加一個img元素，設(shè)置其 src屬性為步驟b保存的可訪問圖像的URL地址，設(shè)置其onload事件觸發(fā)進(jìn)行步驟d，在頁 面中添加一個背景為步驟b保存的可訪問圖像、顯示高寬與步驟b保存的可訪問圖像相同、 絕對定位、樣式z-index屬性為0的div元素；步驟d 由步驟c添加的img元素onload事件觸發(fā)本步驟后，客戶端再次向服務(wù) 端發(fā)送請求；步驟e 服務(wù)端從動態(tài)圖像中截取當(dāng)前幀完整畫面，并保存為未經(jīng)過壓縮的BMP圖 像；步驟f 服務(wù)端將步驟e保存的BMP圖像與步驟b保存的BMP圖像進(jìn)行對比，將步 驟e保存的BMP圖像中與步驟b保存的BMP圖像有差異的部分以及有差異部分的周邊部分 劃分成若干矩形區(qū)域；步驟g 服務(wù)端將步驟f中從步驟e保存的BMP圖像中提取出來的若干矩形區(qū)域 拼接成新的圖像，并保存為經(jīng)過壓縮后的可訪問的圖像文件；步驟h 服務(wù)端將步驟b中保存的BMP圖像文件替換成步驟e中保存的BMP圖像 文件，將步驟b中保存的經(jīng)過壓縮可訪問圖像文件刪除，并將包含步驟g保存的可訪問圖像 信息、步驟f的劃分方法信息以及步驟g拼接方法信息的XML文檔返回給客戶端；步驟i 客戶端收到數(shù)據(jù)后解析XML文檔，在頁面中添加與步驟f劃分矩形區(qū)域數(shù) 量相同數(shù)量的div元素，利用div元素樣式p0Siti0n、left、t0p屬性定位到頁面相應(yīng)位置， 其樣式z-index屬性值均按本步驟的執(zhí)行次數(shù)依次遞增，實現(xiàn)圖層的疊加顯示。修改步驟 c添加的img元素的src屬性為步驟g保存地可訪問圖像的URL地址，img元素的onload 事件會自動觸發(fā)執(zhí)行步驟d。服務(wù)端動態(tài)圖像可持續(xù)更新，實現(xiàn)客戶端圖像與動態(tài)圖像源在時間上一致。服務(wù)端保存經(jīng)過壓縮的可訪問圖像時，可選用JPEG格式進(jìn)行壓縮，亦可選用PNG 格式或其他瀏覽器可支持的圖像格式進(jìn)行保存。步驟b由服務(wù)端返回給客戶端的XML文檔包含的可訪問圖像信息包括圖像的URL地址、圖像的高和寬。步驟i由服務(wù)端返回給客戶端的XML文檔包含的可訪問圖像信息包括圖像的URL 地址、圖像的高和寬，包含的步驟f劃分方法信息包括每次劃分矩形區(qū)域在原BMP圖像中的 位置，包括每個矩形區(qū)域的左上角坐標(biāo)和矩形區(qū)域長、寬，包含的步驟g拼接方法信息包括 每個矩形區(qū)域在步驟g保存的圖像中的位置，包括每個矩形區(qū)域的左上角坐標(biāo)。在步驟d中，若當(dāng)前頁面上div元素過多，可將所有添加的div元素以及img元素 清除，重新從步驟a開始執(zhí)行，降低客戶端的內(nèi)存消耗。利用該方法實現(xiàn)的遠(yuǎn)程監(jiān)控軟件或在線視頻播放器，客戶端無需另外安裝任何軟 件或瀏覽器插件，用戶直接打開網(wǎng)頁進(jìn)行使用，將客戶端支持設(shè)備的范圍擴(kuò)充到一切擁有 標(biāo)準(zhǔn)互聯(lián)網(wǎng)瀏覽器的設(shè)備(除個人電腦外還有部分移動智能設(shè)備)，同時借助瀏覽器的安 全設(shè)置，保證了客戶端免受其他因素的安全威脅。通過只對圖像有變化的矩形區(qū)域進(jìn)行更 新，實現(xiàn)了快速高效的動態(tài)圖像增量傳輸與顯示。替換上述步驟中涉及到的屬性、元素等信息或在上述步驟中插入其它步驟達(dá)到相 同或類似目的的方法均屬于本發(fā)明專利所要求保護(hù)的范圍。


圖1是本發(fā)明所描述方法構(gòu)建的總體架構(gòu)的示意圖。圖2是本發(fā)明所描述方法涉及結(jié)構(gòu)的層次圖。圖3是本發(fā)明所描述方法客戶端工作的流程圖。圖4是本發(fā)明所描述方法服務(wù)端工作的流程圖。圖5是本發(fā)明所描述方法中部分刷新操作圖形處理的一個實例示意圖。
具體實施方法以下，參照附圖來說明本發(fā)明說描述的方法。在下面的說明中，未詳細(xì)說明公知的 技術(shù)細(xì)節(jié)或其他術(shù)語，因為它們會在不必要的細(xì)節(jié)上混淆本發(fā)明。圖1是本發(fā)明所描述方法構(gòu)建的總體架構(gòu)的示意圖。參見圖1，客戶端與服務(wù)端通 過標(biāo)準(zhǔn)的HTTP協(xié)議進(jìn)行通信，數(shù)據(jù)以Post或Get方法提交，其中客戶端可為個人電腦、移 動智能設(shè)備或其他擁有支持或基本支持W3C標(biāo)準(zhǔn)瀏覽器的設(shè)備，服務(wù)端為具備圖形處理、 信息編碼、網(wǎng)絡(luò)通信、Web服務(wù)功能的電子計算機(jī)或者微電腦等設(shè)備。服務(wù)端提供Web服務(wù)， 包括數(shù)據(jù)傳輸、請求處理等?？蛻舳耸状卧L問服務(wù)端時，瀏覽器從服務(wù)端下載頁面XHTML、CSS以及JavaScript 代碼并呈現(xiàn)給用戶，同時執(zhí)行JavaScript代碼中的相關(guān)程序，通過XMLHTTP (微軟環(huán)境)對 象或XMLHttpRequest (其他環(huán)境)對象(下文將這2類對象稱作XMLRequest對象)與服 務(wù)端進(jìn)行余下的通信工作，其通信方法以及原理是公知的，這里不再作描述。圖2是上述XHTML與CSS布局中涉及到該發(fā)明部分結(jié)構(gòu)的層次圖。參見圖2，布局 中涉及3個涉及到該發(fā)明的層(這里層的概念并不等同于XHTML中的div標(biāo)簽)，分別為 “控制感應(yīng)層”、“遠(yuǎn)程圖像層”以及“輔助功能層”。其中控制感應(yīng)層在XHTML文檔中是一個 div 標(biāo)簽，使用層疊樣式表(Cascading Style Sheets)的 position 屬性、left 屬性、top 屬性、z-index屬性固定在頁面中特定位置，其z-index屬性值取最大值(一般256)。遠(yuǎn)程圖像層定位在控制感應(yīng)層的下方，輔助功能層則獨(dú)立于控制感應(yīng)層與遠(yuǎn)程圖像層，可用層 疊樣式表的display屬性隱藏。遠(yuǎn)程圖像層中可包含多個div標(biāo)簽，這里將這些div標(biāo)簽稱作圖層，通過設(shè)置圖層 position, left、top樣式屬性實現(xiàn)圖層在遠(yuǎn)程圖像層中的定位，通過設(shè)置圖層z-index樣 式屬性實現(xiàn)圖層的疊加。該發(fā)明利用圖層的定位與疊加實現(xiàn)圖像的區(qū)域更新，即增量顯示。 控制感應(yīng)層用于提供設(shè)備對圖像操作位置的感應(yīng)功能，若將本發(fā)明應(yīng)用到電子計算機(jī)遠(yuǎn)程 屏幕監(jiān)控中，控制感應(yīng)層可用于獲取鼠標(biāo)相對于遠(yuǎn)程圖像層的相對位置以及感應(yīng)單擊、雙 擊等操作，以實現(xiàn)鼠標(biāo)的模擬遠(yuǎn)程控制。輔助功能層是用于存放該方法實施過程中需要引 入的而無需與用戶進(jìn)行交互XHTML對象的容器，通過設(shè)置display樣式屬性進(jìn)行隱藏，是實 施該發(fā)明必不可少的一部分。圖3是本發(fā)明所描述方法客戶端工作的流程圖。參見圖3，客戶端具體工作步驟如 下B1步驟用戶打開網(wǎng)頁，觸發(fā)JavaScript腳本。這里的觸發(fā)方式有多種，可為網(wǎng) 頁加載完畢后自動觸發(fā)，也可由用戶單擊按鈕觸發(fā)；B2步驟瀏覽器通過XMLRequest對象向服務(wù)端發(fā)送請求(Request)。XMLRequest 對象是瀏覽器內(nèi)置的對象，可通過JavaScript直接利用，是AJAX的核心技術(shù)。本次請求提 交的信息包括一個表示本次請求為完全刷新操作的參數(shù)；B3步驟客戶端接收到服務(wù)端返回XML文檔。在XML文檔接收完成后，使用 DOM (Document Object Model，文檔對象模型)解析其中后續(xù)步驟所需要的信息；B4步驟判斷本次操作是否是完全刷新操作。判斷本次操作是否為完全刷新操作 依據(jù)是B3步驟中從XML文檔中解析出來的信息。若本次操作是完全刷新操作則進(jìn)入B5步 驟，否則執(zhí)行B8步驟；B5步驟清空遠(yuǎn)程圖像層、輔助功能層內(nèi)的元素。該操作僅在遠(yuǎn)程圖像層(可能 包含div圖層)、輔助功能層內(nèi)(可能包含img元素)有元素的情況下執(zhí)行；B6步驟在遠(yuǎn)程圖像層內(nèi)添加圖層，在輔助功能層內(nèi)添加img元素并設(shè)置觸發(fā)。圖 層可用div元素，通過設(shè)置其樣式background、position、left、top、z-index屬性實現(xiàn)圖 層的顯示定位與疊加，這里的z-index屬性值為0。添加的img元素的src屬性為B3步驟 中解析得到的圖像URL地址，設(shè)置其onload事件觸發(fā)執(zhí)行B7步驟；B7步驟發(fā)送部分刷新請求。該步驟由步驟B6或步驟B9更新img元素觸發(fā)執(zhí)行。 該步驟執(zhí)行完畢后執(zhí)行步驟B3 ；B8步驟去除新圖層完全覆蓋的圖層。判斷遠(yuǎn)程圖像區(qū)現(xiàn)有的圖層中是否有能被 B9步驟中將要添加圖層完全覆蓋的圖層，若有則將其去除。圖層信息在B3步驟中從XML文 檔中解析取得；B9步驟在遠(yuǎn)程圖像層添加圖層，更新輔助功能層img元素。圖層添加方式信息， 在B3步驟中從XML文檔中取得，添加的圖層利用樣式p0Siti0n、left、t0p、Z-index定位在 遠(yuǎn)程圖像層的位置，用樣式background定位顯示的區(qū)域在B3步驟解析得到圖像中的位置。 設(shè)置img元素src屬性為在B3步驟解析得到的圖像URL地址。該步驟中修改img元素src 屬性會使img元素重新加載，img元素加載完畢后會再次觸發(fā)onload事件執(zhí)行B7步驟。img元素的onload事件會在該元素src屬性所指向的圖像加載完畢后自動觸發(fā)。其中B7步驟始終由img元素onload事件觸發(fā)，該發(fā)明利用“發(fā)送請求_更新img對象-觸發(fā)發(fā)送請求_更新img對象-觸發(fā)發(fā)送請求”這樣的循環(huán)操作實現(xiàn)圖像實時傳輸。這里所說的“完全刷新操作”指的是客戶端首次向服務(wù)端發(fā)送請求獲得完整圖像、 或客戶端與服務(wù)端圖像不同步時進(jìn)行的操作，其發(fā)送的請求被稱作“完全刷新請求”?！安糠?刷新操作”與“完全刷新操作”相對，指的是客戶端在現(xiàn)有圖像的基礎(chǔ)上向服務(wù)端發(fā)送請求 獲的增量圖像及相關(guān)信息時的操作，其發(fā)送的請求被稱作“部分刷新請求”。圖4是本發(fā)明所描述方法服務(wù)端工作的流程圖。參見圖4，服務(wù)端具體工作步驟如 下Sl步驟服務(wù)器收到來自客戶端的請求；S2步驟通過Sl步驟收到的請求所帶的參數(shù)判斷此次請求是完全刷新請求或是 部分刷新請求，若是完全刷新請求則執(zhí)行S3步驟，否則執(zhí)行S6步驟；S3步驟從動態(tài)圖像中截取瞬時圖像并保存為BMP圖像文件。這里的BMP圖像文 件的文件路徑與文件名是固定不變的，后續(xù)步驟中將會對該文件進(jìn)行替換；S4步驟將BMP圖像文件壓縮并保存在可訪問路徑下。一般情況下可用JPEG格 式保存，也可用PNG或其他瀏覽器支持的格式保存，該文件保存在可訪問的路徑下，以便客 戶端能夠正常訪問；S5步驟將包含壓縮后圖像文件信息的XML文檔返回給客戶端。該XML文檔包括 圖像文件URL地址、圖像高、寬以及表示該次操作為完全刷新操作的文本標(biāo)志；S6步驟從動態(tài)圖像中截取當(dāng)前瞬時圖像并保存為BMP圖像文件。該步驟保存的 文件與S3步驟保存的文件路徑與文件名不同，后續(xù)步驟將對兩圖像進(jìn)行對比；S7步驟將S6步驟所保存BMP圖像與上次請求保存BMP圖像的差異部分劃分成 矩形并重新拼接。將兩圖像的差異部分及差異部分周邊區(qū)域劃分成若干矩形區(qū)域，并將這 些矩形區(qū)域拼接成一個新的圖像；S8步驟將拼接后的圖像壓縮保存在可訪問路徑下。拼接后的圖像指的是S7步 驟中拼接出的新圖像；S9步驟將包含壓縮后圖像文件信息與劃分拼接信息的XML文檔返回給客戶端。圖5是本發(fā)明所描述方法中部分刷新操作圖形處理的一個實例示意圖，如圖5所 示，部分刷新操作對圖像的處理(即圖4所示S7步驟)分3步完成第一步逐像素點(diǎn)對比當(dāng)前圖像與上幀圖像(指上次操作所保存的圖像)并用 FloodFill算法找出差異區(qū)域；第二步將在當(dāng)前圖像上的這些差異區(qū)域劃分成若干矩形，這里將這些矩形區(qū)域 稱作差異矩形；第三步將差異矩形圖像拼接成一個新的矩形圖像，并保存為一個靜態(tài)圖像文件， 替換原來的原始圖像文件。在第一步中，只要像素點(diǎn)顏色不完全相同就認(rèn)為該像素點(diǎn)屬于差異區(qū)域，在使用 FloodFill尋找差異區(qū)域時，可定義曼哈頓距離小于高寬之和的的兩個像素點(diǎn)是相互 連接的，以平衡差異區(qū)域數(shù)量，提高圖像處理速度與客戶端解析拆分速度；在第二步中，可 簡單地將每塊差異區(qū)域所在的最小矩形直接劃成差異矩形，但這種方法在同時存在長差異 矩形與寬差異矩形特殊情況下會使得第三步生成的新矩形過大，導(dǎo)致增量數(shù)據(jù)過大，因此在拆分時需要把每塊的高度與寬度限定在一定范圍內(nèi)，范圍的確定可由當(dāng)前圖像的高寬確定；一般情況下，第三步可用深度優(yōu)先搜索算法尋找最優(yōu)的拼接方法。以上所涉及到的公知算法不包括在本發(fā)明范圍內(nèi)，在這些步驟使用類似算法達(dá)到 相同目的方法也屬于本發(fā)明所描述的方法。當(dāng)客戶端發(fā)送的請求為完全刷新請求時，服務(wù)端返回的XML文檔應(yīng)當(dāng)包含圖像文 件URL地址、圖像高寬以及完全刷新文本標(biāo)志。當(dāng)客戶端發(fā)送的請求為部分刷新請求時，月艮 務(wù)端返回的XML文檔應(yīng)包含圖像文件URL地址、部分刷新文本標(biāo)志以及各差異矩形在原BMP 圖像中的位置信息和在拼接后圖像中的位置信息。位置信息包括差異矩形所在的像素位置 (即矩形左側(cè)象素點(diǎn)個數(shù)和矩形上方象素點(diǎn)個數(shù))以及差異矩形的大小(即差異矩形橫向 象素點(diǎn)個數(shù)及縱向象素點(diǎn)個數(shù))。一般情況下，完全刷新操作只執(zhí)行一次，此后觸發(fā)的操作均為部分刷新操作，在如 下的2種特殊情況下，部分刷新操作的處理方式可進(jìn)行變動1、在原始圖像與當(dāng)前圖像完全一致時，返回的XML文檔不再包含新的圖像訪問地 址，圖像更新文本標(biāo)志更換為表示無須更新的文本標(biāo)志，客戶端處理時直接觸發(fā)新的部分 刷新操作；2、在客戶端遠(yuǎn)程圖像層內(nèi)圖層數(shù)達(dá)到一定量時，客戶端不觸發(fā)執(zhí)行部分刷新操 作，而觸發(fā)執(zhí)行完全刷新操作。圖4中S7步驟的圖像處理具體實現(xiàn)方式可能會對本發(fā)明所提供方法的實際應(yīng)用 效果產(chǎn)生影響，本發(fā)明專利不包括該步驟中圖像處理的具體算法。本發(fā)明所提供的方法可用于制作B/S架構(gòu)的遠(yuǎn)程計算機(jī)桌面監(jiān)控軟件和遠(yuǎn)程 視頻監(jiān)控軟件，在制作B/S架構(gòu)遠(yuǎn)程計算機(jī)桌面監(jiān)控軟件上帶來的速度與性能的提升更 明顯。在制作遠(yuǎn)程計算機(jī)桌面監(jiān)控軟件之需要在以上方法的基礎(chǔ)上，在控制感應(yīng)層設(shè)置 onmousemove、onclick、onmousedown禾口 onmouseup等事件，記錄客戶端鼠標(biāo)的動作，將動作 信息作為圖3中B7步驟發(fā)送請求的參數(shù)之一，服務(wù)端在圖4中Sl操作后根據(jù)參數(shù)模擬相 關(guān)動作，即可實現(xiàn)帶鼠標(biāo)控制功能的B/S遠(yuǎn)程計算機(jī)桌面監(jiān)控。使用本發(fā)明提供的方法制作的B/S架構(gòu)遠(yuǎn)程計算機(jī)桌面監(jiān)控軟件，客戶端用戶無 需下載安裝應(yīng)用程序，打開網(wǎng)頁即可使用，同時可跨平臺使用，支持移動智能設(shè)備。同時在 性能方面，較未使用本發(fā)明所提供的方法制作的B/S無需插件支持的同類軟件，本發(fā)明所 提供的方案最高能節(jié)省90%以上的網(wǎng)絡(luò)通信量，在特定網(wǎng)絡(luò)環(huán)境下可提供數(shù)十倍的圖像更 新速度。開發(fā)人員使用本發(fā)明所提供的方法進(jìn)行軟件開發(fā)，無需具備圖形編碼知識。服務(wù) 端可使用微軟IIS軟件、ASP技術(shù)以及COM+技術(shù)實現(xiàn)。通過對本發(fā)明所提供的方法進(jìn)行改造和擴(kuò)充，也可以實現(xiàn)一服務(wù)器對多客戶、動 態(tài)圖像源與服務(wù)器分離、三端混合架構(gòu)的多用戶對多動態(tài)圖像源等多種應(yīng)用。
權(quán)利要求
一種瀏覽器用AJAX實現(xiàn)動態(tài)圖像增量傳輸與顯示的方法，其特征在于，包括以下步驟步驟1客戶端向服務(wù)端發(fā)送請求；步驟2服務(wù)端將動態(tài)圖像當(dāng)前瞬時圖像的完整圖像以及圖像信息XML文檔返回給客戶端；步驟3客戶端將服務(wù)端返回的完整圖像顯示在網(wǎng)頁上，并設(shè)置加載完畢觸發(fā)執(zhí)行步驟4；步驟4客戶端向服務(wù)端發(fā)送請求；步驟5服務(wù)端將增量數(shù)據(jù)圖像以及包含圖像信息和客戶端顯示方法信息的XML文檔返回給客戶端；步驟6客戶端按照服務(wù)端返回的XML文檔，將增量數(shù)據(jù)圖像顯示在網(wǎng)頁上，并設(shè)置加載完畢觸發(fā)執(zhí)行步驟4。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述客戶端為瀏覽器，客戶端不依靠第三 方廠商提供的運(yùn)行環(huán)境或是瀏覽器插件。
3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述客戶端使用JavaScript、 XML (Extensible Markup Language, nJ^T'MfeiSip'lir ) > CSS (Cascading Style Sheets, M 疊樣式表)和 XHTML (The Extensible Hyper Text Mark-up Language，可擴(kuò)展超文本標(biāo)記 語言)或HTML (Hyper Text Mark-up Language，超文本標(biāo)記語言)技術(shù)實現(xiàn)。
4.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述增量數(shù)據(jù)圖像由動態(tài)圖像當(dāng)前瞬時 圖像中的若干矩形圖像組成的一個支持在瀏覽器上顯示的圖像。
5.根據(jù)權(quán)利要求4所述的方法，其特征在于，所述若干矩形圖像區(qū)域為，前后兩次服務(wù) 端接收請求時，動態(tài)圖像瞬時圖像差異部分所在的矩形區(qū)域。
6.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述步驟6中將增量數(shù)據(jù)圖像顯示在網(wǎng)頁 上的操作，是利用HTML元素定位、疊加實現(xiàn)的。
7.根據(jù)權(quán)利要求6所述的方法，其特征在于，所述定位、疊加的實現(xiàn)，利用了CSS的 background、position、left、top、z-index 屬性。
8.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述觸發(fā)執(zhí)行方法為通過修改img元素的 src屬性引發(fā)加載，利用onload事件觸發(fā)加載完畢執(zhí)行。
全文摘要
傳統(tǒng)的動態(tài)圖像增量傳輸與顯示應(yīng)用一般采用C/S架構(gòu)實現(xiàn)。B/S架構(gòu)的AJAX(Asynchronous Java Script and XML，異步Java Script與XML)應(yīng)用具有客戶端文件小、無需安裝運(yùn)行環(huán)境與可跨平臺使用等諸多優(yōu)秀特性，但由于Java Script不支持圖像編碼，開發(fā)人員對AJAX實現(xiàn)動態(tài)圖像的增量技術(shù)望而卻步，始終沒有一個真正能夠?qū)崿F(xiàn)的方法。本發(fā)明的目的就是提供這樣一個AJAX實現(xiàn)動態(tài)圖像增量傳輸與顯示的方法。
文檔編號G06F17/30GK101860734SQ20091004305
公開日2010年10月13日 申請日期2009年4月7日 優(yōu)先權(quán)日2009年4月7日
發(fā)明者謝亞南 申請人:謝亞南