AJAX技术应用十篇

2024-09-11

AJAX技术应用 篇1

在Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面的Ajax引擎,再由Ajax引擎来决定将这些数据插入到页面的指定位置,这样每个用户的行为会变成对Ajax引擎的一次Java Script调用,实现了不刷新整个页面的情况下对部分数据进行更新,降低了网络流量,减轻了服务器和带宽的负担,节约空间和成本,可以调用XML等外部数据,进一步促进页面显示和数据的分离,它是一种基于标准化的并被广泛支持的技术,不需要下载插件或小程序。

1 Ajax使用的技术

Ajax使用的最核心的技术是XMLHttp Request,它是一个具有应用程序接口的Java Script对象,能够使用HTTP协议连接一个服务器,目前许多浏览器都支持它。通过XMLHttp Request对象,Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换,而不是每次都刷新页面。

Java Script是一种在Web页面中添加动态脚本代码的解释性程序语言,利用它能执行许多复杂的任务,其核心已经嵌入到目前主流的Web浏览器中,Ajax利用Java Script将DOM、XHTML、XML及CSS等技术综合起来并控制其行为。

2 Ajax的工作流程

2.1 发送请求

Ajax可以通过XMLHttp Request对象实现采用异步方式在后台发送请求。通常情况下,Ajax发送请求有两种,一种是发送GET请求,另一种是发送POST请求。但是无论发送哪种请求,都需要经过以下4步骤。

1)初始化XMLHttp Request对象。为了提高程序的兼容性,需要创建一个跨浏览器的XMLHttp Request对象,并且判断XML-Http Request对象的实例是否成功,如果不成功,则给予提示。

2)为XMLHttp Request对象指定一个回调函数,对于返回结果进行处理。具体代码如下:

3)创建一个与服务器的连接。在创建时,需要指定发送请求的方式(即GET或POST),以及设置是否采用异步方式发送请求。

4)向服务器发送请求。利用XMLHttp Request对象的send()方法可以实现向服务器发送请求,该方法需要传递一个参数,如果发送的是GET请求,可以将该参数设置为null;如果发送的是POST请求,可以通过该参数指定要发送的请求参数。

2.2 处理服务器响应

当向服务器发出请求后需要处理服务器响应。条件不同时,服务器对不同的请求有不同的响应结果。XMLHttp Request对象提供了两个用来访问服务器响应的属性:一个是response Text属性,返回字符串响应;另一个是response XML属性,返回XML响应。

2.2.1 处理字符串响应

字符串响应通常应用在响应不是特别复杂的情况下。如,将响应显示在提示对话框中,或者响应只是显示成功或失败的字符串。将响应显示到提示对话框中的回调函数的具体代码如下:

如果需要将响应结果显示到页面的指定位置,也可以先在页面的合适位置添加一个

标记,设置该标记的id属性,如:div_result,然后在回调函数中应用以下代码显示响应结果。

document.get Element By Id(“div_result”).inner HTML=http_request.response Text;

2.2.2 处理XML响应

如果在服务器端需要生成特别复杂的响应,那么就需要应用XML响应。应用XMLHttp Request对象的response XML属性,可以生成一个XML文档,而且当前浏览器已经提供了很好的解析XML文档对象的方法。以下代码可以实现在回调函数中遍历保存留言信息的XML文档并显示在页面中。

3 Ajax重构

Ajax的实现主要依赖于XMLHttp Request对象,在调用它进行异步数据传输时,该对象的实例在处理完事件后会被销毁,若不对该对象进行封装处理,在下次需要调用它时则需重新构建,且每次调用都需要写大段代码,使用非常不便。目前很多开源的Ajax框架都提供了对XMLHttp Request对象的封装方案,但是如果用这些框架需要加载很多额外的资源,这势必会造成服务器资源浪费。而Javascript脚本语言支持OO编码风格,通过它可以将Ajax所必须的功能封装在对象中。实现Ajax重构的步骤如下:

1)创建一个单独的JS文件,名称为Ajax Request.js,在该文件中编写重构Ajax所需的代码。

2)在需要应用Ajax的页面中应用以下的语句及步骤(1)中创建的JS文件。

3)在应用Ajax的页面中编写错误处理函数、实例化Ajax对象的方法和回调函数。

4)在页面中添加设置系部的下拉列表和设置班级的下拉列表,并在系部下拉列表的on Change事件中,调用get Class()方法获取系部对应的班级。

5)编写获取居住地的Servlet实现类Abode Servlet,在该Servlet中的do Get()方法中编写编写代码用于根据传递的action参数执行不同的处理方法。

6)在Abode Servlet中编写get Department()方法。在该方法中,从保存系部信息的Map集合中获取全部的系部信息,并将获取的系部信息连接为一个以逗号分隔的字符串输出到页面上。get Department()方法的具体代码略。

7)在Abode Servlet中编写getclass()方法。在该方法中,从保存系部信息的Map集合中获取全部的班级信息,并将获取的班级信息连接为一个以逗号分隔的字符串输出到页面上。getclass()方法的具体代码略。

8)为了在页面载入后显示默认的系部,需要在页面的on Load事件中调用获取系部的方法get Department()。具体实现如下:

4 几个注意问题

4.1 浏览器兼容性问题

Ajax使用了大量的Javascript和Ajax引擎,这些内容需要浏览器提供足够的支持。目前对此提供支持的浏览器有IE5.0及以上版本、Mozilla1.0、Net Scape7及以上版本,但是Mozilla提供XMLHttp Request对象的方式不一样。因此,使用Ajax的程序必须测试针对各个浏览器的兼容性。

4.2 安全问题

安全性是互联网服务日益重要的关注点。Ajax应用主要面临以下安全问题。

1)Java Script本身的安全性

当在web浏览器中执行Java Script代码时,用户允许任何编写的代码运行在自己机器上,给网站带来安全隐患。为此,浏览器厂商提出在一个沙箱中执行Java Script代码。沙箱是一个只能访问很少计算机资源的密闭环境,从而使Ajax应用不能读取或写入本地文件系统。提高了客户端Java Script的安全性。

2)数据在网络上传输的安全问题

对于涉密数据信息,在进行HTTP传输时,可以对数据加密。

3)客户端调用远程服务的安全问题

在Ajax应用中应该将所有的Ajax请求都发送到控制器,由控制器负责检查调用者是否有访问资源的权限,而所有业务逻辑组件都隐藏在控制器之后。

4.3 性能问题

由于Ajax将大量的计算从服务器移到了客户端,浏览器就承受更大的负担。Ajax的核心语言是Java Script,而Java Script并不是高性能语言,其对象也不是轻量级的,特别是DOM元素会耗费大量内存,因此需要开发者尽力提高Java Script代码的性能。以下几种方法可以优化Ajax应用的执行速度:1)优化for循环;2)尽量使用局部变量,少用全局变量;3)尽量少用eval;4)将DOM节点附加到文档上;5)尽量减少点”.”操作符的使用。

4.4 中文编码问题

Ajax不支持多种字符集,其默认的字符集是UTF-8,所以在应用Ajax技术的程序中应及时进行编码转换。否则程序中的中文字符将变成乱码。一般在以下两种情况下会产生中文乱码。

