1、Ajax 在网络教学系统中的应用陈志华 1 麻书钦广东技术师范学院 计算机与网络中心摘要：Ajax(异步Javascript与可扩展标记语言)是Web应用开发的一种新理念。它将现有的多种技术进行结合，可以构建更为动态和响应更灵敏的Web应用程序，使Web应用程序消除与桌面应用程序在人机交互和用户体验方面的差距。文章介绍了Ajax的原理及主要技术，并着重探讨Ajax技术在当前网络教学系统中的应用。The application of AJAX in the Network teaching systemchenzhihua mashuqin(Guandong Polytechnic Normal
2、 University Computer and Network Center,Guanzhou 510665,China)Summary: Ajax (asynchronous Javascript and XML) is a new concept of development and application of web. It can establish a more dynamic and flexible Web application by combining kinds of existing technique, which can eliminate the gap in
3、the exchanging of man and machine and in the aspect of users experience. This article introduces the elements of Ajax and the major technique and weightily discusses the application of network teaching system.关键字：Ajax; XMLHttpRequest; XML; Web开发; 网络教学系统Key words: AJAX ; XMLHttpRequest ; XML ; Web de
4、veloping; Network teaching system1、引言随着我国教育信息化的不断发展，目前很多课程都建起了相应的网络教学平台，这些网络教学平台绝大部分采用当前最为流行的 B/S（Browser/Server ）模式结构，即浏览器和服务器结构。在这种结构下，用户工作界面通过 Web 浏览器来实现，很少一部分的事务逻辑在前端（Browser ）实现，主要的事务逻辑在服务器端(Server)实现。B/S 请求响应机制所使用的 HTTP 协议决定其特有的工作机制以及 Web 开发模式，也决定了其自身的一些缺陷。一直以来，Web 应用程序的交互效果都不如桌面应用程序，比如客户端功能和用
5、户体验效果。网络教学系统由于其需要具备动态性、互动性和多样性的特点，对数据传输速度和用户体验提出了更高的要求。Ajax 的出现，使以 Web 应用程序搭建的网络教学系统继承了桌面应用程序反应灵敏、胖客户端、用户体验优秀等优点。2、Ajax 简介Ajax 不是一项新的技术，只是多种技术的综合，或者是设计方式，它包括Javascript、XHTML 和 CSS、 DOM、XML 和 XSTL、XMLHttpRequest 等技术。其中： 使用 XHTML 和 CSS 实现标准化的呈现界面。 使用 DOM 实现动态的显示和交互。 使用 XMLHttpRequest 实现与服务器的异步通信。 使用 J
6、avascript 将 XHTML、DOM、XML 、XMLHttpRequest 绑定。各种技术在 Ajax 引擎中的作用如图 1 所示，整个交互通信过程是异步进行的。1作者简介：陈志华(1979)，男，广东人，广东技术师范学院，助教21 Ajax 的工作方式Ajax 一般采取如下的工作方式： 页面初始化：页面初始化加载，准备处理用户输入或者刷新页面内容。 触发浏览器事件：浏览器触发一个事件，比如鼠标单击或者按下键盘。 向服务器发起请求：浏览器向服务器发出一个请求。 服务器处理请求：服务器收到浏览器发出的请求，调用业务逻辑接口处理请求。 服务器响应请求：服务器响应浏览器发出的请求，将处理结果
7、返回。这个返回结果传递给在发出请求时指定的请求调用函数。 浏览器更新页面：请求调用函数根据响应结果更新 DOM 内容，比如 DOM 变量或者任何的 Javascript 变量，更新页面内容。“触发浏览器事件向服务器发起请求服务器处理请求服务器响应请求浏览器更新页面”这个过程是可以多次偱环的，如图 2 所示。其中 AJAX 最主要的特征就是 XMLHTTPRequest 对象的使用和 DOM 的处理。使用XMLHTTPRequest 可以用来与后台服务器之间进行交互，它同时支持同步和异步的处理。而采用同步处理方式，当处理时间比较长可能会造成浏览器在一段时间内无响应，从而给用户不友好的感受，也失去
8、了无刷新的优点。因此使用 AJAX 应该采用异步方式。通过AJAX 引擎，使得应用过程很自然，操作很流畅，因为其只和服务器交换有用的数据，而页面元素、版式等不必要的数据则不再重新从服务器端加载，提高了网络传输效率。而XML 文档对象模型(XML DOM)的统一规范，使我们用 JavaScript 标准的 DOM 对象就可以解析服务器端传来的数据，减轻了编码和调试的工作量，并能够保证应用跨平台运行。Javascript 调用XMLHttpRequest 对象发起异步请求用户界面 Ajax 引擎 服务器Javascript 调用 DOM 更新HTML、XHTML 内容使用 HTML、XHTML和
9、CSS 所得到的呈现Javascript 调用XMLHttpRequest 对象图 1 各种技术在 Ajax 引擎中的作用用户访问 页面初始化浏览器更新页面服务器响应请求服务器处理请求向服务发起请求触发浏览器事件偱环图 2 Ajax 的生命周期22 Ajax 与 Web 开发模式对于采用单层或者二层模式的系统，Ajax 引擎集成于 Web 系统，跟 HTML、ASP 等文件绑定在一起，嵌入到单独的页面编码中，可以帮助 Web 系统异步获取服务器的信息，在不刷新浏览器的情况下更新界面内容。Ajax 引擎与 Web 系统的关系如图 3 所示。在采用三层模式及至 MVC 层次的 Web 系统中，Aj
10、ax 引擎处于客户表示层（视图）当中，在异步方式下直接或间接地访问业务逻辑层或者控制器的相应接口，获取系统数据，在不刷新浏览器界面的情况下更新用户界面内容，以此方式来提高数据传输速度，改善系统用户体验。在三层模式 Web 系统中，Ajax 引擎所处的位置如图 4 所示。对于应用如 Struts、WebWork2、Spring 等框架的 Web 系统，Ajax 引擎可以跟视图无缝集成，Ajax 将请求异步发送相应的控制器，在控制器返回处理结果以后再更新视图内容。3Ajax 技术在网络教学系统中的应用下面举例说明 Ajax 技术在网络教学系统中的应用数据校验操作是 Web 应用程序中经常碰到的一种
11、情况， Web 应用程序必须保证用户输入数据的准确性和可靠性，保证系统的安全。数据校验在网络教学系统中经常会用到，例如学生在线注册功能模块：学生在线填写个人资料并设置个人登录帐号及密码，注册后经过任课教师或管理员的授权即可进入教学系统学习。我们设定的学生注册页面内容如下图所示：Ajax 引擎Web 系统HTML、JSP 、ASP 页面图 3 单层和二层模式下 Ajax 在 Web 系统中的位置发送数据操作请求浏览器 用户显示层 业务逻辑层 数据源数据层Ajax引擎发送客户端请求调用相应的逻辑接口 调用相应的数据接口更新用户界面内容返回加工后的数据返回初步加工后的数据返回数据数据逻辑加工Web
12、系统图 4 Ajax 在三层模式 Web 系统中的位置因为安全性和其他因素考虑，必保证学生设定的登录名的惟一性。这种情况下需要一个惟一性的检查的功能。在以往的 Web 应用程序中，通常对这种数据惟一性的检验方法是把整个表单的数据提交给服务器，由后台服务程序来核对登录名是否惟一，如果登录名不惟一即回滚整个页面，提示用户重新设定登录名。这种方式比较耗费服务器资源。现在，可以使用 Ajax，使用数据采用异步的方式检验，检验结果由 Ajax 引擎显示在页面相关区域，整个过程不需要弹出窗口，更不需要重新加载整个页面，快速又不加重浏览器和服务器的负担。学生在填写注册表单时，设定了登录名后，单击其后的“惟一
13、性检查”按钮，将输入的登录名提交到服务器校验；服务器将些登录名与数据库的相关数据进行匹配，如果该登录名已经存在，则提示更换登录名称注册；如果该登录名尚未被注册，则提示用户可以继续。实现的关键代码如下：1） 编写 registerCheck.jsp 文件，用以在服务器端检验数据的惟一性，主要代码如下：2） 先编写一个开发框架,以供调用，以 Javavscript 编写代码如下：var http_request=false;function send_request(url)/初始化，指定处理函数，发送请求的函数http_request=false;/开始初始化 XMLHttpRequest 对象
14、if(window.XMLHttpRequest)/Mozilla 浏览器http_request=new XMLHttpRequest();图 5 学生注册页面内容if(http_request.overrideMimeType)/设置 MIME 类别http_request.overrideMimeType(“text/xml“);else if(window.ActiveXObject)/IE 浏览器tryhttp_request=new ActiveXObject(“Msxml2.XMLHttp“);catch(e)tryhttp_request=new ActiveXobject(“
15、Microsoft.XMLHttp“);catch(e)if(!http_request)/异常，创建对象实例失败window.alert(“创建 XMLHttp 对象失败！“);return false;http_request.onreadystatechange=processrequest;/确定发送请求方式，URL，及是否同步执行下段代码http_request.open(“GET“,url,true);http_request.send(null);/处理返回信息的函数function processrequest()if(http_request.readyState=4)/判断
16、对象状态if(http_request.status=200)/信息已成功返回，开始处理信息document.getElementById(reobj).innerHTML=http_request.responseText;else/页面不正常alert(“您所请求的页面不正常！“);4） 在填写注册表单页面 register.html 中，先定义 Javascript 函数 doCheck()function doCheck(type)var f=document.forms2;if(“user”=type)if(f.username.value!=”)document.getElemen
17、tById(“feedback_info”).innerHTML=”系统正在处理您的请求，请稍后。 ”；send_request(“GET”,”registerCheck.jsp?field=usernameelseDocument.getElementById(“feedback_info”).innerHTML=”请输入登录名称！”;5） 在“惟一性检查”按钮中添加 onClick 事件，调用 doCheck（）函数在上面的 doCheck 函数中，如果用户尚未输入登录名，表单中名为 feedback_info的 label 会显示提示信息。如果用户已经输入登录名，则 send_reque
18、st 函数将被调用，向服务器发送 http 请求，对登录名称进行校验。showFeedbackInfo 函数作为 send_request 的回调函数，在服务器返回响应信息之后，将相应的响应信息替换名为 feedback_info 的 label 的 HTML 文本，引导用户的下一步操作。使用 Ajax 后的注册表单，无需更改 registerCheck.jsp，整个数据检验过程没有重新加载整个注册页面，其执行效果如图 6 所示在上面的学生在线注册页面中，用 Ajax 实现“所在院系” 、 “所在专业” 、 “所在班级”这三个联动下拉列表。当“所在院系”下拉列表被选中时，触发其 onchang
19、e 事件，执行事件处理函数调用之前定义的 send_rquest 函数，向服务器发送异步 http 请求，从数据库获取所选院系下的所有专业。当服务器返回响应结果的时候，XMLHttpRequest 对象将获取的数据填充到“所在专业”的下拉列表中。两样地，当“所在专业”下拉列表中的专业被选中时，触发其 onchange 事件，调用相应的函数向服务器发送异步 http 请求，返回相应的数据填充到“所在班级”下拉列表中。这种使用 Ajax 的方式使所构建的级联下拉列表具备数据实时更新、传输快速、方便管理等优点。此外，利用 Ajax 技术，我们还可以在网络教学系统中实现更为灵活、方便的级联菜单；模拟
20、QQ、MSN 等即时聊天工具，构建更具人性化、更具有吸引力的师生交流平台；还可以搭建更为方便、稳定的在线考试系统。4总结Ajax 带给我们的不仅仅是技术，更多的是以人为本的一种服务理念。不仅缓和了资源矛盾，也带来了丰富的用户体验。Ajax 技术的应用，使得网络教学系统减少了对网络资源和服务器资源的消耗；也使其更具人性化和吸引力，带来更好的教学效果。图 6 使用 Ajax 的注册表单参考文献：1Dave Crane.Eric Pascarello. Ajax in ActionJ，人民邮电出版社，2006.52何自聪，Ajax 开发精要J，电子工业出版社，2006.53梁民，基于 AJAX 技术开发 web 应用J，电脑知识与技术，2006.5
