AJAX技术在江苏科技馆网站视频点播系统中的应用

摘要:作为Web 2.0的核心技术之一,AJAX(Asynchronous JavaScript + XML)由几种蓬勃发展的技术以新的强大方式组合而成,使用它可以构建更为动态和响应更灵敏的Web应用程序。该文主要研究了Web 2.0理论与AJAX的核心技术、设计模式、开发框架,并运用AJAX技术,完成了网站视频点播系统的设计与实现流程,着重给出了“视频点播系统”等重点模块的实现方法,解决了静态页面实现、页面局部刷新、自动完成、数据联动等关键问题,实现了提高带宽使用率、节省网络流量、改善用户体验等重要目标,并针对项目中的问题给出了系统的展望。

关键词:Web 2.0;AJAX;XML

中图分类号:TP393 文献标识码:A 文章编号:1009-3044(2010)10-2477-03

1 AJAX技术的研究背景与发展现状

随着Web技术发展,B/S结构越来越受到系统开发商的青睐。与C/S结构比较,B/S结构具有系统维护方便、支持广泛、跨平台的优点,所以B/S大有取代C/S之趋势。

B/S结构的系统与用户之间是一个同步交互的过程。在客户端,用户通过浏览器进行操作,向服务器发送一个HTTP请求;服务器端接收到用户的请求后,执行相应的操作,然后向客户端的用户返回响应结果,即一个HTML页面。这个过程是一种不连贯的用户体验,即在服务器处理用户请求的时候,用户大多数时间都处于等待的状态,浏览器上大多是一片空白。 当服务器负载比较小时,该种交互过程并无不妥。可是当服务器负载较大时,服务器响应用户的请求时间可能会大于1分钟甚至几分钟,这样长时间的等待服务器响应对于用户来说是难以接受的。甚至有时候用户长时间等待的却是服务器返回的一个服务超时的错误消息。另一方面,某些时候用户只是想改变页面中一小部分的数据,而在传统的B/S模式中实现时,浏览器仍然需要重新加载整个页面的数据。目前,软件设计越来越讲究人性化,上述不友好的用户体验与人性化的原则背道而驰。如果能够减少用户等待服务器响应的时间,就可以提高用户体验。目前,除了程序设计、编码优化和服务器调优等措施可以缩短用户的等待时间之外,还可以采用AJAX技术。随着Google Maps、Gmail的推出,AJAX正逐渐吸引全世界开发者的目光。

AJAX既是某种新的东西也是某种旧的东西――说它旧是因为它使用的已经是存在的一些技术,说它新是因为它以一种以前极少有人考虑过的方式组合使用这些已经存在的技术。AJAX技术有着深厚的理论基础和实践基础,它的背后有两个推动力:Web标准的成熟、软件可用性和交互设计理论的成熟,并且AJAX技术会随着这两方面理论和实践的发展而不断发展。可以认为AJAX就是Web标准和Web应用的可用性理论的集大成者,作为Web 2.0的核心技术之一,AJAX由几种蓬勃发展的技术以新的强大方式组合而成,使用它可以构建更为动态和响应更灵敏的Web应用程序。AJAX涉及到的关键技术包括JavaScript、XML、XSLT、CSS、DOM和XMLHttpRequest。其中XMLHttpRequest对象是AJAX的核心,该对象由浏览器中的JavaScript创建,负责在后台以异步的方式让客户端连接到服务器。这样,开发者通过使用这个强大的XMLHttpRequest对象,即可让一些需要服务器端参与的验证能够在用户不知不觉中进行。所以在广义上将AJAX定义为:基于标准Web技术创建的、能够以更少的响应时间带来更加丰富的用户体验的一类Web应用程序所使用的技术的集合。

2 AJAX技术在江苏科技馆网站视频点播系统中的实现

2.1 Web层的实现

Web层的实现核心是AJAX的流程实现与表示层的页面实现。在系统中,表示层的实现通过HTML+CSS与XML+XSLT页面布局和页面静态实现技术,其中以XML+XSLT技术作为系统的重点技术。

首先,是AJAX的实现流程:创建XMLHttpRequest对象打开需要异步调用的页面传递参数等待页面状态事件处理页面返回信息。如图1所示。

