Ajax在网络教学系统中的应用.doc

Ajax在网络教学系统中的应用陈志华作者简介：陈志华(1979)，男，广东人，广东技术师范学院，助教 麻书钦广东技术师范学院 计算机与网络中心摘要：Ajax(异步Javascript与可扩展标记语言)是Web应用开发的一种新理念。它将现有的多种技术进行结合，可以构建更为动态和响应更灵敏的Web应用程序，使Web应用程序消除与桌面应用程序在人机交互和用户体验方面的差距。文章介绍了Ajax的原理及主要技术，并着重探讨Ajax技术在当前网络教学系统中的应用。The application of AJAX in the Network teaching systemchenzhihua mashuqin(Guandong Polytechnic Normal 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 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 developing; Network teaching system1、引言随着我国教育信息化的不断发展，目前很多课程都建起了相应的网络教学平台，这些网络教学平台绝大部分采用当前最为流行的B/S（Browser/Server）模式结构，即浏览器和服务器结构。在这种结构下，用户工作界面通过Web浏览器来实现，很少一部分的事务逻辑在前端（Browser）实现，主要的事务逻辑在服务器端(Server)实现。B/S请求响应机制所使用的HTTP协议决定其特有的工作机制以及Web开发模式，也决定了其自身的一些缺陷。一直以来，Web应用程序的交互效果都不如桌面应用程序，比如客户端功能和用户体验效果。网络教学系统由于其需要具备动态性、互动性和多样性的特点，对数据传输速度和用户体验提出了更高的要求。Ajax的出现，使以Web应用程序搭建的网络教学系统继承了桌面应用程序反应灵敏、胖客户端、用户体验优秀等优点。2、Ajax简介Ajax不是一项新的技术，只是多种技术的综合，或者是设计方式，它包括Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest等技术。其中：l 使用XHTML和CSS实现标准化的呈现界面。l 使用DOM实现动态的显示和交互。l 使用XMLHttpRequest实现与服务器的异步通信。l 使用Javascript将XHTML、DOM、XML、XMLHttpRequest绑定。各种技术在Ajax引擎中的作用如图1所示，整个交互通信过程是异步进行的。Javascript调用XMLHttpRequest对象发起异步请求用户界面Ajax 引擎服务器Javascript调用DOM更新HTML、XHTML内容使用HTML、XHTML和CSS所得到的呈现Javascript调用XMLHttpRequest对象图1 各种技术在Ajax引擎中的作用21 Ajax的工作方式Ajax一般采取如下的工作方式：l 页面初始化：页面初始化加载，准备处理用户输入或者刷新页面内容。l 触发浏览器事件：浏览器触发一个事件，比如鼠标单击或者按下键盘。l 向服务器发起请求：浏览器向服务器发出一个请求。l 服务器处理请求：服务器收到浏览器发出的请求，调用业务逻辑接口处理请求。l 服务器响应请求：服务器响应浏览器发出的请求，将处理结果返回。这个返回结果传递给在发出请求时指定的请求调用函数。l 浏览器更新页面：请求调用函数根据响应结果更新DOM内容，比如DOM变量或者任何的Javascript变量，更新页面内容。“触发浏览器事件向服务器发起请求服务器处理请求服务器响应请求浏览器更新页面”这个过程是可以多次偱环的，如图2所示。用户访问页面初始化浏览器更新页面服务器响应请求服务器处理请求向服务发起请求触发浏览器事件偱环图2 Ajax的生命周期其中AJAX 最主要的特征就是XMLHTTPRequest 对象的使用和DOM 的处理。使用XMLHTTPRequest 可以用来与后台服务器之间进行交互，它同时支持同步和异步的处理。而采用同步处理方式，当处理时间比较长可能会造成浏览器在一段时间内无响应，从而给用户不友好的感受，也失去了无刷新的优点。因此使用AJAX 应该采用异步方式。通过AJAX 引擎，使得应用过程很自然，操作很流畅，因为其只和服务器交换有用的数据，而页面元素、版式等不必要的数据则不再重新从服务器端加载，提高了网络传输效率。而XML文档对象模型(XML DOM)的统一规范，使我们用JavaScript 标准的DOM对象就可以解析服务器端传来的数据，减轻了编码和调试的工作量，并能够保证应用跨平台运行。22 Ajax与Web开发模式对于采用单层或者二层模式的系统，Ajax引擎集成于Web系统，跟HTML、ASP等文件绑定在一起，嵌入到单独的页面编码中，可以帮助Web系统异步获取服务器的信息，在不刷新浏览器的情况下更新界面内容。Ajax引擎与Web系统的关系如图3所示。Ajax 引擎Web 系统HTML、JSP、ASP页面图3 单层和二层模式下Ajax在Web系统中的位置在采用三层模式及至MVC层次的Web系统中，Ajax引擎处于客户表示层（视图）当中，在异步方式下直接或间接地访问业务逻辑层或者控制器的相应接口，获取系统数据，在不刷新浏览器界面的情况下更新用户界面内容，以此方式来提高数据传输速度，改善系统用户体验。在三层模式Web系统中，Ajax引擎所处的位置如图4所示。发送数据操作请求浏览器用户显示层业务逻辑层数据源数据层Ajax引擎发送客户端请求调用相应的逻辑接口调用相应的数据接口更新用户界面内容返回加工后的数据返回初步加工后的数据返回数据数据逻辑加工Web系统图4 Ajax在三层模式Web系统中的位置对于应用如Struts、WebWork2、Spring 等框架的Web 系统，Ajax 引擎可以跟视图无缝集成，Ajax将请求异步发送相应的控制器，在控制器返回处理结果以后再更新视图内容。3Ajax 技术在网络教学系统中的应用下面举例说明Ajax技术在网络教学系统中的应用数据校验操作是Web应用程序中经常碰到的一种情况，Web应用程序必须保证用户输入数据的准确性和可靠性，保证系统的安全。数据校验在网络教学系统中经常会用到，例如学生在线注册功能模块：学生在线填写个人资料并设置个人登录帐号及密码，注册后经过任课教师或管理员的授权即可进入教学系统学习。我们设定的学生注册页面内容如下图所示：图5 学生注册页面内容因为安全性和其他因素考虑，必保证学生设定的登录名的惟一性。这种情况下需要一个惟一性的检查的功能。在以往的Web应用程序中，通常对这种数据惟一性的检验方法是把整个表单的数据提交给服务器，由后台服务程序来核对登录名是否惟一，如果登录名不惟一即回滚整个页面，提示用户重新设定登录名。这种方式比较耗费服务器资源。现在，可以使用Ajax，使用数据采用异步的方式检验，检验结果由Ajax引擎显示在页面相关区域，整个过程不需要弹出窗口，更不需要重新加载整个页面，快速又不加重浏览器和服务器的负担。学生在填写注册表单时，设定了登录名后，单击其后的“惟一性检查”按钮，将输入的登录名提交到服务器校验；服务器将些登录名与数据库的相关数据进行匹配，如果该登录名已经存在，则提示更换登录名称注册；如果该登录名尚未被注册，则提示用户可以继续。实现的关键代码如下：1） 编写registerCheck.jsp文件，用以在服务器端检验数据的惟一性，主要代码如下：2） 先编写一个开发框架,以供调用，以Javavscript编写代码如下： var http_request=false;function send_request(url)/初始化，指定处理函数，发送请求的函数http_request=false;/开始初始化XMLHttpRequest对象if(window.XMLHttpRequest)/Mozilla浏览器http_request=new XMLHttpRequest();if(http_request.overrideMimeType)/设置MIME类别 http_request.overrideMimeType(text/xml);else if(window.ActiveXObject)/IE浏览器try http_request=new ActiveXObject(Msxml2.XMLHttp);catch(e) try http_request=new ActiveXobject(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)/判断对象状态 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.getElementById(“feedback_info”).innerHTML=”系统正在处理您的请求，请稍后。”；send_request(“GET”,”registerCheck.jsp?field=username&value=”+f.username.value,null,”text”,showFeedbackInfo);elseDocument.getElementById(“feedback_info”).innerHTML=”请输入登录名称！”;5） 在“惟一性检查”按钮中添加onClick 事件，调用doCheck（）函数在上面的doCheck函数中，如果用户尚未输入登录名，表单中名为feedback_info的label会显示提示信息。如果用户已经输入登录名，则send_request函数将被调用，向服务器发送http请求，对登录名称进行校验。showFeedbackInfo 函数作为send_request的回调函数，在服务器返回响应信息之后，将相应的响应信息替换名为feedback_info的label的HTML文本，引导用户的下一步操作。使用Ajax后的注册表单，无需更改registerCheck.jsp，整个数据检验过程没有重新加载整个注册页面，其执行效果如图6所示图6 使用Ajax的注册表单在上面的学生在线注册页面中，用Ajax实现“所在院系”、“所在专业”、“所在班级”这三个联动下拉列表。当“所在院系”下拉列表被选中时，触发其onchange事件，执行事件处理函数调用之前定义的send_rquest 函数，向服务器发送异步http请求，从数据库获取所选院系下的所有专业。当服务器返回响应结果的时候，XMLHttpRequest对象将获取的数据填充到“所在专业”的下拉列表中。两样地，当“所在专业”下拉列表中的专业被选中时，触发其onchange事件，调用相应的函数向服务器发送异步http请求，返回相应的数据填充到“所在班级”下拉列表中。这种使用Ajax的方式使所构建的级联下拉列表具备数据实时更新、传输快速、方便管理等优点。此外，利用Ajax技术，我们还可以在网络教学系统中实现更为灵活、方便的级联菜单；模拟QQ、MSN等即