基于AJAX技术创建的异步方法应用研究

邹梦丽　刘小勇

摘 要： 遵循AJAX技术的基本原理，创建了一个简单的异步引用方法，并给出登录实例来说明如何实现该方法的引用，减少代码冗余。主要阐述了通过创建方法，并引用方法到不同Web应用程序中，实现了代码的优化。

关键词： AJAX； XML Http请求； 异步引用； 登录实例； 创建方法

中图分类号：TP311.1 文献标志码：A 文章编号：1006-8228（2014）03-33-03

0 引言

AJAX是Web应用的一种新方法。它使客户端能在后台访问服务器并取回用户所需数据，从而避免了整个页面的刷新。这为交互较多、频繁读数据的Web应用提供了一个很好的解决方案[1]，因此得到了广泛的应用。

1 AJAX的工作原理

AJAX是由Adaptive Path公司的Jesse James Garrett命名的，是Asynchronous JavaScript and XML的缩写，即异步 JavaScript和XML[2]。它并不是一门新的语言或技术，本质上只是将已有的多种技术，按一定的方式组合在一起，共同协作发挥出更加强大的作用，它主要用于动态网站开发[3]。

基于AJAX的Web应用不同于传统的Web应用，传统的Web应用通常是由用户发出一个HTTP请求到Web服务器，并将结果发送回客户端进行显示。这是一种单线程的处理方式。而基于AJAX的Web应用则在客户端和Web服务器之间添加了—个通过JavaScript编写的中间层，即AJAX引擎，从而使得用户操作与服务器响应异步化。在不刷新整个页面的前提下，用户向服务器端发送HTTP请求，服务器端对客户端发来的请求进行处理后，将响应发送给客户端。客户端再次利用 XMLHttpRequest对象接受服务端的响应，并利用DOM将结果显示给用户[4～6]。整个通信过程是在后台异步进行的，不会中断用户当前的操作。AJAX的Web应用模型如图1所示。

2 创建AJAX异步引用方法

AJAX技术的核心是JavaScript构造的XML Http Request对象，而XML Http Request本身提供了一系列属性和方法来向服务器发送异步的http请求。在服务器处理用户请求的过程中，XML Http Request监听服务器的状态，并根据这些状态指示JavaScript作相应的处理[7]。当服务器顺利完成响应用户行为的动作，并将响应数据返回时，XML Http Request对象能够回调响应的处理函数，完成AJAX的调用。

为保障业务流畅简洁，编写代码要层次清楚、简短，并在基于JavaScript构造的XML Http Request对象的工作原理上专门编写关于AJAX异步引用的方法[8]。此方法创建在名为tools工具箱的命名空间内。关键代码如下：