1)发送路径的参数中包含中文,在服务器端接收参数值时产生乱码

将数据提交到服务器有两种方法:一种是使用GET方法提交,另一种是使用POST方法提交。对于这两种方法,在服务器端接收参数值时解决中文乱码的方法不同。

当接收使用GET方法提交的数据时,要将编码转换为GBK或GB2312。例如将系部名称的编码转换为GBK的代码如下:

当接收使用POST方法提交的数据时,要将编码转换为UTF-8。例如将用户名的编码转换为UTF-8的代码如下:

2)返回到response Text或response XML的值中包含中文时产生乱码

因为Ajax在接收response Text或response XML的值时是按照UTF-8的编码格式进行解码的,所以如果服务器端传递的数据不是UTF-8格式,在接收response Text或response XML的值时有可能产生乱码。解决办法是保证从服务器端传递的数据采用UTF-8格式。

5 小结

Ajax技术可以减轻服务器的负担,实现客户端无刷新更新页面,运用了更加先进、更加标准化、更加高效的Web开发技术体系,是一个客户端技术,可以适应任何服务器端技术。Ajax正逐渐进入Web开发主流。

参考文献

[1]聂哲,范新灿,张霞.JSP动态Web技术实例教程[M].北京:高等教育出版社,2009.

[2]王国辉.Java Web开发实战宝典[M].北京:清华大学出版社,2010.

AJAX技术应用 篇2

当用户访问使用传统的ASP技术制作的论坛,并进行多种操作时,会多次重载页面或在不同页面间跳转,造成用户视觉上的不舒服以及花费较多的等待时间。当需要改变页面很小区域的内容时,也要重载刷新整个页面。笔者将以前制作的教学论坛重要功能改用Ajax技术实现,很好地解决了这样的问题,能使访问者获得了更好的web体验。

2. Aj ax技术概述

Ajax是Asynchronous Java Script and XML的缩写,即异步的Java Script和XML处理。它是由几种已有的技术以新的方式组合而成的,包括Java Script、XHTML和CSS、DOM、XML和XLST、XMLHttp Request。Ajax可以实现浏览器与服务器端的异步通信。

Ajax技术已经被很多大公司应用到它们的商业产品中,如Google公司的Google Map和Google Suggest、微软的MSN Space和国内一些电子邮箱服务的Web界面都应用了这项技术。

Ajax实现一次异步请求/响应模式一般按如下步骤进行:

(1)在网页的客户端Java Script代码中创建XMLHttp Request对象。

(2)通过XMLHttp Request对象中的open()和send()方法向服务器端发送HTTP请求。可以设置异步请求模式或同步请求模式。

(3)服务器处理完请求后,调用回调函数。XMLHttp Request对象提供了onreadystatechange属性来指定回调函数,等到服务器的响应之后回调函数被自动执行。

(4)回调函数解析服务器端返回的处理结果,并将它们更新到页面指定部分。可以使用XML Http Request对象的response Text属性,将传回的信息当字符串使用;或使用response XML属性将传回的信息当XML文档使用,可以用DOM处理。

总之,XMLHttp Request对象如果采用异步请求模式发送完请求之后,可继续执行其它操作,而不是必需等待服务器的响应;请求的目标url返回的是少量的所需数据,而不是整个页面;客户端根据响应数据来更新页面需要改变内容的区域,而不是刷新整个网页。因此提高了响应速度,减轻了服务器的负担。

3. 教学论坛设计特色

3.1 应用Ajax技术使操作反应更迅速

在用户这册、登录、分页浏览版面文章列表、发表文章及回复、文章检索、主管理员和各版主的后台管理界面中应用Ajax技术,减少了页面刷新和页面跳转,使操作反应更迅速。

3.2 用户注册后必须经过管理员审核才能登录

注册成功后经管理员审核后才能登录,用户名和昵称如果有不文明的文字不能通过审核。

3.3 发表文章及回复的审核机制

用户发表的文章和回复,必须经本版面的版主在管理界面审核后,其他用户才能在论坛中看到,可以保证论坛文章的质量和没有不健康的内容。

3.4 版主可以锁定文章和锁定版面

用户不能对锁定的文章进行回复,作者本人也不能修改自己发表的文章。当节假日没人管理时,版主可以锁定自己管理的版面,此时用户可以浏览,但不能发表文章和回复,以后可以解锁,便于对论坛进行灵活管理和控制。

3.5 用虚拟成绩和虚拟学位激励用户

用户发表文章和回复自动加分,版主可以对水平较高的文章额外加分,根据虚拟成绩自动决定用户从小学生、初中生直到博士生等虚拟学位,调动用户参与的积极性。

4. Aj ax技术在论坛制作中的应用

论坛的很多功能都可以使用Ajax技术实现,下面仅就部分功能进行探讨,给出的代码主要是客户端代码,在服务器端被请求的页面使用传统的ASP技术,在本文不进行讨论。

4.1 在用户提交注册信息前判断用户ID是否可用

在用户注册页面中,当用户在用户ID文本框输入用户名后焦点离开时,应用Ajax技术自动提前向服务器端发出异步请求,判断该用户ID是否已经有人使用,此时用户甚至感觉不到请求已发出,可以继续填写其它信息,接到服务器端返回的响应数据后,自动在后面显示检测结果。也可单击文本框后面的检测按钮随时检测。

本文的实现方法是,在输入用户ID的文本框的onChange事件和在检测按钮的on Click事件代码中调用下面check_id()函数。

这样不影响用户继续填写其它信息的情况下就可以自动判断用户名是否可用,而不必等到提交全部数据时才判断,减少了因用户ID已有人使用返回重填的页面跳转。

4.2 用户登录成功改变登录区域内容但不重载页面

当用户在论坛主页中的登录区域输入用户ID和密码登录成功后,登录区域的内容换成欢迎用户信息、修改用户资料和退出登录的超链接,应用Ajax可以不用像传统ASP技术那样重载并刷新整个页面,而是只改变登录区域的信息。

我们可以在“登录”按钮的on Click事件中调用login()函数,向login_do.asp发出登录请求,下面是login()函数的部分代码:

在服务器端login_do.asp接收用户ID和密码,检索数据库中的用户表,若没找到相应记录,返回字符串“failed”,否则登录成功用session变量记录用户ID,并返回字符串“success”。

在回调函数中,如果http Req2.response Text接收的响应数据是“failed”,用java Scipt在登录区域适当位置显示“用户名或密码错误”信息;如果是“success”,则用java Scipt将登录区域的内容换成欢迎用户信息、修改用户资料和退出登录的超链接,而不用刷新整个网页。

4.3 版面、文章的锁定和解锁

版主登录进入管理界面后,显示他管理的当前版面的锁定状态(未锁定或已锁定),切换状态的按钮value值设为“锁定版面”或“解锁版面”。单击切换按钮时,在按钮的on Click事件中调用setboardlock()函数向服务器端发出锁定或解锁版面的请求。setboardlock()函数包含以下主要代码:

