论文部分内容阅读
摘 要： 遵循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
关键词： 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