[发明专利]一种AJAX实现动态图像增量传输与显示的方法

说明书

技术领域：

本发明是一种无需浏览器插件支持的，在B/S架构的客户端利用AJAX实现动态图像增量传输与显示的方法。涉及领域包括B/S前端开发、远程监控与服务器技术。

背景技术：

随着互联网技术的发展，特别是近几年来，RIA(Rich Internet Application，富互联网应用程序)的开发模式迅速兴起，许多本地化的应用程序均开始向RIA开发模式发展。RIA开发模式给用户带来了全新的互动用户界面，在无刷新页面的前提下提供快捷的响应。RIA客户端开发技术包括Adobe公司的Flex技术、Microsoft公司的Silverlight技术等。但是，用户在使用传统RIA技术开发的软件之前，需要在客户端安装一个应用环境软件(如Flash Player、Silverlight等)，每次使用时还需从软件提供者服务器上下载应用程序，这些繁琐复杂的操作使得传统RIA客户端在移动性与跨平台能力上甚至还不如传统的本地化应用程序好。AJAX(Asynchronous JavaScript and XML，异步JavaScript与XML)是一种结合了DHTML、XML与JavaScript技术的全新网页开发技术，它拥有RIA的大多数优秀特性，它的客户端无需预先安装环境支持软件，它的应用程序通常只有数千字节，它的软件更新后用户无需等待升级，这些都是传统RIA开发模式所不具备的特性。由于它是符合WSC标准的，得到了近乎所有的浏览器的支持。使用它构建的应用程序具备无须安装、无须刷新、快速响应等特点，应用十分广泛，最为知名的应用是Google公司的Gmail与Google Map产品，其中Google Map通过AJAX解析XSLT文档实现动态内容更新。

远程监控技术中的图像传输与显示技术是最为核心的技术。在技术较为先进的C/S架构解决方案中，一般采用图像增量传输技术以降低网络要求，节省带宽开销。当前许多RIA产品也实现了这项技术，然而由于AJAX技术本身并不支持图像编码，其对图形界面更新只能通过修改、删除和插入HTML元素实现，开发人员对基于AJAX的图形增量传输与显示技术望而止步。现有的AJAX动态图像传输与显示技术仅只是将动态图像中的每一帧完整图像用JPEG格式反馈给浏览器，并简单地利用img元素进行显示，没有一种AJAX实现图像增量传输与显示的方法。

发明内容：

本发明的目的在于提供一种在B/S架构下，使用AJAX技术实现动态图像增量传输与显示的方法，解决传统AJAX技术传输动态画面时网络资源消耗大与资源利用不科学的问题。

传统的动态图像传输方法每帧的数据都包含完整的图像，网络通信量非常之大。解决这个问题的常用方法即使用图像增量传输技术。图像增量传输技术包含两类，一类是时间增量方式，另一类是坐标增量方式。这两类图像增量传输技术在C/S架构的软件中应用较多，但在B/S的纯浏览器客户端中，因为浏览器脚本没有图像处理能力，使得开发人员对在该环境中的图像增量传输与显示技术望而却步。

该发明包括在浏览器端使用AJAX技术实现图像增量传输与显示的方法，包括浏览器端的AJAX实现以及服务端的Web服务、图形处理及数据编码方法。

该发明包括在浏览器端使用img元素onload事件实现触发式通信的方法，即通过更新img元素的src属性设置onload事件，实现“触发事件-更新属性-触发事件-更新属性”循环触发方式的动态图像即时更新。

该发明的浏览器端Ajax技术包括XML文档图像拆分布局信息以及对图像的拆分布局方法。

该发明中的服务端动态图像预处理方法包括对原始图像与当前图像的对比、差异区域划分，最终拼接成一个新的图像的方法。

该发明包括的主要步骤如下：

步骤a：客户端(即浏览器，下同)向服务器发送请求；

步骤b：服务端从动态图像中截取当前帧完整画面并保存为未经过压缩的BMP图像文件以及经过压缩可访问图像文件，再将包括可访问图像信息的XML文档返回给客户端；

步骤c：客户端接收到数据后解析XML文档，在页面中添加一个img元素，设置其src属性为步骤b保存的可访问图像的URL地址，设置其onload事件触发进行步骤d，在页面中添加一个背景为步骤b保存的可访问图像、显示高宽与步骤b保存的可访问图像相同、绝对定位、样式z-index属性为0的div元素；

步骤d：由步骤c添加的img元素onload事件触发本步骤后，客户端再次向服务端发送请求；

步骤e：服务端从动态图像中截取当前帧完整画面，并保存为未经过压缩的BMP图像；