服务器端setboardlock.asp接收当前版面的ID值和锁定状态值,将当前锁定状态值(逻辑值)取反后,写到版面表中对应版面记录的islock字段,并返回表示操作是锁定还是解锁的响应数据。下面是回调函数gotresult1()的部分代码:

在上面的回调函数中,根据响应数据改变按钮btn Lock的Value属性和只读文本框显示新设置的锁定状态,而不用重载刷新整个网页。锁定文章的方法与此类似。

4.4 发表文章和回复

应用Ajax技术发表文章和回复可以不使用表单。在发表文章页面中我们用表格布局,加入一个单行文本框(名为title)用来输入文章标题,加入一个iframe对象(id为content)用来输入文章内容,它比文本区域功能更多,可以对选中的文本设置粗体、斜体、对齐方式、字体、字号和颜色等,重要的是它能用Java Script灵活控制。

为了让iframe对象能够输入数据,在Java Scrip脚本中还要进行如下设置:content.document.design Mode='on';

在提交按钮的on Click事件中,调用save_article()函数保存信息。按钮的代码如下:

函数save_article()主要代码如下:

在服务器端save_article.asp接受请求,保存文章信息。在回调函数function gotresult4()中,根据响应数据,显示提示信息:

if(http Req4.response Text=="success")alert("保存成功!但是需要等待版主审核后才能在论坛中显示出来,在此期间请不要重复发送!");

else alert("保存失败:"+unescape(http Req4.response-Text));

发表回复用类似的方法,不再赘述。

4.5 分页显示版面的文章标题等信息列表

进入某一版面时,用户可以翻页浏览该版面文章标题列表。使用传统的ASP技术,每按一次翻页按钮,就会重载刷新一次页面,下面我们应用Ajax技术来解决此问题。

当用户单击翻页按钮时,在其on Click事件代码中调用一个自定义函数getpageinfo(),向服务器端的articleinfo.asp发出http请求,来获得包含指定页码所有文章概要信息的XML数据。其中,参数board_id、pagenumber分别表示当前版面ID和要转到的页码。

服务器端articleinfo.asp根据board_id和pagenumber参数访问文章信息表,建立包含本版面指定页码的文章信息的记录集,同时访问相关的用户表和回复表,最后生成包含当前版面指定页码各篇文章概要信息(包含文章标题、作者用户名和昵称以及发表日期、回复和查看次数、最后回复人和回复日期)的XML数据。

在回调函数中接收上面生成的XML数据,解析后在表格中动态生成的数据行和单元格中显示出来。下面是回调函数got Result5()的部分代码:

这样在单击翻页按钮显示该页文章信息列表时,不用刷新整个页面,显示文章信息列表的数据行是用Java Script在客户端动态生成的,可获得很好的视觉效果。

5. 结束语

本文简要介绍了Ajax技术,讨论了用Ajax技术实现教学论坛部分功能的设计方法,可减少页面重载和跳转,同时获得更快的响应速度。若想详细了解Ajax技术的原理和工作过程,可查阅后面列出的参考文献。为了更好的应用Ajax技术,还要对Java Scrit客户端脚本语言和XML进行一些研究。

参考文献

[1]柯昌正,黄厚宽.Aj ax技术的原理与应用[J].铁路计算机应用,2007,16(1):27-29.

[2]蒋银珍.ASP中AJAX技术的应用[J].电脑开发与应用,2007,20(5):52-53.

AJAX技术应用 篇3

关键词:MAPEASY;瓦片预生成技术;Ajax技术;xmlhttprequest对象

中图分类号:TP312文献标识码:A文章编号:1007-9599 (2010) 03-0098-02

The Application of Ajax Technology in Mapeasy

Xiao Juan1,2,Zhang wen fen2,Guo Mei1,Xiao Min1

(1.School of Computer and Communication HNU,ChangSha410082,China; 2.Xiang Nan University,ChenZhou423000,China)

Abstract:the Google map service, which based on Tile precast technology and Ajax technology, brings new vigor to the realization of electronic map. Mapeasy is a good web client Open Source JS codes , whichalso on the basis of these two technologies, and itself is segregated from the back database. This paper describes the application of AJAX technology and Xmlhttprequest object Asynchronous data request process in Mapeasy.

Keywords:Mapeasy;The map tile precast technology;Ajax Technology;Xmlhttprequest object

一、引言

目前,电子地图的兴起和发展,特别是随着互联网的迅速发展和普及,GIS和INTERNET的结合(WEBGIS),让电子地图作为一种工具,与其他产业的发展应用相结合,已经成为人们一个常用工具。

说到WEBGIS,不得不想到以提供网络搜索服务为主的GOOGLE公司推出的地图服务GOOGLE MAPS和GOOGLE EARTH。它们的出现标志着互联网地图服务的兴起,其应用的地图瓦片预生成技术和Ajax技术相结合的网络地图模式,有效地减轻了服务器端的负载。鉴于这种模式的成功,出现了许多比较优秀的类似技术的网络地图开源类库,比较著名的有Mapeasy,Openlayers。下面简单的介绍下Mapeasy。

二、Mapeasy

Mapeasy是一个基于地图瓦片预生成技术和AJAX技术的JS开源类库。严格地说来,它是一个网络地图客户端的应用程序接口,类似于Google Map API,能够简化基础网络地图的实现。并且它独立于具体的GIS技术和规范,还支持多种图片格式,并具有一些常规的GIS功能,如:定位,比例尺,标注等。它是一个纯粹的客户端JS库,不需要在客户端使用任何插件,并且与后台数据的获取方式完全分离,因此可以在服务器端放置简单的图片,也可以在后台架构专业地图服务器(MapX,GeoServer等),更加易于各种环境下的部署和扩展。虽然是完全运用弱类型语言JavaScript编写的,但具有良好的面向对象方法设计和模式。

三、瓦片预生成技术

瓦片预生成技术的原理是预先将地图设定为多个比例尺,对每个比例尺提前将地图分成若干小图片(称为瓦片tile),预存在服务器上,瓦片是像素大小相同的图片。比如:在第一级比例尺上,是一个瓦片,而到了第二级就裂变成了四个瓦片,地图放大一个固定比例,到第三级就裂变为十六个瓦片。依次类推,每放大一个级别上级的一个瓦片就裂变为四个,这样就构成了地图瓦片的金字塔模型。客户端通过计算电子地图显示区内的坐标范围和比例尺大小来索引合适的瓦片,把这些瓦片从服务器端下载到客户端拼接成无缝的电子地图显示出来。

四、Ajax技术的应用

(一)Ajax技术的概述

Ajax是Asynchronous JavaScript And XML的缩写,它并不是一门新的语言或技术,而是几项技术新的组合。

Ajax技术主要的功能和特点:

1.使用了xmlhttprequest对象进行异步数据的读取。

2.使用document object model(DOM)实现动态显示和交互。

3.使用xml和xstl进行数据的交换处理。

4.使用xhtml和css呈现标准化。

5.使用javascript对以上的技术进行数据的绑定处理。

Ajax最大的特点是使用了xmlhttprequest对象实现了服务器端和用户端的异步数据响应,改变了传统WEBGIS以提交表单的形式实现客户端和服务器端的同步。

