改善传统WEB应用程序通信模式的两种方法研究

高焕江　高鹏

摘要：为了解决传统的WEB应用程序在客户端和服务器通信模式方面存在的缺陷，提高WEB应用程序的交互性能，可以采用模态窗口或者Ajax技术启动新线程来处理客户端的不定时请求，在对这两种技术作详细介绍的基础上，总结了他们各自的优劣之处。

关键词：WEB程序;模态窗口;Ajax;模式研究

中图分类号： TP399        文献标识码：A

文章编号：1009-3044（2019）25-0018-02

Abstract：To solve the problems which exist in the client and server communication mode of WEB applications， and enhance its interactive performance， this paper proposed two technology methods， the first is Modal Dialog Window， and the second is Ajax， both methods can be used to process the indefinite request of web clients. Based on the detailed introduction of the two methods， this paper summarizes the advantage and disadvantage of each method.

Key words： WEB application; modal dialog window;  Ajax; method research

WEB应用程序是基于现代网络通信技术的最流行的信息化应用之一。传统WEB应用程序在客户端和服务器的通信模式方面存在一些缺陷，即客户端每一次很小的数据请求都强制进行提交、等待、重新显示的模式，所有步骤都隶属于同一主进程。这种工作模式使得用户在提交请求前录入的有效数据容易丢失，系统闪烁现象严重，在响应灵敏性和交互性方面大打折扣。解决此类问题必须通过启动新进程来处理客户端的不定时数据请求。现有两种方案：一种是通过调用模态窗口启动同步进程;另一种是通过Ajax技术实现异步通信。

1 showModalDailog模态窗口方式

IE4.0以上的浏览器提供了一种简便的方法来启动新的客户端进程，这就是使用showModalDialog（）方法来弹出模态窗口。若客户端需要在主进程执行的过程中获取一些外部资源（如存储于数据库中的字段）而不想提交本页面也不想改变服务器端主进程的执行，便可以把这些工作交给模态窗口来处理。模态窗口可以获得主窗口的句柄，也可以把处理后的结果以字符串方式返回给主页面，其工作流程如下图所示：

从工作流程图中可以看出，客户端进程会在调用模态窗口处中止执行，在这期间脚本在模态窗口中自由运行而用户在主页面中不能进行任何操作。等到模态窗口关闭返回数据后客户端主进程恢复。

使用脚本语言JavaScript调用模态窗口的语法如下：

var returnValue = showModalDialog（URL[， arguments] [， features]）

参数说明：

URL：提交给模态窗口的新进程的处理程序;

features：模态窗口的显示参数。

returnValue：模态窗口返回给客户端的数据（一般为数字型或字符型）;

可以看出模态窗口具有一些非常特殊的优势。最明显的是体现在参数传递上。如果传递普通的字符串可以直接附加在URL上进行传递，而特殊类型的数據传递可以设置arguments参数。如客户端可以通过以下方式传递主窗口：showModalDialog（“implement.asp”， window， “…”），而在模态窗口处理页面implement.asp中可以用var window1 = window.dialogArgument进行参数的接收，从而可以获得对主窗口的完全控制权，也就是说可以调用主窗口的所有控件，函数以及事件。如果模态窗口向客户端返回数据并自动关闭，可以使用以下代码

window.returnValue = result

window.close（）

由于模态窗口本质上是一种可自动关闭的对话框，因而在调用过程中会出现闪烁问题，我们可以通过设置显示参数基本解决该问题，如把第三个features参数设为“ dialogHeight：0px;dialogWidth：0px;dialogLeft： 0px;dialogTop：0px;”。

2 Ajax方式

Ajax是Asynchronous JavaScript and XML的缩写，它作为WEB2.0的标志，其优良的设计模式，良好的用户体验以及众多浏览器厂商的支持越来越受到程序员的关注。与模态窗口方式相比，Ajax技术在提高web程序交互性方面的最大优势是采用异步进程的方式，请求外部资源时不需中断客户端进程，从而大大减少用户的等待时间，提高了系统的效率。

Ajax的核心是XMLHttpRequest对象，它是一种可以被大多数浏览器创建的特殊对象，通过它可以方便的以后台异步方式与服务器进行数据交换而不用提交页面。其具体实现步骤如下所述：

（1） 创建客户端界面，通过某个事件触发JavaScript调用Ajax引擎

（2） 初始化请求对象XMLHTTPRequest。通常可以使用以下统一代码：

function getXmlHttpRequest（）{

try{return new XMLHttpRequest（）;}

catch （e）{try{return new ActiveXObject（'Msxm12.XMLHTTP'）;}

}

（3） 發出数据请求。客户端数据首先发送给XmlHttpRequest对象，该对象捕获数据并异步向服务器发送请求。此时客户端不会发生闪烁，延迟和消失，因而可以继续使用程序。该步骤可用以下代码实现：

function senddata（）{

var url=" implement.asp？param=" + value;

xmlHttp= getXmlHttpRequest（）;

xmlHttp.open（"GET"， url ， true）;

xmlHttp.send（null）;

xmlHttp.onreadystatechanged = statechanged;

}

其中，XmlHttpRequest对象open方法的第三个参数可以设置数据请求是异步还是同步。但在使用Ajax时传递的数据类型只能为数字或者字符类而不能是对象类，处理程序不能获得对客户端的完全控制。

（4） 应用程序处理请求并向客户端返回结果。在此处响应程序用Request对象接收数据，进行业务逻辑处理。由于无法直接得到客户端的句柄，必须对返回数据进行良好的组织。返回的结果可以有多种形式，包括：Html、JSON、文本数据和XML文档等。

（5） 客户端接收结果。当客户端收到服务器返回结果实会触发XmlHttpRequest对象的onreadystatechanged事件，因而只要在该事件中设计回调函数对该对象的状态进行捕捉即可。对于XML文档方式返回的结果用XmlHttpRequest对象的responseXML属性接收，其他结果用responseText属性接收。

（6） 完成对结果的处理。综合使用HTML+javaScript+CSS更新客户端需要更新的内容。

Ajax的工作流程可以用以下流程图表示：

从以上论述中我们可以知道模态窗口和Ajax技术都能提高web应用程序交互性，但两者在许多方面存在着差异，现总结如下：

4 结语

模态窗口和Ajax技术是在web应用程序中启动新进程的两种技术，而它们又各有优劣。由于模态窗口进程的同步性，它主要用于B/S型事务处理系统等业务逻辑具有明显顺序特征的系统，而后者则主要应用于网站等用户体验要求比较高的场合。

参考文献：

[1] 唐克，王猛. Web应用软件系统的性能分析与优化[J]. 电脑开发与应用， 2014 （7）：42-44.

[2] 吴吉义，平玲娣. Web2.0主流应用技术——Ajax性能分析[J]. 计算机工程与设计，2008，4（29）： 1913-1915.

[3] 张子平，谢小林. 基于Ajax技术实现搜索引擎中的搜索提示功能[J]. 东华理工大学学报，2008，3（31）： 81-83.

[4] 李刚，宋伟.征服Ajax + lucene构建搜索引擎[M]. 北京邮电出版社，2006： 146-168.

[5] 徐红勤. Ajax在网络考试系统中的应用[J]. 计算机应用，2007（6）：349-351.

[6] 谭明红，王成亮. 基于页面差异模式的Ajax框架设计及实现[J].微电子学与计算机，2008（25）：106-108.

【通联编辑：唐一东】