基于JQuery电大在线工具栏.docVIP

基于JQuery电大在线工具栏 　　摘要：电大在线教学平台作为广播电视大学主要的教学平台，一直承担着学校的教学业务。本文通过分析得出电大在线在实际教学应用中遇到的时效性差这一问题。针对这一问题，本文通过基于JQuery的富客户端框架来制作一款电大在线工具栏，从而有效的缩短了用户访问教学平台主要功能的使用流程，增强了教学平台的实时交互性。 　　关键词：电大在线教学平台JQuery电大在线工具栏 　　1引言 　　远程教育平台作为传播教学资源的媒介，正受到越来越多的重视。1999年，受教育部直接领导、中央广播电视大学组织实施的“人才培养模式改革和开放教育试点”项目正式启动，随即于2001年正式推出“电大在线”远程教学平台，该平台是一套基于Internet的远程教学系统，提供了包括网上学习、网上答疑、在线讨论和在线考试等主要网络学习服务。据统计，至目前为止已有超过300万人使用该平台进行在线学习。 　　经过十余年的实际应用，电大在线教学平台也暴露出一些问题。其中一个主要的问题就是平台时效性较差、信息相对分散，导致教师和学生在互动和沟通的环节上效率较低，教学效果大打折扣。该问题主要体现在以下几个具体方面： 　　（1）学生无法及时关注到教学资源的更新。电大在线是一套基于CMS模式的在线学习平台，教师会时常上传最新的课程资源以供学生进行浏览。学生通常无法通过简单直接的方式发现这些更新。 　　（2）论坛交互时效性过低。电大在线的论坛是教师和学生进行互动交流的地方。由于学生一般会同时学习多门课程，导致经常需要在不同页面之间进行切换才可以查看论坛发帖；对于同时负责若干门课程的教师，查看论坛学生发帖的过程也较为复杂。繁琐的操作过程降低了学生和教师的积极性。 　　（3）除以上不足外，教学平台缺少对学生发送即时讯息的功能。例如无法通过教学平台发布通知，以及各种其他的即时消息，导致沟通不畅。 　　根据以上分析，本研究试图通过Web20富客户端技术来加快系统与用户的交互效率，通过主动推送信息的方式来提高学生用户对系统的关注度，并使教师用户能够更加及时的得到学生用户对教学资源的反馈。 　　2JQuery简介 　　为了能够最大化的兼容各个版本的浏览器，本研究研究了时下较为流行的JS框架。通过对比，本研究选择使用JQuery作为基础来进行工具栏的开发。JQuery作为基于Javascript的脚本库有以下优点：首先它具备了良好的浏览器兼容性，对目前各个主流浏览器都能够很好地兼容；其次，它的尺寸十分小巧，使得工具栏对网络速度的要求大大降低，而且能够保证浏览器的性能；另外，JQuery对各种网页动态效果的支持也非常全面，为用户体验提供了良好的保障。 　　3电大在线工具栏的实现 　　电大在线工具栏主要包含以下组件：用户界面脚本库和后台数据访问程序。用户界面脚本库用于在页面上生成工具栏的用户界面并将用户的操作发送给后台的数据访问程序；与此同时，它还会定时访问后台数据以便及时查看有无数据更新。 　　界面脚本库简介 　　工具栏界面脚本在设计时尽量降低了对系统页面的侵入性，采用动态DOM模型来构建用户界面，并且对系统原有的JS脚本不会造成任何干扰。 　　脚本在页面加载时，通过jQuery事件模型式运行，不会与原有的页面加载脚本相互冲突，而且浏览器兼容性更强。工具栏界面采用动态浮动的div层固定在页面右下角。当用户点击时，工具栏能够弹出窗口显示更详细的信息。事件响应代码如下所示。 　　 　　$（“#detail”）click（function（）{ 　　$（“#box”）animate（{height：“300px”}）； 　　…… 　　}）； 　　 　　后台数据访问程序简介 　　为了满足跨域异步访问数据的功能需求，工具栏必须能够突破浏览器的安全限制。一般的AJAX访问方式可以实现同一台服务器上的数据异步访问，通过修改可以访问处于同一网域内的服务器数据。但是由于浏览器的安全性限制不同域之间的数据异步访问是无法用AJAX实现的。通过以上考虑，本研究决定采用JSONP的方式来实现异步数据访问。 　　JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C， C++， C#， Java， JavaScript， Perl， Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。 　　Jsonp（JSON with Padding）是资