(二)mapeasy中xmlhttprequest对象实现数据异步存取

在mapeasy中,应用Ajax技术的xmlhttprequest对象建立与后台数据库连接的步骤:

1.申请一个新的xmlhttprequest对象。

var request=new XMLHttpRequest();

2.xmlhttprequest对象向数据库发送数据请求。

this.getMarkerInfo=function (){//向服务器中的MarkerInfo.aspx发出数据请求

var url="MarkerInfo.aspx?";//给出数据的url

request.open("GET",url,true);//建立服务器的异步数据请求,第三个参数为true表示异步数据请求

request.onreadystatechange=this.updateMarkerInfo;//指定回调的方法

request.send(null);

3.接收数据,并在地图上显示标注图标。

this.updateMarkerInfo=function (){//接受图标数据,并显示图标

If (request.readyState==4){

var

receivedInfo=unescape(request.responseText).split("###");

var markerInfo;

var newmarker;

for(var i=0;i

markerInfo=receivedInfo[i].split("@@@");

newmarker=new Marker(new Point(markerInfo[1],markerIn fo[2]),Marker.LARGE);

newmarker.setInfo(markerInfo[3]);

model.addOverlay(newmarker);}//把数据图标覆盖到地图的中心点上

}

}

五、结束语

在mapeasy中实现电子地图的发布,需要在服务器端先把地图瓦片分等级存放,再应用ajax技术的xmlhttprequest对象实现服务器端数据的异步读取,极大地提高了客户端的用户体验。在mapeasy上的二次开发应用具有更为广泛的前景。

参考文献:

[1]MapEasy,http://mapeasy.sourceforge.net;2007,1:12

[2]符海月,赵军,李满春.从Goosle Maps看我国全球化地理信息服务面临的挑战和对策.地理与地理信息科学,2006,22,2:l-3

[3]易棋.WEBGIS中地图发布的一种改进方案.信息科技,2008,22: 127-129

[4]栾绍鹏,朱长青.Ajax在Webgis中的应用研究.测绘科学, 2007, 32,5 :158-160

作者简介:

AJAX技术应用 篇4

研究了基于Ajax的异步WebGIS实现技术,并在ArcIMS平台上实现了基于Ajax的异步WebGIS应用.研究表明:Ajax技术与WebGIS结合,能够实现浏览器与地图服务器之间的异步交互,与传统的.WebGIS应用相比,减少了冗余,减轻了请求和响应对服务器造成的负荷,使整个WebGIS的性能达到最佳状态.

作 者:师俊峰 邹峥嵘 SHI Jun-feng ZOU Zheng-rong  作者单位:中南大学,信息物理工程学院,湖南,长沙,410083 刊 名:测绘与空间地理信息 英文刊名:GEOMATICS & SPATIAL INFORMATION TECHNOLOGY 年,卷(期): 32(2) 分类号:P208 关键词:Ajax   异步交互   WebGIS   B/S  

基于Ajax技术的企业网站建设 篇5

1 Ajax的技术介绍

Ajax Web应用采用异步交互模式, 在用户与服务器之间引入了一个中间媒介———Ajax引擎, 消除了传统模式中的“提交—等待—重新显示”缺点。Ajax技术的核心是Java Script对象Xml HttpRe-quest。该对象在Internet Explorer5中首次引入, 它是一种支持异步请求的技术。

简而言之, Xml-HttpRequest使您可以使用Java Script向服务器提出请求并处理响应, 而不阻塞用户。当用户提出http请求时, 并不是所有的用户请求都提交给服务器。数据的验证和处理由Ajax来代理, 只有确实需要从服务器读取新数据时, 才由客户端通过Java Script, 调用Ajax引擎, 向服务器端发出HTTP请求, 但它并不等待请求的响应, 用户可以继续浏览或交互。当服务端的数据以XML形式返回时, Ajax引擎接收数据, 并指定Java Script函数来完成相应的处理或页面的更新, 而不是刷新整个页面, 从而实现用户操作与服务器响应的异步化。借助于Ajax, 可以在用户单击按钮时, 使用Java Script和DHTML立即更新UI, 并向服务器发出异步请求, 以执行更新或查询数据库。当请求返回时, 就可以使用Java Script和CSS来相应地更新UI, 而不是刷新整个页面。最重要的是, 用户甚至不知道浏览器正在与服务器通信, Web站点看起来是即时响应的。

2 企业网站的关键技术

鉴于中小型企业的实力以及对建站成本的考虑, 这个网站使用PHP作为开发语言, 同时为了方便以后修改界面, 还将使用Smarty模板引擎分离代码和用户界面。PHP是一种HTML内嵌式的语言, 是一种在服务器端执行的嵌入HTML文档的脚本语言, 它大量地借用C和Perl语言的语法, 并结合Web开发的特性, 使Web开发者能够快速地写出动态页面。PHP是将程序嵌入到HTML文档中去执行, 执行效率比完全生成HTML标记的CGI要高许多;与同样是嵌入HTML文档的脚本语言ASP相比, PHP是完全免费的开源产品, 而且可以运行在多种操作系统上。PHP在服务器端执行, 充分利用了服务器的性能;PHP执行引擎还会将用户经常访问的PHP程序驻留在内存中, 其他用户再一次访问这个程序时就不需要重新编译程序了, 只要直接执行内存中的代码就可以了, 这也是PHP高效率的体现之一。PHP具有非常强大的功能, 所有的CGI或者ASP的功能PHP都能实现, 而且支持几乎所有流行的数据库以及操作系统。Smarty是一个使用PHP写出来的PHP模板解析类, 是目前业界最著名的PHP模板引擎之一。

它分离了逻辑代码和外在的内容, 提供了一种易于管理和使用的方法, 用来将原本与HTML代码混杂在一起PHP代码逻辑分离。目的就是要使用PHP程序员同美工分离, 改变程序的逻辑内容不会影响到美工的页面设计, 美工重新修改页面不会影响到程序的程序逻辑。

3 Ajax具体实现

3.1 用户注册的实时验证

为了实现Ajax, 在客户端HTML页面必须写入Java Script代码作为连接客户端和服务器端的纽带。

由于各个浏览器对Xml HttpRequest的支持不一样, 这里使用了Java Script框架j Query, 通过j Query可以写出兼容各种浏览器的Ajax代码。S│.post () 是j Query的一个Ajax方法, S│.post的第一个参数指定了服务器端的处理页面, 后面大括号中是需要传递的参数, 可以跟一个或多个参数;function (data.textSta-tus) 是一个返回函数, 当Ajax在服务器端处理完成之后, 使用这个函数接收服务器端返回的数据。j Query的append方法将对现有的页面中插入一段代码。在服务器端需要把处理结果返回给客户端显示, 具体代码如下:

页面在接受到客户端Ajax传递来的用户名之后就查询数据库, 判断用户名是否存在, 并且根据情况生成一段HTML代码, 最后使用echo返回给客户端页面。这一过程实现了用户注册时的动态验证, 当用户的鼠标焦点离开用户名文本框之后, 程序将触发Ajax, 在页面没有刷新的情况下, 文本框后面会显示出一个提示框, 提示改用户名是否合法。

3.2 后台的无刷新删除图片

在后台修改图片组的时候, 不可能每删除一张图片都要重新刷新页面, 这样的话每刷新一次就要完整地重新查询一次数据库, 不仅影响用户体验, 而且还占用服务器资源, 消耗服务器带宽。在这里我们同样使用Ajax无刷新的删除图片, 静态页面的js代码如下:

当单击每张图片旁边的删除就会触发de-l OnePic函数, 同时传递了2个参数给这个函数, 分别是图片名, 图片扩展名;此时使用j Query的S│.post方法定义后台的处理页面为picture.php, 还使用j Query获取了图片组的id, 把act、picname、ext、prid四个值传递给后台的picture.php。下面是picture.php的处理代码:

在这段代码之前是接收js传递来的值, 根据传值删除图片, 图片删除之后, 程序对这个图片组中的图片进行重新整理, 并且生成一段HTML代码, 在程序处理完之后还更新了数据库。在最后使用echo函数把重新生成的HTML代码传回前台页面。前台页面通过j Query的.html方法直接把后台传回的HTML代码替换原来的HTML。

4 结语

但正如任何事物一样, Ajax也不是一种必须和万能的技术, 它有适合自身应用的场合, 并与现有的动态页面技术互补融合, 在未来的软件技术发展中, 相信Ajax将担负起更多的责任, 在Web应用的舞台上发挥重要的作用。

参考文献

[1]王前震, 蔡瑞英.利用AjaxWeb实现实时监控系统软件设计的改进[J].计算机应用与软件, 2009, 26 (10) .

Web2.0与Ajax技术解析 篇6

一、Web2.0概述

Web2.0是2003年之后互联网的热门概念之一, 目前对什么是Web2.0并没有一个很严格的定义。一般来说Web2.0是相对Web1.0 (2003年以前的互联网模式) 的新一类互联网应用的统称。根据Wiki定义:Web 2.0是网络运用的新时代, 网络成为了新的平台, 内容因为每位使用者的参与 (Participation) 而产生, 参与所产生的个人化 (Personalization) 内容, 借由人与人 (P2P) 的分享 (Share) , 形成了现在Web 2.0的世界。从这个定义我们可以看出, Web2.0并不是一个具体的事物, 而是一个阶段, 是促成这个阶段的各种技术和相关的产品与服务的一个总称。

与Web1.0相比较, Web1.0的主要特点在于用户通过浏览器获取信息, 而Web2.0则更注重用户的交互作用, 用户既是网站内容的消费者 (浏览者) , 也是网站内容的制造者。Web2.0与Web1.0的比较见表1。

从表1中可以看出, Web2.0相对于Web1.0而言, 是一次从外部应用到核心内容的变化, 具体地说, 从模式上是单纯的“读”向“写”和“共同建设”发展;从主要构成单元上是由“网页”向“发表/记录的信息”发展;从工具上是由网页浏览器向各类浏览器、RSS阅读器等内容发展;从体系结构上由Client Server (客户端/服务器) 向Web Services (Web服务) 的转变;内容创建者由程序员等专业人士向全部普通用户发展;主导者将由少数人向大量业余人士发展。

二、Ajax概要

Ajax是Asynchronous Java Script and XML的缩写, 即异步的Java Script和XML。通俗地说就是客户端请求通过异步调用服务器数据, 实现页面无刷新操作的技术。Ajax正是实现前面所说的Web2.0的核心技术, 借助Ajax可以将笨拙的Web界面转化成强交互性的Ajax应用程序。

在传统的Web应用程序模型中, 浏览器负责初始化向服务器的请求, 以及处理来自服务器的响应, 而Ajax模型则不同, 它提供了一个中间层——Ajax引擎——来处理这种通信。Ajax引擎 (Ajax Engine) 实际上只是一个Java Script对象或函数, 其核心是XMLHttp Request对象, 只有当信息必须从服务器上获得的时候才调用它。而且Ajax引擎向服务器发出的HTTP请求都是异步完成的, 不必等收到响应后就可以继续执行后续的代码。

服务器将配置为向Ajax引擎返回其可用的数据, 这些数据可以是纯文本、XML或者需要的任何格式, 唯一的要求就是Ajax引擎能够理解和翻译这些数据。当Ajax引擎收到服务器响应时, 将会触发一些操作, 通常是完成数据解析, 以及基于所提供的数据对用户界面做一些修改。由于这个过程中传送的信息比传统的Web应用程序要少得多, 因此用户界面的更新速度将很快, 用户也能够更快地进行他们的工作。Ajax应用程序模型如图1所示。

从Ajax应用程序模型中可以看出, 比起传统的Web开发模式, Ajax向传统桌面程序靠拢了很多, 一个基于Ajax的Web页面已经越来越趋向于一个单独的应用程序。在Ajax应用中, 每个Web页面不一定仅对应一个服务器端页面, 而可能是由多个服务器端页面共同协作完成的, 同时, 一个服务器端页面又可以为多个客户端页面服务, 这样, 每个服务器端页面就可以将功能分得很细。通过Ajax引擎, 客户端页面可以根据用户需要来调用服务器端相应页面, 获得数据并显示在页面上。此时大多数服务器端的页面已经不再是界面表现的工具, 而是作为提供数据的“接口”, 一个Web页可以从多个接口中获取数据, 并将它们更新在页面中。

三、Ajax的幕后技术

Ajax不是单一的技术, 而是多种现有技术的综合体现。

1.描述页面的HTML/XHTML。

Ajax使用HTML/XHTML描述文档的结构, 但仅用于描述Ajax页面的初始样式。在初始化之后, 文档结构可能会随着程序的运行而有所变化。同时, HTML/XHTML还会告知浏览器下载将运行于客户端的Java Script以及定义页面样式的CSS等相关文件。

2. 表示文档结构的DOM。

DOM (Document Object Model) 即文档对象模型, 是HTML和XML文档的一个应用程序接口 (API) 。它提供了一种结构化的文档表示方式, 它把网页、脚本和编程语言连接了起来。Java Script可以访问到当前页面的DOM对象, 并通过对其操作来间接地改变该页面的内容及结构。

3. 定义元素样式的CSS。

CSS (Cascading Style Sheet) 即层叠样式表, 用来指定HTML文件中元素实现的样式。通过使用CSS可将文档的结构和表现完全分开, HTML部分可专注于定义文档的结构, 而控制样式则交给CSS来处理。这样极大地降低了DOM对象的复杂性, 方便使用Java Script对其进行维护。

4. 表示服务器和客户端通信内容的XML。

XML (e Xtensible Markup Language) , 是一种扩展性标识语言。在Ajax技术中, 客户端与服务器端交换的数据通常采用这种语言来描写。由于XML是一种通用的标识语言, 可以在不同的CGI程序中被读取, 提高了Web应用程序的可扩展性, 从而可以把用Ajax技术开发的页面程序绑定到不同平台的服务器程序中。

5. 实现与服务器异步通信的XMLHttp Request对象。

XMLHttp Request对象, 早在1998年就已经集成到了IE中了。随后, 在各种主流的浏览器中也陆续开始得到支持。XMLHttp Request对象的强大之处在于, 它允许开发者在Java Script中以异步的方式向服务器发出HTTP请求并得到响应, 用户会有类似于桌面应用程序的动态、快速响应和高交互性的体验。

6. 协调上述各种技术的Java Script。

Java Script将上面提到的所有技术黏合在一起。通过Java Script代码, 开发者可以访问并维护当前页面的DOM对象, 包括对其进行添加、删除和修改等操作, 还可以通过维护某个DOM元素的CSS Class来改变它的外观样式, 也可以使用XMLHttp Request对象访问服务器的CGI程序, 并将返回的XML或JSON类型的数据解析后应用到当前的计算或显示中。

四、Ajax技术适用的场合

作为一种新的Web应用程序模型, Ajax是一项非常诱人的技术, 但并不意味着它就是一项通用的技术, 一些场合使用Ajax可以带来很好的用户体验, 而另外一些场合有可能给用户的使用带来灾难。Ajax的优点是可以很方便地实现异步交互与动态刷新Web页面, 因此适用于用户和服务器交互频繁的场合。

五、结束语

AJAX技术应用 篇7

(1) 无法实时保存考生答案, 网络或操作原因可能导致答题数据丢失;

(2) 考试时间由客户端控制, 难以精确控制;

(3) 局部数据的变化影响整个页面的刷新, 影响考生答题;

(4) 答案传往服务器端时, 考生必须等待;

(5) 服务器的负荷较重, 性能受到了影响。

B/S模式的在线考试系统部署成本低、结构简单, 且系统易于维护和升级。然而, 传统的系统可能要求多次提取网页来完成一项事务处理, 这导致了用户体验较差;此外, 传统的系统是基于页面的以服务器为中心的数据传递模型, 这种模型下, 频繁的批量数据交互会导致较长的等待时间和较重的网络负荷。

1 Ajax技术简介及其优势

Ajax是一种Web应用程序开发的手段, Ajax技术组成包含XMLHttp Request, DOM, XML, Java Script, XHTML, CSS和XSLT技术, Ajax是这几种技术按一定方式组合在一起协同发挥作用的。Ajax采用XMLHttp Request对象与Web服务器异步通信, 利用DOM动态更新Web页面, 数据的更新不必打断用户交互流程, 用户在向服务器发出请求后仍可继续其他操作而不必等待服务器的响应。在这一模式下, 页面自动加载服务器端的应答信息, 避免了等待过程, 异步模式能有效改善用户的体验, 它优于同步交互模式。

Ajax的工作原理是:用户在Web界面上的一个操作触发了一个HTTP请求到服务器, 服务器进行处理, 之后再将数据返回给浏览器端, 浏览器通过DOM对象局布更新页面内容。在基于Ajax的应用系统中, 用户的HTTP请求被Ajax引擎处理, 用户不必等待处理请求的过程, 可以继续其他操作, 用户的操作与服务器的处理实现了异步化。

2 Ajax技术的特点及其流程

Ajax适合于基于表单的简单交互、自动更新页面信息、多级联动菜单等交互数据量小的场合, 其技术特点是:

(1) 请求提交后无需等待服务器的响应, 实现了Web应用的异步性。

(2) Ajax引擎具有一定的数据处理能力, 基于Ajax的异步Web应用是基于应用程序的模式。

(3) 利用DOM可以局布更新页面, Ajax能够实现一种按需求的资源获取和数据传递, 它能有效降低带宽需求和服务器负担。

(4) 充分利用了客户端的计算能力。

使用Ajax的典型流程是:1) 创建XMLHttprequest对象;2) 利用XMLHttp Request对象向服务器发出异步请求;3) 调用回调函数处理服务器的响应信息。

