使用AJAX 异步提高Web应用交互能力(徐承禹)

[align=center] [/align]
[align=center]（太原铁路局信息技术处，太原 030013）[/align]
摘要：传统的Web应用不能像桌面应用一样提供丰富的客户端功能。而Ajax技术则是有效的解决途径。介绍Ajax的基本原理及技术，并通过一个铁路安全行车事故分析系统具体实践Ajax技术。
关键词：Ajax；XML;XMLHttpRequest对象;异步交互
[align=center] [/align]
[align=center]Improving interactivity of Web application based on Ajax[/align]
[align=center]XU Cheng-yu[/align]
[align=center](Information and Technology Office, Taiyuan Railways Bureau,Taiyuan 030013,China)[/align]
Abstract: Web applications couldn't offer abundant client function like desktop application.Ajax was such a technique which was a correct solution. It was introduced the principle of Ajax and a Web application based on Ajax. .
Key words: Ajax,XML;XMLHttpRequest object; Asynchronous interactivity
随着网络技术的飞速发展，在提供商业以及其他应用方面，IT行业对Web系统的依赖程度越来越高。如何提高B/S架构的应用系统在客户端贫乏的交互能力，这一直困扰者Web系统的设计、开发人员，他们研究出很多方法增强客户端界面的交互性，这些方法只能说表面的实现了桌面应用的一些交互方式，但没有真正的使得问题得到了解决。
作为Web2.0核心应用，Ajax的出现很好的解决了这个问题。他的特点就是异步交互，异步交互就是一个简单的多线程。在必要的时候应用可以不需要刷新整个页面来更新页面上的内容，对于用户而言完全是一个“无刷新”、“无阻塞”的过程，而在这个过程中，异步交互默默的在后台工作，而不是像传统的B/S应用那样必须是：用户请求刷新页面内容时必须提交HTTP请求，然后强制用户进入提交、等待、重新显示交互结果的过程。
1、传统的交互解决方法及其优、缺点
在研发Web应用的过程中，设计和开发人员设计了很多方法增强Web应用的交互性：
1.1 弹出窗口。使用在事件处理函数中调用showModalDialog(URL)方法，将请求页面链接通过showModalDialog打开窗口，请求经过服务器处理后，窗口打开后又立即关闭，然后由事件处理函数中的脚本处理窗口返回的数据。缺点：只能处理类似鼠标点击事件，如果是键盘事件，即使是最快的网络速度，也会使客户端有延迟。并且有屏幕闪烁的现象。
1.2 使用JS脚本。将所有的基础数据生成到js文件中，在页面加载时下载到本地，或者在加载页面时动态生成JAVASCRIPT数组定义。在处理事件时，对js文件的数组进行分析，然后显示结果。优点是:相应速度快，可以应用在各种事件中，但是开发难度大、脚本复杂、功能单一、维护复杂，而且页面源程序太大，使得加载速度比较慢。
1.3 页面中脚本的按需加载。在页面源程序中预先加入一段没有内容的JAVASCRIPT的代码段，并设置好id，在事件处理时使用代码段的src属性动态加载javascript代码。并且执行这些代码。<SCRIPT language=JavaScript id=script_do type=text/JavaScript></SCRIPT><SCRIPT LANGUAGE=JavaScript >function fun_do(){script_do.src=URL;}</SCRIPT>。优点是响应速度快，可以实现复杂的业务逻辑，但是在处理键盘事件比如onKeyPress事件时，就可以感觉到有一定的延迟。
其他还可以使用隐藏的Iframe，综合上述三种方法，可以看出虽然实现了桌面应用的一些功能，但是由于根本上使用了浏览器/服务器固有的这种请求/响应的断开式网络通讯模式，所以会使用户不得不等待服务器的返回的信息。
2、Ajax技术
2.1 Ajax组成
Ajax 是Asynchronous JavaScript and XML 的缩写。即“异步的JavaScript 和 XML处理” 或“非同步JavaScript 和 XML技术”，它并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起，在同共的协作中发挥各自的作用，它涵盖。
（1）XMLHttpRequest: XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从客户端传递到服务端，然后以后台活动的方式获取数据，但并不会中断用户当前的操作。使用XMLHttpRequest传送的数据可以是任何格式，虽然从名字上建议是XML格式的数据。
（2）CSS：层叠样式表，CSS提供了从内容中分离应用样式和设计的机制，在Ajax应用中，用户的界面样式可以通过CSS独立修改。
（3）DHTML或Dynamic HTML，用于动态更新表单。一般使用div、span和其他动态HTML元素来标记HTML。
（4）DOM：文档对象模型，用于（通过JavaScript代码）处理HTML结构和（某些情况下）服务器返回的XML。使用DOM实现Ajax应用的动态显示和交互。
（5）JavaScript：JavaScript是一种粘合剂使AJAX应用的各部分集成在一起。JavaScript代码是运行Ajax应用程序的核心代码。



