Aja技术原理应用
前言：本站为你精心整理了Aja技术原理应用范文，希望能为你的创作提供参考价值，我们的客服老师可以帮助你提供个性化的参考范文，欢迎咨询。
摘要ajax技术是目前深受Web用户欢迎的一项技术，它利用JavaScript、DOM、XML和XMLHttpRequest实现客户端与服务器的异步交互，达到很好的用户体验。文中介绍的选课系统运用Ajax技术，提高了系统的运行效率。
关键词Ajax技术；Web服务器；XMLHttpRequest；选课系统
1引言
在传统的Web应用中，大部分用户动作会触发一个连接到Web服务器的HTTP请求，服务器收到请求后要完成诸如验证合法性、计算数据、访问数据库等处理工作，最后返回一个HTTP页面到客户端，这个过程中用户一直处于等待状态。随着Web技术的广泛应用，人们对Web应用程序提出了更高的要求，Web不再简单应用于网站，而是成为许多业务处理平台，于是人们更加注重流畅、快捷、人性化的用户体验，为了满足这一需求，一种新的技术出现了，它就是Ajax，它使Web应用程序继承了桌面应用程序反应灵敏、胖客户端、客户体验优秀等优点。
2Ajax的工作原理
2.1Ajax工作方式
Ajax(AsynchronousJavaScriptandXML)技术实际上是在客户端和服务器之间加入一个Ajax引擎，它允许采用异步的方式实现客户端与服务器的交互，所以用户不用打开空白窗口等待服务器的响应，而可以继续进行客户端的其它工作。服务器响应完毕之后，将结果提交给Ajax引擎，Ajax引擎使用HTML和CSS技术展示给用户。客户端和服务器的这种异步通信，使用户感觉不到客户端与服务器的通信，使得Web程序看起来是即时响应的。图1显示了Ajax的工作方式。
图1Ajax的工作方式
在传统的Web应用中，客户端只是通过浏览器简单的显示内容，所有的信息都保存在服务器上，引入Ajax后，它把一部分Web应用程序移到了浏览器中，使浏览器中不再是纯粹的内容。用户登录时，浏览器会从服务器下载大量代码，这些代码具有一定的处理用户请求的能力，由它们来决定是否将用户的请求提交给服务器。由于用户的一部分请求可以直接在客户端进行处理，客户端与服务器的通信效率会提高许多。
2.2Ajax关键技术
Ajax技术并不是一种孤立的技术，它是由多种技术综合而成的，这些技术包括：JavaScript、DOM、XML和XMLHttpRequest，这些技术按照一定的方式发挥各自的作用构成Ajax技术。DOM实现动态显示和交互，XML进行数据交换与处理，XMLHttpRequest进行异步数据读取，JavaScript用于邦定和处理所有数据。
1）JavaScript
JavaScript是一种基于对象和事件驱动的脚本语言，具有很好的安全性，它通过嵌入在标准的HTML语言中完成各种与用户交互的任务。Ajax利用JavaScript的特性实现对用户行为的实时响应与处理，JavaScript还能通过其属性和方法操作DOM，将用户请求通过XMLHttpRequest对象实现与服务器的异步交互通信。
2）DOM
DOM(DocumentObjectModel)是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台，它提供了标准的HTML和XML对象集，并由一个标准的接口来访问并操作它们。DOM是一个树型结构，由元素和节点组成，它是以面向对象的方式描述的对象模型。DOM对象分为HTMLDOM对象和XMLDOM对象。
3）XML
XML(eXtensibleMarkupLanguage)是可扩展标记语言的缩写，它通常作为数据传输的媒介，服务器采用返回XML文本的方式将响应后的数据返回给客户端。在应用Ajax技术时，XMLHttpRequest对象可以使用XML作为与服务器端通信的数据格式。
4）XMLHttpRequest
XMLHttpRequest是Ajax技术体系中最为核心的技术，它负责将用户信息以异步方式发送到服务器，并接收服务器返回的响应信息和数据。Web应用程序无需刷新页面就可以向服务器提交信息，或从服务器得到应答，这样用户就不会觉察后台向服务器提交和接收数据，而且，客户端也不必每次都将数据处理工作交给服务器来做，这样加快了响应速度，也就缩短了用户的等待时间。
3Ajax在选课系统中的应用
3.1系统功能分析
系统按功能划分为三个模块：学生选课模块、教师开课模块、管理员管理模块。如图2所示。各模块功能相对独立，学生选课模块包括修改个人信息和选课。教师开课模块包括修改个人信息、浏览基本课程列表、查看学生选课信息、申请开课。管理员管理模块包括为教师和学生分配帐号密码、注销或修改用户状态、创建课程和指定任课教师、为课程班级设定人数、对学生选课信息进行统计、通知学生和老师选课结果和选课时间等。三个模块都需要经过注册、登录后才能实现。.2Ajax在系统中的应用
本系统中用户注册、修改个人信息、选课、申请教课等功能的实现需要客户端向服务器发出HTTP请求，服务器收到请求后进行验证、访问数据库等处理，处理完毕后刷新页面。其间用户一直处于等待状态，如果出现断电、网络故障或信息填写不当等意外事件，用户需要重新填写大量信息，这样既降低了系统的运行效率，也给用户带来诸多不便。
引入Ajax技术后，用户填写完信息由XMLHttpRequest提交给服务器进行处理，用户可以继续其它操作，如果验证不合格客户端可立即得到通知，而不必重新下载整个网页，如果出现意外情况也可从服务器获得已填写的信息。以下以注册部分关键代码为例说明Ajax应用。
1)创建XMLHttpRequest对象
functioncreateXMLHttpRequest()
{
if(window.ActiveXObject){
if(navigator.userAgent.toLowerCase().indexOf(''''msie5'''')!=-1){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP")；}
else{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP")；}
}
elseif(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest()；}
else{
alert("创建XMLHttpRequest失败！")；}
}
2)XMLHttpRequest发送请求
functioncheckUser(userId){//checkuserName
varuserObj=document.getElementById(userId)；
varurl="checkUser.asp?userName="+escape(userObj.value)；//请求的URL
xmlHttp.open("GET"，url，true)；//true：异步方式
xmlHttp.onreadystatechange=checkUserOk；//指定状态变化时触发的事件句柄
xmlHttp.send(null)；///发送信息
}
3)XMLHttpRequest处理服务器响应
functioncheckUserOk(){//checkuserNameready
if(xmlHttp.readyState==4){//完成
varresponse=xmlHttp.responseText；
varalertObj=document.GetElementById("reg_alert")；
if(response=="该帐号已注册"){
alertObj.innerHTML="对不起，<br/>此用户已经注册！"；
}elseif(response=="帐号为空"){
alertObj.innerHTML="对不起，<br/>用户名不能为空！"；
}elseif(response=="帐号未注册"){
alertObj.innerHTML="<spanclass=''''blue_txt''''>此用户名可用！</span>"；
}elseif(response=="帐号不存在"){
alertObj.innerHTML="对不起，<br/>用户名不可用！"；}
}
}
4结束语
Ajax技术并不是一项复杂的技术，但是它很好地利用了几项技术的融合，达到了令人满意的效果，成为深受Web用户喜爱的一项技术。本选课系统主要在用户注册、修改个人信息、填写选课信息、申请教课页面运用Ajax技术，该技术避免了用户多次填写大量信息的烦恼，缩短了用户的等待时间，充分体现了Ajax技术的优点。
参考文献
[1]曹衍龙，叶达峰.Ajax编程技术与实例[M].北京：人民邮电出版社，2007.5
[2]RyanAsleson，NathanielTSchutta.Ajax基础教程[M].北京：人民邮电出版社，2006
[3]尹永田，葛苏慧，任佳.基于的网上选课系统的设计与实现[J].中国现代教育装备，2006，12
[4]柯昌正，黄厚宽.Ajax技术的原理与应用[J].铁路计算机应用，2007，1
[5]DavidFlanagan.JavaScript权威指南[M].北京：机械工业出版社，2003
[6]DynamicHtmlandXML：TheXMLHttpRequestObject[EB/OL].http：///internet/webcontent/xmlhttpreq.html
[7]BrettMcLaughlin.AJAX简介[EB/OL].http：///lithe/archive/2006/02/22/605234.aspx
