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

Ajax 在网络教学系统中的应用 陈志华 1 麻书钦 广东技术师范学院 计算机与网络中心 摘要 Ajax 异步Javascript与可扩展标记语言 是Web应用开发的一种新理念 它将现有的多种技术进行 结合 可以构建更为动态和响应更灵敏的Web应用程序 使Web应用程序消除与桌面应用程序在人机交互和 用户体验方面的差距 文章介绍了Ajax的原理及主要技术 并着重探讨Ajax技术在当前网络教学系统中的 应用 The application of AJAX in the Network teaching system chenzhihua 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 user s 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 system 1 引言 随着我国教育信息化的不断发展 目前很多课程都建起了相应的网络教学平台 这些 网络教学平台绝大部分采用当前最为流行的 B S Browser Server 模式结构 即浏览器和 服务器结构 在这种结构下 用户工作界面通过 Web 浏览器来实现 很少一部分的事务逻 辑在前端 Browser 实现 主要的事务逻辑在服务器端 Server 实现 B S 请求响应机制所 使用的 HTTP 协议决定其特有的工作机制以及 Web 开发模式 也决定了其自身的一些缺陷 一直以来 Web 应用程序的交互效果都不如桌面应用程序 比如客户端功能和用户体验效 果 网络教学系统由于其需要具备动态性 互动性和多样性的特点 对数据传输速度和用 户体验提出了更高的要求 Ajax 的出现 使以 Web 应用程序搭建的网络教学系统继承了 桌面应用程序反应灵敏 胖客户端 用户体验优秀等优点 2 Ajax 简介 Ajax 不是一项新的技术 只是多种技术的综合 或者是设计方式 它包括 Javascript XHTML 和 CSS DOM XML 和 XSTL XMLHttpRequest 等技术 其中 使用 XHTML 和 CSS 实现标准化的呈现界面 使用 DOM 实现动态的显示和交互 使用 XMLHttpRequest 实现与服务器的异步通信 使用 Javascript 将 XHTML DOM XML XMLHttpRequest 绑定 各种技术在 Ajax 引擎中的作用如图 1 所示 整个交互通信过程是异步进行的 1作者简介 陈志华 1979 男 广东人 广东技术师范学院 助教 2 1 Ajax 的工作方式 Ajax 一般采取如下的工作方式 页面初始化 页面初始化加载 准备处理用户输入或者刷新页面内容 触发浏览器事件 浏览器触发一个事件 比如鼠标单击或者按下键盘 向服务器发起请求 浏览器向服务器发出一个请求 服务器处理请求 服务器收到浏览器发出的请求 调用业务逻辑接口处理请求 服务器响应请求 服务器响应浏览器发出的请求 将处理结果返回 这个返回结 果传递给在发出请求时指定的请求调用函数 浏览器更新页面 请求调用函数根据响应结果更新 DOM 内容 比如 DOM 变量 或者任何的 Javascript 变量 更新页面内容 触发浏览器事件 向服务器发起请求 服务器处理请求 服务器响应请求 浏 览器更新页面 这个过程是可以多次偱环的 如图 2 所示 其中 AJAX 最主要的特征就是 XMLHTTPRequest 对象的使用和 DOM 的处理 使用 XMLHTTPRequest 可以用来与后台服务器之间进行交互 它同时支持同步和异步的处理 而采用同步处理方式 当处理时间比较长可能会造成浏览器在一段时间内无响应 从而给 用户不友好的感受 也失去了无刷新的优点 因此使用 AJAX 应该采用异步方式 通过 AJAX 引擎 使得应用过程很自然 操作很流畅 因为其只和服务器交换有用的数据 而 页面元素 版式等不必要的数据则不再重新从服务器端加载 提高了网络传输效率 而 XML 文档对象模型 XML DOM 的统一规范 使我们用 JavaScript 标准的 DOM 对象就可 以解析服务器端传来的数据 减轻了编码和调试的工作量 并能够保证应用跨平台运行 Javascript 调用 XMLHttpRequest 对象 发起异步 请求 用户界面 Ajax 引擎 服务器 Javascript 调用 DOM 更新 HTML XHTML 内容 使用 HTML XHTML 和 CSS 所得到的呈现 Javascript 调用 XMLHttpRequest 对象 图 1 各种技术在 Ajax 引擎中的作用 用户访问 页面初始化 浏览器 更新页面 服务器响 应请求 服务器处理 请求 向服务发起 请求 触发浏览器 事件 偱环 图 2 Ajax 的生命周期 2 2 Ajax 与 Web 开发模式 对于采用单层或者二层模式的系统 Ajax 引擎集成于 Web 系统 跟 HTML ASP 等 文件绑定在一起 嵌入到单独的页面编码中 可以帮助 Web 系统异步获取服务器的信息 在不刷新浏览器的情况下更新界面内容 Ajax 引擎与 Web 系统的关系如图 3 所示 在采用三层模式及至 MVC 层次的 Web 系统中 Ajax 引擎处于客户表示层 视图 当 中 在异步方式下直接或间接地访问业务逻辑层或者控制器的相应接口 获取系统数据 在不刷新浏览器界面的情况下更新用户界面内容 以此方式来提高数据传输速度 改善系 统用户体验 在三层模式 Web 系统中 Ajax 引擎所处的位置如图 4 所示 对于应用如 Struts WebWork2 Spring 等框架的 Web 系统 Ajax 引擎可以跟视图无 缝集成 Ajax 将请求异步发送相应的控制器 在控制器返回处理结果以后再更新视图内容 3 Ajax 技术在网络教学系统中的应用 下面举例说明 Ajax 技术在网络教学系统中的应用 数据校验操作是 Web 应用程序中经常碰到的一种情况 Web 应用程序必须保证用户输 入数据的准确性和可靠性 保证系统的安全 数据校验在网络教学系统中经常会用到 例 如学生在线注册功能模块 学生在线填写个人资料并设置个人登录帐号及密码 注册后经 过任课教师或管理员的授权即可进入教学系统学习 我们设定的学生注册页面内容如下图 所示 Ajax 引擎 Web 系统 HTML JSP ASP 页面 图 3 单层和二层模式下 Ajax 在 Web 系统中的位置 发送数据操 作请求 浏览器 用户显示层 业务逻辑层 数据源数据层 Ajax 引擎 发送客户端 请求 调用相应的 逻辑接口 调用相应的 数据接口 更新用户 界面内容 返回加工 后的数据 返回初步加 工后的数据 返回数据数据逻 辑加工 Web 系统 图 4 Ajax 在三层模式 Web 系统中的位置 因为安全性和其他因素考虑 必保证学生设定的登录名的惟一性 这种情况下需要一 个惟一性的检查的功能 在以往的 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 图 5 学生注册页面内容 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 forms 2 if user type if f username value document getElementById feedback info innerHTML 系统正在处理您 的请求 请稍后 send request GET registerCheck jsp field username else Document 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 所示 在上面的学生在线注册页面中 用 Ajax 实现 所在院系 所在专业 所在班级 这三个联动下拉列表 当 所在院系 下拉列表被选中时 触发其 onchange 事件 执行事 件处理函数调用之前定义的 send rquest 函数 向服务器发送异步 http 请求 从数据库获 取所选院系下的所有专业 当服务器返回响应结果的时候 XMLHttpRequest 对象将获取的 数据填充到 所在专业 的下拉列表中 两样地 当 所在专业 下拉列表中的专业被选 中时 触发其 onchange 事件 调用相应的函数向服务器发送异步 http 请求 返回相应的数 据填充到 所在班级 下拉列表中 这种使用 Ajax 的方式使所构建的级联下拉列表具备数 据实时更新 传输快速 方便管理等优点 此外 利用 Ajax 技术 我们还可以在网络教学系统中实现更为灵活 方便的级联菜单 模拟 QQ MSN 等即时聊天工具 构建更具人性化 更具有吸引力的师生交流平台 还可 以搭建更为方便 稳定的在线考试系统 4 总结 Ajax 带给我们的不仅仅是技术 更多的是以人为本的一种服务理念 不仅缓和了资源 矛盾 也带来了丰富的用户体验 Ajax 技术的应用 使得网络教学系统减少了对网络资源 和服务器资源的消耗 也使其更具人性化和吸引力 带来更好的教学效果 图 6 使用 Ajax 的注册表单 参考文献 1 Dave Crane Eric Pascarello Ajax in Action J 人民邮电出版社 2006 5 2 何自聪 Ajax 开发精要 J 电子工业出版社 2006 5 3 梁民 基于 AJAX 技术开发 web 应用 J 电脑知识与技术 2006 5