现在也有很多成熟的A j a x框架, 如D W R (D i r e c t W e b Remoting) 、微软公司的ASP.NET Ajax等, 它们封装了底层实现, 能提高Ajax程序开发效率。

3 服务器端程序设计的变化

由于采用Ajax技术, 使得服务器端的工作量大大减少, 控制页面外观及布局的工作从服务器端转嫁到了客户端。服务器端只需返回客户端所需的一定格式的数据即可, 其余的工作全部由客户端完成。这样, 大大减小了服务器端的负荷, 服务器端数据量的减少, 又可以加快数据在网络上传输的速度。同时, 在客户端, 由于只返回了需要的数据, 而不需要整个页面的重载, 因此用户感觉不到屏幕的刷新过程, 用户拥有了较好的体验。可以说Ajax技术为Web开发带来了革命性的变化。

服务器端程序主要用来接收客户端请求, 与数据库服务器进行通信, 并将从数据库中查询到的数据以和客户端约定的某种方式返回给客户端。程序中可以利用XLHttp Request对象的response Text属性获得服务器返回的文本, 并且以带一定格式的字符串的形式返回给客户端, 客户端收到这串字符后, 再以约定的方式进行处理。服务器端程序用到的程序功能主要是查询数据库操作。

4 结语

在使用Ajax技术后, 运行在线考试系统的服务器的负担将减轻、网络流量也能显著减小、用户等待时间缩短、体验更好。此外, 基于Ajax技术的系统采用XML作为数据的载体, 通过DOM解析服务器响应数据并表现出来, 进一步促进了页面呈现和数据的分离、有利于设计人员的分工合作、减少页面的修改可能引起的Web应用程序错误, 从而提高应用程序开发效率。

