基于JavaScript与DBGRID控件的B/S结构客户端联想式录入技术的设计与实现

一、 问题的提出

随着Internet技术的兴起，应用软件的结构已从原来的C/S（Client/Server，客户机/服务器）结构方式转向B/S（Browser/Server，浏览器/服务器）方式。B/S结构的客户端完全由浏览器来承担，这给应用软件的发布和维护带来了很大的方便；但由于不能象C/S结构的客户端那样提供丰富的GUI图形界面，使得数据录入界面过于简单且不够人性化，随之带来数据录入效率的问题，常常会引起客户的抱怨。如：回车键不能在各输入焦点间切换；不能在浏览器一个页面中直接对数据库一个表的记录进行方便地显示、删除、修改操作等。这些数据录入的问题在C/S模式下不需要特殊的技术和方法，一般的开发工具都能解决，而在B/S结构的软件设计中，却是需要软件开发人员自己去花费精力和时间去解决这个问题。本文给出的是基于JavaScript与DBGRID控件技术在B/S结构下实现联想式提高数据录入效率的一种方法，希望在解决B/S结构客户端的录入速度和易操作性方面做一些探索，起到抛砖引玉的作用。

二、JavaScript和 DBGRID控件介绍

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。它可以直接嵌入HTML文档中，也可动态装载。它采用以事件驱动的方式直接对用户或客户输入做出响应，无须经过Web服务程序而依赖于浏览器本身，只要能运行浏览器的计算机，并支持JavaScript的浏览器即可正确执行，与操作环境无关。

DBGRID可称之为数据网格，开始出现时是为C/S方式下数据库应用程序开发提供的数据操作控件，用于全屏幕显示和编辑数据库表中的记录，表现为网格的形式。因此，使用该控件能很好地提高数据录入的效率。

在B/S方式下，客户端（浏览器）可以通过使用DBGRID控件来改善用户的操作界面。备选的DBGRID控件分为基于ActiveX技术的和基于JavaScript技术的两种形式，这两种DBGRID控件在使用时是不一样的。在使用基于ActiveX技术的DBGRID控件时，需要在每台客户机上安装，这样一旦需求发生变化，每台客户机上的控件也必须重新下载安装。而在使用基于JavaScript技术的DBGRID控件时，是不需要单独安装的。相当于用浏览器能直接解释执行JavaScript脚本语言编写的录入界面，并在内存中保存用户操作的数据，因此，既使因需求发生变化而变化的DBGRID控件，也是浏览器能直接解释执行的，并不需要另外安装，降低了软件升级的难度。

下面分别给出在IE中使用两种DRGRID控件的示例代码：

（1）使用基于ActiveX技术的DBGRID控件

 ID= "控件标识名，提供HTML代码访问该控件的入口"

CLASSID="操作系统中控件对象唯一的ID号"

CODEBASE="控件位置" 设置控件在IE中的宽度，高度等>

 < / OBJECT>

（2）使用基于JavaScript技术的DBGRID控件

页面导入时调用JavaScript函数 function init_load()，在该函数中主要包括以下功能语句：

1》新建Query对象，在DBGRID的JS包中定义

new Query('querymaster');

2》与服务器端固定格式的XML文件绑定，定义DBGRID的各列名

 

querymaster.OpenUrl = "readxml.jsp?Name=Student.xml";

3》设置服务器端处理提交数据的程序

querymaster.PostUrl = "StudentSave.jsp";

4》定义Query列名

var f=new Field("Student_No","VARCHAR");

querymaster.Fields.Add(f);

5》定义DBGRID对象

new DBGrid('dbgrid');

6》设置在HTML中的属性，如宽，高等，并添加数据网格的列

var col1 = new Column('Student_No','学号');

col1.width = 30;

dbgrid.Cols.Add(col1);

7》设置数据集，与前面的Query对象绑定

dbgrid2.DataSet= querymaster;

 

 本文介绍的联想式录入实现方法是采用基于JavaScript技术的DBGRID控件。

三、 B/S结构客户端联想式录入功能的实现技术

