Ajax在图书馆网站中的应用与实践，本文主要内容关键词为：图书馆论文,网站论文,Ajax论文，此文献不代表本站观点，内容供学术参考，文章仅供参考阅读下载。
1 引言
2005年，Michael E.Casey在其个人网站中首次提出了Library 2.0这一概念[1]。之后不久，国内图书馆对Blog、RSS、Wiki等社会软件的应用与实践也随之全面展开。虽然这种时尚的Web2.0元素代表了一种观念，一种创新，延伸了图书馆对读者的服务，但我们注意到大部分的网站除了新增一些上述应用外，网页主要还是以原来的方式(Web1.0)呈现，读者的每一次请求都需要服务器返回一个完整的Html页面。同时也没有给予用户很好的应用体验——当服务器在处理数据的时候，用户则处于等待的状态。然而，这些具有丰富内容的原有栏目，不仅是以图书馆书目数据、二次文献和其他数字资源库的服务为基础，是我们图书馆的强项[2]，而且也是它们首先吸引了读者来利用图书馆的网页，并拥有较多的核心用户。因此，寻找一个结合点，通过运用Web2.0的核心技术Ajax，来优化网站的栏目、页面，从而带动传统(Web1.0)网站的转身，以便读者更加方便的查找和浏览感兴趣的内容，同时也能让读者感受全新的应用体验及交互操作，减少用户界面的响应时间和用户心理等待时间，逐步实现其与Web2.0的融合。
2 理论依据、目标及方法
Ajax，Web 2.0核心技术之一，基于XML的异步JavaScript，包含了基于XHTML和CSS标准的表示、使用Document Object Model进行动态显示和交互、使用XMLHttpRequest与服务器进行异步通信以及使用JavaScript绑定一切。它可以将笨拙的Web界面转化成交互性的Ajax应用程序。它采用客户端脚本与Web服务器交换数据。因此，不必采用会中断交互的完整页面刷新，就可以动态地更新Web页面。使用Ajax，可以创建更加丰富、更加动态的Web用户界面，其即时性与可用性甚至能够接近本机桌面应用程序[3]。Ajax的应用也使网站的交互性、反应速度、柔性提升到了一个新的层次，同时也为应用程序的发展指明了方向。
实际上，Ajax利用了一种中间的媒介(Ajax引擎)消除了用户和服务器交互间的等待。这就像在传统的Web模型中加入了一层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利用其闲置的处理能力来处理，减轻服务器和带宽的负担，从而降低响应时间。传统发生HTTP请求的模式被js调用Ajax引擎所替代，所有的响应不再需要服务器返回，Ajax自己就可以操作。如果Ajax引擎需要服务器响应，它会异步向服务器发出请求，不会再出现等待的情况。
另外，通过Ajax的应用，实现了页面呈现和数据的分离(Web中的界面与应用分离)。同时也使网站更加方便地调用外部数据，以便图书馆可以对一些XML、RSS等文档进行二次加工，实现数据整合或者开发应用。
应用是在IIS基础上建立PHP应用环境，针对图书馆网站的特点，运用开源的Ajax框架，如JQuery、Mootools、Ext等，以及对一些Ajax应用资源的源码，或借鉴其精髓编写网页程序，或修改其模块、扩展其功能后放入自己的代码中使用，或对其进行符合需求的二次开发，来增加图书馆网站在Web2.0运用方面的主动性、灵活性。在节省运用成本的同时，更能带来技术上的保障。
3 Ajax在图书馆网站中的应用实例
3.1 Web桌面风格的首页
Ext基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML为交换格式，使得服务端表示层的负荷真正减轻，从而达到客户端RIA应用。Ext初次载入时速度较慢，加上界面都要重新开发，无法直接把传统网站中的应用集成进去，因此这里采用其发布包中的Web桌面风格的导航方式Desktop demo[4]，按单页面按需加载js的方法，作为网站首页的应用界面，保证主页打开速度以及整合以前的应用。
Desktop demo具有windows桌面快捷方式，窗口可以在桌面上最大化、最小化，也可以可拖放。通过桌面底部任务栏左边的“开始(导航)”菜单(支持多级菜单)，打开栏目的网页。点击任务栏中的任务条，可以激活、隐藏、切换窗口(图1)。部分主要代码如下：
(1)定义创建对象(“导航”菜单中的栏目)
图 1
3.2 Form(表单)提交
基于Ajax技术的表单提交，集中了其全部理念。这里通过用户登录来阐述Ajax在Form(表单)提交中的应用。表单样式由懒人图库提供[5]。
(1)用户登录时的数据校验
异步处理用户请求，用户填写完一个文本框后，在该文本框失去焦点的同时，会异步地完成同服务器的交互，提示校验信息。过程中不需要弹出新窗口，也不需要将整个页面提交到服务器，快速又不加重服务器负担。
(2)用户登录身份验证和Web页面局部刷新
B/S模式下，通过应用Ajax技术，实现类似于C/S模式的UI，请求的结果不需要对整个页面进行刷新，只改变部分页面，即用户登录入的结果马上就能在同一界面显示。图2中，“登录成功”的提示显示在登录框的上方。关闭子窗体的同时，实现父窗口的局部刷新。如在图1的右上角显示用户登录信息。部分主要代码如下：
①Web页面创建一个具有唯一id的独立区域(如id=“status”)，用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示)，同时在客户端中加入
④服务器端文件主要是对xmlhttp发送过来的数据进行判断，再由xmlhttp.responseText返回。
图 2
3.3 融入网页的RSS阅读器
RSS是站点间共享内容的一种简易方式(也叫聚合内容)。我们可以通过RSS阅读器，把订阅的最新的资讯“送”到用户的桌面。当内容更新时，其会自动接收，同时用户点击标题就能查看全文内容。因此它提供一种更为方便、高效的互联网信息发布和共享，使用户用更少的时间分享更多的信息。
融入网页的RSS阅读器，是一种内嵌于网页中运行的应用程序。它通过嵌入页面的Js把其他网站的RSS新闻整合到自己的网页，并通过CSS来控制它在页面中的各种表现形式。应用实例(图3中的专题Rss)采用dynamicdrive的gAjax RSS Feeds Displayer[6]。它使用Google提供的API，来跨域获取其他网站中的RSS feeds。它可以在一个容器中显示多个不同feeds，并通过参数的设置，来调整显示的条目数、格式，以及排序等，实现在网页上用自己的方式展示RSS feed。部分主要代码如下：
图3中的“整合财经”选项卡，聚合了和讯、中金在线、新浪的财经新闻(一个容器显示多个不同feeds)，并以发布时间排序。
图 3
通过被嵌入Js后的Div，可以在网页中实现不同的定位，如图3右下角的国内新闻。也可以悬浮在网页的两边。当然也能被工具条调用。
3.4 个性化网页布局
Web应用中，用户总是希望按照个人习惯、重点来调整网页中内容的位置，因此产生了基于Ajax技术的个性化网页布局。也就是读者可以在某个区域内拖动网页中的Div，实现内容的重新布局。Dragable RSS boxes[7]是一个非常优秀的可拖放Ajax RSS阅读器，页面效果类似于iGoogle个性化首页。它使用Ajax来读取外部RSS源的数据，并将它们显示在网页上一个可拖动的box中。图4是用户拖拽已显示凤凰网新闻的Div，并可在其中设置条目数、高度以及更新时间。
图 4
拖拽效果通过dragable-boxes.js来实现。其中numberOfColumns设置RSS boxes的列(栏)数。columnIndex设置输入RSS信息源Url后，在那一栏显示。maxRssItems设置RSS boxes中的最多条目数，如果省略将显示所有的条目(100条内)。
3.5 级联菜单
Ajax技术实现的级联菜单，未显示的数据只有在菜单变更触发新的事件时才会去调用xml数据并获取。一旦获取便可以缓存下来，因此减少了数据下载总量，而且页面不用重载全部内容，只需更新部分数据即可。
应用实例汇集图书馆网站中的各个搜索页面(如各种数据库、图书、期刊、站内各栏目内容等)，通过Ajax中的XmlHttp，读取后台数据库，用JavaScrip+DOM处理事务逻辑，实现一个三级联动菜单。最后用innerHTML属性实现定位，不需刷新就能显示指定的搜索框，并在其失去焦点时，为用户提供“suggest”(搜索建议)。为说明此应用，我们在一个页面中打开二个搜索窗口，见图5，可以看到根据不同选择显示不同的搜索框及“suggest”。部分主要代码如下：
客户端：
图 5
3.6 标签(tab)导航
应用Ajax的标签导航，其内容可以通过服务端，或者Ajax请求来生成。页面仅呈现用户激活(点击标签)的那一部分内容，用户没有点击的Tab页将不会获取信息(节省服务器资源)。同时它还能更快、更方便地在多个页面进行无刷新切换，显示相应的分类内容，节省浏览等待、换页时间。
图2、3的右下角显示基于MooTools的MooTabs[8]，用户可以很方便地切换最新的国内新闻(由外部提供的Rss新闻)与馆内通知。MooTabs的外观变化很容易实现，修改基本的CSS与Javascript中的mootabs对象参数，就可完成满足网站独特需求。部分主要代码如下：
initTabs(Array(‘整合财经’，‘和讯’，‘中金在线’，‘新浪’)，1，500，400)；
＜/script＞
3.7 内容扩展
实例通过一个简单的jQuery插件在问题解答栏目中的应用，来控制页面文字的显示或隐藏。当触发事件时，在同一位置扩展更多详细内容[10]。页面中，用户只要点击问题后的“[...]”，就会显示隐藏对象(详细解答)。扩展的文字之后是重新隐藏对象“[^]”的链接，如图6。部分主要代码如下：
图 6
基于Ajax的内容扩展，除上述应用外，还有很多。如Ajax tooltip，当用户将鼠标指针暂停、点击在目标元素上时，会弹出提示窗口。如图7中二个实例，其中分类目录是连接数据库的动态提示。还有基于mootools的mooSlide(如图2)下拉框。Accordion折叠效果，如图1中的网络报刊窗口。
图 7
4 结语
Ajax技术改变了传统Web应用以及可以带给访问者完全不同的浏览感受，提高用户操作体验，提升网页响应速度，推动了数字化图书馆的建设，有许多优点。但我们也发现其存在一些问题，主要是浏览器的兼容性、字符集的支持、搜索引擎支持以及js运行速度等。这些都有待今后进一步的解决。
本文中的应用实例，是对一些Ajax主流框架以及较多的应用资源的试验性实践。在实际应用中，应需要仔细的规划、信息架构和用户体验设计，选定一到二种既可，以免滥用。同时，在应用中应仔细了解这些免费的，或者开放的、自由的源码是基于哪种许可协议条款，是否有条件限制，避免产生侵权行为。