Var tools={

//创建区分浏览器（IE浏览器和非IE浏览器）的方法

isIE：function（） {

var str=window.navigator.userAgent； //判断浏览器类型及版本

if（str.indexOf（“IE”>=0）） {

return true；

}；

return false； //indexOf（）方法若找不到相同字符则返回-1

}，

//创建XMLHttpRequest对象，使用HTTP方法获取HTTP对象

getHttp：function（） {

if （tools.isIE（）） {

//IE系列获取HTTP对象

return new ActiveXObject（"Microsoft.XMLHTTP"）；

}；

//非IE系列获取HTTP对象

return new XMLHttpRequest（）；

}，

//HTTP的GET方法

getHttpReq：function（url，fun） {

var async=true； //异步交互的方式

var http=tools.getHttp（）；

//发送地址，使用时间戳解决缓存问题，保证每次发送的地址不同

If（url.indexOf（“？”）>=0） {

url+=”&t=”+（new Date（））.getTime（）；

}；

If（url.indexOf（“？”）<0） {

url+=”？t=”+（new Date（））.getTime（）；

}；

//设置发送方式，数据传输方式为GET，false=同步

http.open（“GET”，url，async）；

//定义服务器处理完成之后的回调函数

If（async） {

//对指定状态变化时的事件句柄定义相应方法

http.onreadystatechange=function（） {

if（http.readyState==”4”） { //当前状态4=完成

if（http.ststus==”200”） {

//服务器运行状态，其中200=服务器执行成功

fun（http.responseText）； //服务器运行状态的说明文字

return；

}；

fun（“Service error”+http.status）； //服务器执行不成功则报错

}；

}；

}；

//发送

http.send（null）； //对于GET方式传输小规模数据，无需传递参数，固设为null

}；

3 AJAX异步引用方法应用实例

下面给出一个简单的登录实例来简述AJAX异步方法引用的应用。单击登录按钮，无须页面提交，就会实现数据验证[9]。

前台页面JavaScript核心设计代码如下：

var _login={

//用户登录业务逻辑1-验证数据

valiLogin$1：function（） {

//获取帐号

var access=_login.$（"access"）； // access为页面获取账号框的id

access=access.value； //获取用户输入的帐号值

//判断数据

if（access.length<=0） {

_login.disWarn（"用户名不能为空"）；

//引用空间里创建的错误提示方法

return；

}；

//错误提示方法

disWarn：function（str） {

str.style.color="red"；

}，

……

//发送数据，将从前台获取到的账号和密码值传入后台校对

_login.userLoginSend（{

"userLoginAccess"：access，

"userLoginPwd"：pwd

}）；

}

……

//数据层 （传输HTTP）

//用户登录-委托

userLoginAction：{

action：false，

name：""，

fun：""

}，

//用户登录-发送到后台asp获取数据

userLoginSend：function（obj） {

var url="./ajax.asp"；

url+="？userLoginAccess="+obj.userLoginAccess；

url+="&userLoginPwd="+obj.userLoginPwd；

url+="&action=login"；

tools.getHttpReq（url，_login.userLoginOk）； //应用tools命名

空间里的异步通信get方式

}，

//用户登录-返回

userLoginOk：function（json） {

if（ _login.userLoginAction.action ） {

_login.userLoginAction.action=false；

window[_login.userLoginAction.name]

[_login.userLoginAction.fun]（json）；

return true；

}；

return false；

}，

……

}；

上述实例中的数据层引用了tools命名空间里的AJAX异步通信的get方式。当遇到不同Web应用程序的不同功能时，都可以调用该方法[10]。当项目工程庞大并且功能错综复杂时，通过调用tools工具里的AJAX异步引用方法可以实现减少代码的冗余，降低相同代码的重复率。

如图3所示，当用户欲进入登录系统行使相应的权限时，需输入验证信息。输入的验证信息与后台数据库中信息相同则登录成功。否则当用户输入的信息不符合网络安全规定时，提醒用户输入的信息有误，其页面如图2所示。

图2 用户输入数据验证不通过

4 结束语

AJAX之所以近年来大规模地投入应用，在于它打破了使用页面重载的惯例技术组合，可以在不中断交互流程的情况下，重新加载Web页面，对网页进行局部刷新，从而实现动态更新和流畅舒适的交互用户体验[14]。从本文所演示的登录实例可见，如果能将AJAX技术合理简单地创建成方法，再引用到不同Web应用程序中，不仅整体代码层次清楚简练，而且当有需要多次调用AJAX异步调用方法时，代码量可大大缩短。

图3 用户登录成功图

参考文献：

[1] 向春，沈建新.AJAX核心技术解析[J].信息技术名，2007.36（2）：

79-81

[2] Jesse James Garrett.Ajax： A new approach to web Applications.

http：//www.adaptivepath.com/publications/essays/archives/000385.php.2005.

[3] 张俊妍.AJAX技术在动态网站开发中的应用研究[J].现代计算机，

2011.2：62-63

[4] 王义勇，何月顺.AJAX的原理及其在Web开发中的应用[J].科技广

场，2006.7：66-68

[5] 田原.基于AJAX的教学Web应用[J].辽宁工程技术大学（自然科学

版），2007.5：737-739

[6] 陈琼.AJAX老技术，新外衣[J].互联网周刊，2005.8（27）：52-53

[7] 陆海晶，刘万军.基于Ajax的Web应用技术的研究与实现，2007.7

（3）：415-418

[8] 吴学义，黄永平，郭娜等.基于AJAX的B/S架构及应用[J].吉林大学

学报（信息科学版），2007.25（3）：314-318

[9] 柯自聪.Ajax开发精要[M].电子工业出版社，2006.

[10] 王义勇，何月顺.AJAX的原理及其在Web开发中的应用[J].科技广

场，2006.7：66-68