当前,很多人使用创建AJAX类库的方式来实现流程初始化,但经使用得出的结论是,虽然AJAX类库的方式可以减少JavaScript代码的编写量,但却不够灵活,不能很好地适用于较为复杂的应用项目。为更好地适应项目的需要,本系统采用了小框架的实例化AJAX实现流程函数,下面显示了这个流程函数的代码。

function createXMLHTTP()

{

var obj=null;

if(!window.XMLHttpRequest && window.ActiveXObject)

{

var versions=["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

for(i=0;i

{

try

{

obj=new ActiveXObject(versions[i]);

break;

}

catch(e)

{

}

}

}

else

obj=new XMLHttpRequest();

return obj;

}

function asynchronous(funcname,url,method,sendparams,getparams)

{

var obj=createXMLHTTP();

if(obj!=null)

{

obj.open(method,url,true);

var header="";

if(method=="POST")

header="application/x-www-form-urlencoded; charset=utf-8";

else

header="text/html; charset=utf-8";

obj.setRequestHeader("Content-Type",header);

obj.onreadystatechange=function ()

{

if(obj.readyState==4)

{

if(obj.status==200)

{

if(funcname!=null && funcname!="")

{

if(getparams==null || getparams=="")

eval(funcname+"(obj)");

else

eval(funcname+"(obj,getparams)");

}

}

else

alert(obj.responseText); // 返回错误信息

}

}

obj.send(sendparams);

}

}

2.2 业务逻辑层的实现

业务逻辑层是在数据层和表示层之间进行数据交换的桥梁,主要实现与数据之间的数据交换与处理。本系统业务逻辑层的实现核心是XML数据技术的应用,即通过中的System.XML对象和System.Data对象,与数据层实现数据交换,然后通过处理将其组织成特定格式的XML文件,以供表示层使用。

以科技影视点播服务模块中的影片信息页面的XML文件生成为例,影视数据的数据视图设计,如下。

Mediaid (int) 影片ID

Chinesename (varchar) 影片名

Language (varchar) 影片语言及字幕

Areaname (varchar) 影片所属区域,如国内、欧美等

Classname (varchar) 影片类别,如科教片、记录片等

Imgurl (varchar) 影片海报路径

Fileinterval (varchar) 影片时长

Description (ntext) 影片简介

Hitcount (int) 影片总点击次数

通过System.Data对象读出影视数据,并通过System.XML对象组织为XML文件,文件以Mediaid命名,实现了在服务器端的“data/media/”目录下,生成包含了“mediaid=1000001”的影片所有数据的1000001.xml文件。

2.3 数据层的实现

典型的数据层表现为某种类型的结构化关系数据库的存储与访问中间层。项目采用的MS SQL Server 2000数据库,利用表、视图、存储过程和计划任务来实现数据的重新组织。其中,视图将几个有关联的数据表组织在一起,避免了联合查询对资源的巨大消耗,提高了数据库的访问效率;存储过程通过预先编译并存储一组完成特定功能的SQL语句集,增强SQL语言的功能和灵活性,保证数据的安全性和完整性,减少网络的通信量;计划任务将定时启动存储过程,更新特定数据表定字段的数据,实现影片特定功能。因为数据层不是本文的研究重点,故在此不再深入描述。

2.4 重点功能的实现

视频点播服务模块实现的主体技术是基于HTML+CSS与XML+XSLT的页面布局与页面静态化处理。在页面构建方面,主要采用当前主流的基于XTHML标准的DIV+CSS标准化网页构建方式,以DIV代替了传统的TABLE定位方式,从结构、标签、排版等方式优化网页文件,以实现简化代码、提升网页打开速度的效果。而在与数据层的数据交互方面,则采用了核心的XML+XSLT技术,通过生成XML静态数据文件,通过XSLT格式文件展现到Web层,以进一步减少数据交互与程序运行所占用的资源,大大减轻服务器端压力。结合前面描述的系统实现流程,以影视信息内容页面为例,实现方法如下:

通过业务逻辑层生成的影片信息XML文件结构,如下代码。

1000001

厄尔尼诺与拉尼娜

……

与其对应的Web层的XSLT文件数据调用代码,如下。

影片类型:

影片地区:

……