AJAX技术在Web零件库系统中的应用研究

王宏伟，孙文磊，何 丽

WANG Hong-wei, SUN Wen-lei, HE Li

（新疆大学 机械工程学院，乌鲁木齐 830008）

0 引言

随着互联网技术的不断发展，网络正在成为人们生活中不可缺少的一部分。而在当今制造业信息化进程中，图形库系统正在发挥着越来越重要的作用。因此，借助于Web3D技术将两者紧密结合起来而设计的Web零件库系统将会给用户带来一种全新的体验，用户能够实现在线浏览、搜索、修改零件参数以及下载UG文件等功能。在整个系统功能中，在线浏览与搜索指定文件功能占有相当大的比重，如何快速浏览零件以及制定高效率、快速的数据检索方案显得尤为重要。AJAX技术是最近几年最受关注的一种技术，在使用了该技术的网页中，能够轻而易举的实现页面内容的局部刷新、智能搜索、异步通信等功能，而且速度相对较快。此次研究 主要就是通过运用AJAX技术实现Web零件库系统中三维零件图的无刷新浏览以及智能搜索两项重要功能。

1 核心技术简介

1.1 AJAX技术简介

AJAX全名是Asynchronous JavaScript And XML（异步JavaScript和XML），它是几种技术的一个有机结合。完整AJAX程序框架一般包含以下几部分内容：按照W3C DOM规范操作页面元素进行动态显示；使用XMLHttpRequest（以下简称为XHR）组件发起异步请求与服务端进行通信；采用XML数据格式传输与交换数据；最终通过Javascript语言将这些技术有机的捆绑在一起，使之能够协同工作，形成一整套完整的程序框架。AJAX程序能够在整个页面加载完成后再与服务器进行异步通信，实现小范围内数据更新，快速获得服务端数据，进而响应用户请求，优化网页数据传输解决方案。

AJAX程序的核心组件是XHR组件，它承担发送与接收数据两大重要任务。运行AJAX程序的首要任务即为创建XHR对象，继而利用该对象发送请求数据至服务端。此时在XHR对象的onreadystatechange属性中所指定的回调函数开始工作，周而复始的检测XHR对象的状态，直至接收到服务端返回的数据。当检测到服务端数据已经接收完毕，回调函数将开始解析服务端所返回的XML数据并更新页面指定区域，随后回调函数将停止工作，至此完成一次与服务器的通信。AJAX程序模型如图1所示。

1.2 Web3D技术

Web3D技术即为互联网上的3D技术，由于3D图形与动画比其他媒介有更强的说明作用，故在互联网占有重要的地位。VRML（虚拟现实建模语言）是3D图形和多媒体技术通用的交换文件格式，它基于建模技术，描述交互式的3D对象和场景，不仅应用在互联网上，也可以用在本地客户系统中，应用范围极广。

由于网络上传输的模型文件是基于ASCII码的文本文件，故其传输数据量大大小于视频图像。通过学习VRML97标准，能够使任何一个3D图形爱好者制作可在互联网上实时渲染的3D场景模型。普通Web浏览器通过安装显示VRML文件的插件(如BS Contact VRML)便可直接在Web浏览器中浏览三维模型，并能对模型进行移动、缩放和旋转等操作。同时，考虑到网络数据传输带宽等问题，VRML模型文件相对较小，也能加快程序响应速度，因此在本Web零件库系统中使用VRML文件作为中间文件。

图1 AJAX程序模型

2 三维模型无刷新浏览与智能搜索功能的实现

2.1 建立数据库及中间文件的生成

在UG NX 6.0软件中，已经为我们提供了生成VRML文件的接口，可通过对UG软件的二次开发在后台自动生成VRML文件，然后按照设定的命名格式进行命名、存储。本程序中作为中间文件的VRML文件，其文件名与UG文件名始终保持一致。

为了实现快速搜索以及首页面自动生成树形导航菜单，我们需要借助数据库来存储文件相关信息，如文件名(包括UG文件和VRML文件)、路径、文件编号等信息。生成中间文件和建立数据库过程如图2所示。

图2 数据库及中间文件建立

2.2 三维零件动态无刷新浏览功能的实现

Web零件库系统的一大重要功能是能够使用户在浏览器中直接观察三维零件，并能够进行旋转、缩放操作。本Web零件库系统中为实现三维模型在页面上的显示功能，需要借助VRML文件浏览插件，三维模型动态显示的具体实现方法为：页面中采用HTML语言中的object控件作为容器控件，并指定其classid属性为VRML插件在系统中所注册的类库ID值便可实现VRML文件动态显示功能：

Web零件库系统无刷新浏览功能框图如图3所示。