参考文献

[1]于鹏.网页设计语言教程 (HTML/CSS) [M].北京:电子工业出版社, 2003.

[2]胡崧.最新HTML&CSS标准教程[M].北京:中国青年出版社, 2003.

[3]袁建洲, 尹品.JavaScript编程宝典[M].北京:电子工业出版社, 2006.

AJAX技术应用 篇8

关健词:AJAX;WebGIS;权限管理系统

中图分类号:TP311.52 文献标识码:A文章编号:1007-9599 (2010) 04-0000-03

Design&Implementation of WebGIS Access Control System Based on NET&AJAX

Zhong Weixiong

(China Geosciences University,Information Engineering College, Wuhan430074,China)

Abstract:This article has elaborated in detail the whole process of how to design and realize the Access Control system under the .NET platform using the AJAX technic,including the site verification mode,the site login way,the Access Control management's database design,the Access Control navigation tree's design,the interface of Access Control management’s design and so on. The author also has proposed the different methods for each step,and contrasted various methods good and bad points, in order to seeking one kind the Access Control system which is most suitable for WebGIS application, in aspects such as security, flexibility, integrity,maintainability and so on.

Keywords:AJAX;WebGIS;Access Control System

GIS是一门集计算机科学、信息科学、现代地理学、测绘遥感学、地图学、环境科学、城市科学、空间科学和管理科学等为一体的新兴学科[2],WebGIS是Internet技术应用于GIS开发的产物[3]。由于GIS的地理底图数据和属性数据本身就涉及到安全与机密问题,加上Internet这个复杂的环境,使得WebGIS的网络安全和权限管理显得尤为重要,另外GIS应用的特殊性,在权限管理系统的设计和实现上也有其特殊的要求。

一、站点验证方式