2.2 工作原理

Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web页面和服务器之间。当逻辑触发时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器，JavaScript 代码捕获数据后向服务器发送请求，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后，服务器将响应数据返回 JavaScript 代码，后者决定如何处理这些数据。它可以操作DOM处理数据，并且将页面更新，它也可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预。它可以根据需要自行与服务器进行交互。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验。
2.3 普遍适用性
AJAX 之所以成为可能，是因为现在许多主要的浏览器都提供可进行独立 XML HTTP 请求的对象。Internet Explorer 5 以及更高版本提供了一个 XMLHTTP 对象，而基于 Mozilla 的浏览器则提供了一个 XMLHttpRequest 对象。这些对象都能够从服务器请求 XML 数据，并以类似的方式处理这些数据。所有能够动态提供 XML 的技术都可以使用服务器端 AJAX 组件。任何动态 Web 技术（从 ASP、PHP 到 JSP、Servlet）都可以充当 AJAX 服务器。因为所有流行的浏览器都支持 Javascript 和必要的 XMLHTTP 请求对象，且几乎所有 Web 服务器技术均可生成 XML（或任何标记），所以核心 AJAX 技术普遍适用。

3、《铁路安全行车事故综合分析系统》中Ajax实现
3.1 应用背景
《铁路安全行车事故综合分析系统》是铁路运输事故统计分析的重要系统，其基础信息必须具有绝对的正确性、严肃性。设计开发时，系统采用B/S架构。行车事故概况表（安监报一）是本系统的基本数据来源，数据项有六十多项，其中“事故地点”有8000多个可选项，“事故类别”有60多可选项，“线路别”有530多选项，“责任单位”也多达1000多选项。为了数据录入时的标准化，在桌面应用系统中用户可以只录入拼音码，应用程序根据拼音码检索符合条件的选项并很快的更新到下拉选择框里，但是在传统的Web应用中很难实现如此平滑的操作。笔者作为该系统的设计和开发人员，采用了Ajax技术进行实现。下面以铁路线路的录入为例具体实现。
3.2 具体实现
(1) 创建XMLHttpRequest 请求对象：要求浏览器使用XMLHttpRequest或ActiveXObject。这两个对象的主要区别在于使用他们的浏览器以及创建对象的方式。
<script> function createRequestObject() { var ro; var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{ro = new XMLHttpRequest();}return ro;}

var txtObj;//当前获得输入的文本框(51aspx.com)
var http = createRequestObject();</script>
(2)发送请求：创建了请求对象，即向服务器发出请求作了准备。当用户在“线路名称”输入域里输入线路的拼音码时即可触发sndReq(txt,pym)函数，具体实现如下：<input type="text" name="line_name" onKeyUp="sndReq(this，this.value);">
调用的函数有2个参数：该文本框对象和它的值。函数具体实现如下：
<script> function sndReq(txt,pym) {txtObj=txt;// 当前获得输入的文本框
if(pym=="") {return false;}
http.open('get', 'quick_ajax_retrun.jsp?pym='+pym, 'true');//51aspx.com
http.onreadystatechange = handleResponse; http.send(null);} </script>
函数中首先设置请求对象http的url：http.open ("GET",url, true); “true”表示是异步方式，接着设置请求返回值的接收方法：http.onreadystatechange = handleResponse;（handleResponse是该请求返回值的接收方法）最后是发送请求：req.send(null)。
（3）应用程序处理请求：
处理请求的应用程序是quick_ajax_retrun.jsp ，它的功能是，用查询参数pym的值，作为拼音码的匹配条件从数据库检索符合条件的记录。实现也比较简单：
a、 使用JDBC 链接ORACLE数据库
b、 组织查询语句查询数据库
c、 将查询的前50条记录中线路名字段数据以“，”隔开，组成一个字符串传回客户端。
（4）客户端接收处理服务器返回的请求：客户端接收到服务器端返回字符串型数据后立刻调用请求的处理函数。这里应用HMLHttpRequest对象的responseText属性，其作用是将响应信息作为字符串接收。
<script> Function handleResponse() { if(http.readyState == 4){var response ="";
if (http.status==200){ try{ response= http.responseText; //获得返回的字符串
}catch(exception) { response="浏览器无法支持快速输入"; }
var lines= new Array(); lines=response.split(','); //转为数组
toosing_show(txtObj,quicksel,quicklays,lines);//刷新下拉选择框中列表
}}}</script>
toosing_show功能是以文本框、下拉框、包含下拉框的层、lines数组为参数的函数，功能是将lines数组加载到下拉框中，将下拉框定位到文本框的下面，并显示出来。整个过程让人的感觉是Web程序是立即完成的，页面没有提交而用户得到了新的数据。
四、结束语
Web应用软件的开发除了考虑系统提供的之外，还要考虑应用的交互能力，使得用户操作时方便快捷。Ajax技术为B/S架构的应用程序提供了一种实现良好可交互性的选择，他的异步交互特点使得数据交换在页面之间完成，每次提交请求不需要刷新整个页面。本文通过一个具体项目实践说明了Ajax在增强Web应用交互能力方面的强大功能。作为一种技术，Ajax应用没有固定的模式，其具体实现方法要根据具体应用进行设计，以便向用户提供更方便、快捷、及时的服务，本文希望能起到抛砖引玉的作用。