B/S结构中，客户端联想式录入功能是指，在浏览器里输入一条记录时，当输入一个代码后，不需要提交到服务器去查找数据库，就能直接在客户端显示出与该代码相关的其它信息。比如，在一个学生成绩管理的软件中，不提供客户端联想式录入功能时，在输入学号之后，必须先提交到服务器，才能在客户端录入界面上显示出学生的姓名、性别、班级等信息；如果提供客户端联想式录入功能，则在客户端就能实现一输入学号，马上就能显示学生的姓名、性别、班级等信息。

在使用基于JavaScript技术的DBGRID控件来实现客户端联想式录入功能时，在本地硬盘上，以XML文件形式存放数据。用户在DBGRID录入区中进行操作，当输入基础信息中的一个ID号时，将通过触发相应的JavaScript方法来使用IE浏览器内嵌的XML解析器实例（Microsoft.xmldom）。Microsoft.xmldom对象对基础信息的XML文件做解析，找到该ID号所在DOM（文档对象模型）树的节点，取出其对应的其它信息，并在DBGRID相应数据项位置进行显示。

当用户在浏览器上的DBGRID录入区作添加、修改或删除数据记录的操作时，均会触发JavaScript方法将相应的变化记录到另一个XML格式的输入流中，该输入流是在客户端的内存中，称之为录入信息。当用户将最终的录入结果提交到服务器时，在服务器端有相应的程序对该XML输入流作解析，分析用户做了哪些添加、修改、删除数据的操作，并将分析结果更新到数据库相应的表。客户端联想式录入功能的工作原理如图1所示：

下面给出学生成绩管理中的联想式录入功能的具体实现。在客户端学生的基础信息按照下列格式组织成XML文件：

” ? ” 姓名= ” ? ” 性别= ” ? ” 家庭住址= ” ? ” >

用户在DBGRID中录入学生的学号后，将触发一个JavaScript方法，其主要内容包括：

（1）定义ActiveXObject

var v_studentdata = new ActiveXObject("Microsoft.xmldom");

v_studentdata = false;   

（2）解析本地XML文件

v_studentdata.loadXML(?.xml);

（3）查找相应的节点

nod = v_studentdata .selectSingleNode("//ROW[@学号='"+?+"' ]");

if(nod != null){

取出所需数据

vAddress = nod.getAttribute("姓名");

}

（4）赋值给DBGRID相应数据项

 

 

 

图1  客户端联想式录入功能的工作原理示意图

 

在实际应用中，用户需要联想显示的信息不一定是在数据库的一个表中，而是要从数据库几个表中联合查询得到；另外，即使是这些基础信息，其内容也是会变化的，比如一个学生的家庭地址发生变化，等等。因此，应用软件还需要在服务端提供一个程序，负责基础信息版本维护功能，即查询并组织好用户所需要的基础信息，形成XML文件，并由用户下载到本地；当基础信息发生变化时，自动组织好新的基础信息，提醒用户或自动更新客户端的XML文件。

四、结束语

在一个需要满足比较大的录入工作量的B/S结构的应用软件中,用户操作的简便性和快速性是系统不得不考虑的问题。本文使用基于JavaScript和DBGRID控件来实现客户端联想式录入功能，可以提高数据录入的效率。在软件的实际应用中，当用户输入的记录平均在100条时，软件的运行速度是正常的，界面的录入速度和易操作性能够满足用户的业务需要。但由于本方法中，用户的录入信息是以XML文档的形式存放在客户端内存中，当用户一次性录入的数据达到300多条时，在内存中的XML文档就很臃肿了，客户端录入的速度开始变得非常慢，因此，对于录入信息的XML文档的格式应当越精简越好。

实现利用初始信息简化用户录入操作的方法中采用Microsoft.xmldom解析客户端XML文件，而文档对象模型（DOM）的构造却很费时。对于一个 DOM 实例，它们使用的RAM可以达到按原始字节计算的输入XML流的五倍。这通常会导致应用程序过度切换正在使用的内存，导致性能直线下降。这也是本方法可以继续改进的地方。