.NET框架下,ASP.NET提供了四种用户验证方式:Windows身份验证(Windows)、窗口身份验证(Forms)、Passport验证(Passport)以及IIS身份验证(None)[4]。对比四种验证方式,在WebGIS应用下,最适用的就是Forms验证方式。该方式在虚拟目录的web.config文件中设置,具体如下:

首先,指定应用程序或目录的验证类型:

然后,设置禁止所有非登陆用户访问:

最后,再设置非登陆用户可以访问的个别目录或文件:

至此,站点的验证方式就设置好了,但是这只是第一步。

二、站点登陆方式与设计

站点登陆采用单点登录(Single Sign On)方式,单点登陆简称SSO,是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制[5]。单点登录采用用户认证凭证ticket,ticket合法则通过验证,这样用户可以在不再次登陆的情况下访问本系统的其它系统。具体设置简介如下:

FormsAuthenticationTicket Ticket = new FormsAuthenticationTicket(1, 用户名,时刻,时间,

false,角色名,"/");//创建一个ticket

string HashTicket = FormsAuthentication.Encrypt(Ticket);//对该ticket进行加密

HttpCookie UserCookie = new HttpCookie(FormsAuthentication.FormsCookieName,

HashTicket);//新建一个cookie

Context.Response.Cookies.Add(UserCookie);//将该cookie写入Response

登陆界面的设计有两种方式,一种是直接利用asp.net自带的登陆控件,这种控件直接集成了用户注册,登陆,忘记密码,登陆后根据权限的不同而显示不同的页面等功能。另一种方式是自己编写组合登陆控件。显然,前一种方式编写容易,但不够灵活,不能满足具体的需求,后一种方式是我要重点介绍的。

在站点登陆里,从安全角度考虑,我们必须设置验证码验证,以防止机器软件注册登陆;从用户体验角度考虑,我们必须使用AJAX技术,给用户即时提示而不刷新页面。如图1所示,2JPN验证码是在后台用C#随机生成的图片,防止机器狗注册和登陆。而根据用户输入不同的内容给出不同的即时提示如“用户名长度不对”等,以及当信息没填完整时登陆按钮是发灰的,都是采用的AJAX技术,用来增强用户体验。

图1使用AJAX技术和验证码的站点登录

三、权限管理设计

权限管理,我们采用windows系统经典的用户、角色、权限方式。可以简单表述为:判断“Who对What(Which)进行How的操作”[6]。即每个用户都属于某个或多个角色,每个角色都拥有一个或多个权限。把它想象成单位的人员管理,即每个员工都属于某个或多个部门,每个部门都拥有一个或多个权利,就很好理解了。

.NET框架下,实现用户、角色、权限的权限管理有两种方式:

一是采用asp.net中新引进的框架membership,利用Web站点管理工具来创建新的用户和角色,以及控制对Web应用程序中页面的访问。使用该工具能使不具备编程技巧的用户都可以方便地通过拖拉控件来配置Web应用程序,再加以少量的代码,就可以完全实现对用户、角色、权限等的管理。这一种方式有其致命的缺点,就是数据库必须用SqlServer,而且角色和权限的配置也不能完全满足WebGIS的应用。

另一种是自行建库,自行编码。该方式可扩展性好,适合任何数据库,可以完全满足WebGIS权限管理的要求。该方式的实现如下:

(一)数据库设计

在数据库中建立五个表,其中三个信息表:用户表(User)、角色表(Role)、权限表(Module);两个关系表:用户角色表(UserRole)、角色权限表(RoleModule)。如图2所示。

图2权限管理系统的数据库表

(二)登陆后跳转的页面:获取已登陆的用户名,并转换为相应的角色名。代码如下:

userName = Context.User.Identity.Name;//获取当前已登陆用户的用户名

roleName = userRole.UserID2RoleName(userName);//查询数据库UserRole表,获取角色名

(三)权限设置导航树:对相应的角色进行权限的控制

对于通常的应用,我们可以直接查询数据库表RoleModule获得角色和权限的对应关系,但对于WebGIS应用的特殊性,可以采用更为直观的方式,即采用XML文件方式:将地图数据资源的名称以树节点的形式存储在XML文件中,通过更改和读取该XML文件的每个树节点的角色子节点的值,达到更改和获得该节点的权限值。如:

-

DRG.ICO //节点图标

$[ConfigRoot]弹出菜单专题图菜单.xml

GDBP://sde:sde@NFGIS/SDE/sfcls/SDE.BOUNT_WL //对应数据文件

100 //最小显示的比例尺

800000 //最大显示的比例尺

高级注册用户 //“高级注册用户”角色有查看该节点的权利

这样,可以直观的对某个角色值赋予是否拥有导航树节点上任意节点的权力。如图3所示,我们选中角色“测试员0512”后,再在导航树上选中roalk.wl、roalk.wt、roalk_hig.wl节点,点击确定后即给角色“测试员0512”赋予了拥有roalk.wl、roalk.wt、roalk_hig.wl节点的权限值。

对于节点树的构造,我们推荐使用AJAX方式动态构造,这样的好处是,点击某个节点展开其子节点时,页面不刷新,即提高了效率,又增强了用户体验[7]。

图3权限设置导航树

四、权限管理界面

权限管理界面是为超级管理员对各种用户、角色、权限、用户角色、角色权限进行任意增、删、改、查询等操作提供的一个可视化管理界面。如图4所示。至此,一个完整的权限管理系统就呈现出来了。

图4权限管理界面

五、结束语

GIS的地理底图数据和属性数据本身就涉及到安全与机密问题,加上Internet这个复杂的环境,WebGIS的网络安全和权限管理显得尤为重要。本文探讨的基于.NET和AJAX的WebGIS权限管理系统适用于绝大部分WebGIS应用,可以将该系统成熟之后提取出来,作为一个公用的模块,这样,在以后实际的项目开发中可以复用该模块,避免重复开发,节省开发成本。

参考文献:

[1]宋振.基于角色和任务的权限管理扩展模型研究及应用[D].中国优秀硕士学位论文全文数据库,2008,11

[2]吴信才.地理信息系统原理与方法[M].北京:电子工业出版社,2002

[3]黄颖._NET和VML及脚本技术在WebGIS系统地图文档显示中的应用[J].测绘科学,2006,(7):130-132

[4]王勇,尹凡,雷俊.ASP.NET两种身份验证方式及比较[J].电脑知识与技术(学术交流),2007,1(4)

[5]http://baike.baidu.com/view/809410.htm?fr=ala0_1

[6]http://www.jdon.com/jivejdon/thread/7309

[7]彭建伟.Ajax技术在WebGIS中的应用研究[D].中国优秀硕士学位论文全文数据库,2008,(02)

作者简介:钟伟雄(1978-),男(汉族),湖北仙桃人,硕士生研究生,专业:地图制图学与地理信息工程,主要研究方向:WebGIS。

选择你的Ajax框架网页设计 篇9

现在的问题是,面对繁荣的Ajax框架市场,哪一个才是开发者自己最最需要的呢?尤其面对这么多各具特色和威力的框架。这也不是第一次在InfoQ讨论了,但开发者不同的选择视角和标准仍然可以在众多Ajax框架不断推陈出新的过程中,帮助到更多的人。