用户进行浏览操作时，系统捕捉用户点击页面左侧导航菜单事件，通过前台触发函数获取用户所点击项目的文件编号值随即利用该编码与缓存中的编码作比对，判断是否需要发起新的请求来获取服务端的三维模型虚拟现实文件。若需要更新文件则进行初始化工作来创建XHR对象，接着利用XHR对象的send方法将该编号发送至服务端处理页进行处理，并返回所需要的数据。与此同时回调函数也开始工作，检测XHR对象是否接收到服务端发回的数据。当检测到已经收到服务端返回的数据时，便按照W3CDOM编程规范所提供的方法解析XML格式数据，从中获取用户所点击的项目对应的VRML文件地址，并更新页面中的文件显示区域，实现动态浏览功能。

图3 三维模型无刷新浏览框图

在系统无刷新浏览功能的实现过程中，借助了AJAX程序的异步通信特点，对页面进行小范围数据提交与更新，加快了三维图形的浏览速度，实现了无需刷新整个页面就能更新三维模型的功能。在此过程中，XHR对象起到了至关重要的作用。因此，在AJAX程序中，能否成功建立XHR对象也就决定了整个程序是否能够成功运行。针对目前各浏览器对ActiveX技术的支持情况不同，每一种浏览器创建XHR对象的方法也不尽相同，本文以微软公司的IE浏览器为例进行说明，创建XHR的方法为：

2.3 三维零件智能搜索功能的实现

由于Web零件库系统中的零件数量一般会很大，单一的树形导航菜单并不能确保用户能够快速定位到想要浏览的文件。因此，如何根据文件的部分信息快速定位到该文件也是三维模型浏览的重要功能之一。

本系统为了方便用户进行文件检索，实现了基于AJAX技术的智能搜索功能。具体实现过程如图4所示：

在文件搜索过程中，可按照文件的编码和名称两种方式进行查询。用户操作时可以直接在搜索条件文本框中输入编号或名称，系统将智能判断所输入的数据具体属于编号还是名称，最终将其发送至服务端进行模糊查询，服务端处理函数查询数据库后返回由数据库中前十条记录和总计条数所构成的XML格式结果集合。最后由回调函数解析服务端所返回的XML文档并生成结构化字符串储存于hide控件中，然后以此字符串动态构建DIV控件，显示模糊查询的结果列表以提示用户进行选择。智能搜索过程中，为了节省带宽，每次只返回数据库中前十条符合要求的数据记录。

图4 三维图形智能搜索功能实现框图

3 应用实例

系统采用VRML作为中间文件来实现三维模型与浏览器的连接，故用户通过安装了VRML浏览器插件的普通Web浏览器在连接互联网的条件下就能浏览三维模型，而不需要安装复杂的专业软件。如图5所示，用户登陆系统网站后，可根据左侧导航菜单对三维模型进行浏览和下载。

图5 三维模型浏览

同时，如果用户想快速根据文件部分信息快速定位到该文件，也可在搜索文本框中提交搜索条件进行文件检索，通过智能搜索功能浏览指定的三维模型。检索零件过程中用户可以提交相对模糊的查询条件，搜索程序会根据该条件进行模糊查询列出相关结果，最后通过在提示框中进行提示用户选择来精确定位文件。当程序完成搜索并将提示框显示于搜索文本框下方时，用户可以按下键盘方向键选择相应项目，提示框中将会以高亮模式显示选中项目。同时，也可以直接用鼠标点击，最终将会在显示区域动态显示用户所选择的文件。如图6所示。

图6 搜索结果显示

4 结束语

通过研究AJAX通信原理以及W3CDOM编程规范，并以Visual Studio 2008作为开发工具，实现了Web零件库系统中三维模型在线无刷新浏览与智能搜索两大重要功能。通过网络，用户可以使用普通Web浏览器在接入互联网并安装一个很小的VRML浏览器插件的条件下就能方便的使用本Web零件库系统。通过Web零件库系统，用户能够在不安装复杂的专业三维软件的情况下进行直观的观察零件的三维模型，并且能够对模型进行旋转、缩放等简单交互操作。借鉴于三维动画的直观性，与传统的二维机械图纸相比，本系统能够给用户提供更多的方便，减少了二维零件图纸在流通过程中所造成的误解，在更大程度上方便用户与零件制造者进行沟通。

[1]陈冠军, 等.ASP.NET AJAX实用开发详解[M].北京∶ 电子工业出版社, 2008.

[2]霍兹纳, 著, 陈秋萍, 译.Ajax宝典[M].北京∶ 人邮电出版社, 2007.

[3]柯自聪.Ajax开发精要∶ 概念、案例与框架[M].北京∶ 电子工业出版社, 2006.

[4]黄晓东.基于Ajax技术的区域农业产业优势分析与优化工具研究[D].中国农业科学院, 2008.

[5]唐华, 赵正文, 龙树全.基于ASP.NET AJAX的搜索动态提示功能的实现[J].计算机系统应用, 2009(9)∶ 159-162.

[6]钟佩思, 栾倩, 刘梅, 王景林.辛纪光,面向网络化资源共享的零件库系统研究与实现[J].机械设计与制造, 2010(2)∶ 249-251.