Matt Raible在为自己的team选择Ajax框架时,挑选了Dojo、ExtJS、GWT和YUI进行了对比,利用一套特定标准的权重值和每个框架的得分,总结出了如下的矩阵图:

从而得出GWT对于team的开发要求来说,是最好的选择,

而来自Athenz的Jim Briggs为我们创建一个网站Ajax框架决策中心:

我创建了这个网站,它可以让任何人评估和选择Ajax或者RIA框架,从而最满足自己的需要。这个中心包含100多个需求模型和工具来对不同的框架分级、对比和评估。还有35页的内容指导框架的需求和特性。

任何人都可以发布对框架的评估,厂商也可以发布产品的信息。这些都是免费的。

这个决策中心不会消除选择过程中的困难,但它提供了一种方法,来帮助你作出正确而公正的选择,并且不会后悔。

框架的选择是对产品应用开发的一笔不可忽视的投资,细则的考量和讲究,决定着开发者的体验、效率,更影响系统的扩展性及后期的维护升级成本。

AJAX技术应用 篇10

在传统的考试系统中,由于大多数的考试系统都是C/S结构的,监考系统通过常规的测试“心跳线”技术,可以得到考试计算机的状态信息,对考试机进行监视,通过在客户机上安装控制功能模块,对考试计算机进行控制,实现强制交卷、更换计算机等在线考试监考功能。在Web环境下,监考就显得较为复杂,虽然通过ActiveX技术[1],可以实现部分C/S结构的功能,但使用过程中增加的复杂性和程序兼容性等因素,使得Web考试系统的监考较为困难。目前许多Web考试系统对监考的处理只限于监考考务管理方面[2,3]以及考场秩序监控[4],以及其他方面如考场编排等方面[5,6]保证网络考试的公平,而对考试过程的计算机监控方面则很少提及。在我们开发题库和考试系统的过程中,对此问题进行了研究。下面对Web考试系统中监考功能的研究和实现方法作一介绍。

Web考试系统的监考模块功能主要有以下几方面:

(1) 更换计算机

考试过程中,考试系统不允许用户随意更换计算机,目的是防止替考,即通过登录其他用户信息,替其他用户答题,但如果考生计算机出现问题,则监考系统应该允许更换计算机。

(2) 重新抽题

如果考试系统设置了每台考试机抽取不同试题的条件,则在开始考试指令下达后考试系统才抽取试题。为了避免抽题的过程中出现死循环,影响系统运行,有时抽出的试题会不太完整,对这类情况,应该允许重新抽题,但为了避免考生随意重新抽题,考试系统是不允许重新抽题的,因此监考系统就应该提供允许重新抽题的功能。

(3) 强制交卷

正常考试时,考试系统只有到了考试规定的时间,才会强制考生交卷,在实际考试过程中,因为各种原因可能会强制部分或全部考生提前交卷,监考系统就应该能实现这个功能。

1在Web环境下监考系统的技术方法

在Web环境下,由于浏览器的限制,有些在C/S结构下非常容易实现的功能在B/S下较难实现。经过多次比较,我们采用了Ajax技术,将客户信息反馈到服务器,监考程序通过分析和处理这些信息,实现对客户机的监视功能。

Ajax是指异步JavaScript及XML。它是一种在2005年由Google推广开来的编程模式。它并不是一种新的编程语言,而是一种使用现有标准的新方法[7,8]。通过Ajax,可以创建更好、更快以及更友好的 Web 应用程序[9]。

在传统的 JavaScript 编程中,假如从服务器上的文件或数据库中得到任何信息,或者向服务器发送信息的话,就必须利用一个HTML表单向服务器GET或POST数据。而用户则需要通过“提交”来发送/获取信息,等待服务器的响应,然后一张新的页面会加载结果。由于每当用户提交输入后服务器都会返回一张新的页面,传统的 Web 应用程序变得运行缓慢,且越来越不友好。通过利用Ajax,JavaScript会通过JavaScript的 XMLHttpRequest对象,直接与服务器来通信。

通过使用 HTTP 请求,Web页面可向服务器进行请求,并得到来自服务器的响应,而不加载页面。用户可以停留在同一个页面,不会注意到脚本在后台请求过页面,或向服务器发送过数据。

使用前,需要先建立XMLHttpRequest对象:

使用时,通过xmlHttp=GetXmlHttpObject()来调用即可。

2Web考试过程中监考功能的实现

监考系统目前主要实现的功能为更换考生计算机、重新抽题和强制交卷,如图1所示。

由于监考计算机的浏览器无法与考试机的浏览器之间直接进行通信,因此,采取了考试机定时向服务器发送考试机信息的方式来实现监考机与考试机的通信,图2中列出了在线考试系统考试过程的流程。

从图中可以看出:

• 更换考试计算机功能,可以通过清除用户登录信息实现;

• 重新抽题功能,可以通过清除组卷信息实现;

• 强制交卷功能,可以通过修改考试限定时间或考试已用时实现。

下面是实现更换计算机、重新抽题及强制交卷等功能的主要代码,具体实现过程如下:

页面中调用执行监考操作(jkopp)的PHP程序,在其中通过onclick=‘jkopp (pa1,pa2)’将操作内容传入JS的函数中。pa1中的1表示更换计算机,2表示重新抽题,3表示强制交卷;pa2表示被操作的考生ID。

在服务器端的PHP程序中,实现对数据库的更新。当然服务器端也可以通过直接接收q1、q2,在服务器端生成更新数据库的程序,也就是将jkopp函数中的switch部分移到服务器端的PHP程序中实现。

3结语

该监考系统在我院的题库及考试系统中运行证明是可行的,基本实现了Web考试对监考系统的要求。由于监考机与考试机之间的通信是通过服务器的数据库信息实现的,在实时性方面存在一定问题,比如强制交卷功能在最坏的情况下60秒后才能执行(考试机与服务器通信的时间间隔)。通过实践验证,这种方法的性能是可以接受的。至于系统实时性的问题,可以通过调整考试机刷新时间来提高。监考系统还有很多功能,也可以通过上面的方法来实现。

参考文献

[1]刘立峻.基于ActiveX控件的Internet功能实现[J].武汉工业学院学报,2004(2).

[2]马晓丹,关海鸥.基于Web技术的高校监考安排系统的设计与应用[J].佳木斯大学学报:自然科学版,2009(3).

[3]吕鸣.网上考试系统的设计与实现[D].复旦大学,2009.

[4]拓守恒.基于Flex与J2EE多层架构的RIA智能网络考试系统的设计与实现[J].电脑开发与应用,2010(3).

[5]游兰菊.考试及成绩管理过程中的防协同作弊技术及其应用[D].华东师范大学,2008.

[6]王琪.通用网络考试平台安全机制的研究[D].西安理工大学,2009.

[7]王嘉.Ajax经典案例开发大全[M].北京:清华大学出版社,2007.

[8]周旋,王丽芳,蒋泽军.基于Ajax的即时消息系统的设计与实现[J].科学技术与工程,2009(2).

上一篇:反应谱抗震下一篇:有效激活语文课堂教学