基于Ajax技术的虚拟阅览室的设计与实现

《基于Ajax技术的虚拟阅览室的设计与实现》由会员分享，可在线阅读，更多相关《基于Ajax技术的虚拟阅览室的设计与实现（38页珍藏版）》请在装配图网上搜索。

1、学 号 B060210011分类号本科生毕业论文（设计）题目： 基于Ajax技术的虚拟阅览室 院 （系） 专 业 班 级 学 生 姓 名 指导教师（职称） 提 交 时 间 基于Ajax技术的虚拟阅览室的设计与实现 (电子与信息工程系，725000)摘 要 网上图书馆主要是通过web形式，对整个图书展示工作书综合管理，使得管理统一、简便、快捷化。系统中主要运用数据库和Ajax中的各种技术可以对大量的数据进行条件检索、编辑，对全的所有图书馆将要订购的图书和现有的图书进行统一管理。本文首先对整个图书分类管理的结构、特点、应用范围进行了说明，在此基础上，利用Dreamvaver作为开发工具 ，以SQL

2、 Server2000作为数据库，进行了整个系统的开发。系统最终按照本系实际需求，开发出了具有网上图书阅览功能的虚拟阅览室。关键词 图书预览；Ajax异步访问；THE desigin and implementation of Virtual Reading Room AJAX-based (Department of Electronic and Information Engineering,)Abstract Online Library primarily through web forms, the books presentation of the integrated manag

3、ement of work, making management of uniform, simple, fast technology. The main use of the database system and Ajax in a variety of technology conditions on a large number of data retrieval, editing, on the whole of all libraries will want to order books and books available for unified management.Fir

4、stly, the entire management structure of book classification, characteristics, scope of application are described in this paper, using Dreamvaver as a development tool to SQL Server2000 as the database for the entire system development. System in accordance with the Department of the actual final de

5、mand, developed with online preview book features applications.Key Words Book Preview; AJAX Asynchronous access;目 录1 绪论21.1 引言21.2 网上图书馆的概述31.2.1 网上图书馆的概念31.2.1 网上图书馆的特点31.2.1 网上图书馆的发展历史42 AJAX技术简介72.1 AJAX的概念及相关技术72.1.1 XML HTTP Request92.1.2 DOM112.1.3 CSS122.1.4 XML132.2 AJAX的工作原理132.2.1 XMLHTTPR

6、equest142.2.2 JavaScript142.2.3 DOM Document Object Model142.2.4 XML152.2.5综合152.3 AJAX的应用162.3.1 表单驱动的交互162.3.2 深层次的树的导航162.3.3 快速的用户与用户间的交流响应172.3.4类似投票、yes/no等无关痛痒的场景172.3.5对数据进行过滤和操纵相关数据的场景172.2.6普通的文本输入提示和自动完成的场景173系统需求分析与设计173.1 可行性分析173.2需求分析173.2.1总体需求调查173.3系统目标194概要设计194.1 系统模块图194.1.1 图书管

7、理模块204.1.2用户管理模块详解204.1.3 管理员模块214.1.4 图书搜索页面215系统实现225.1数据库的详细设计225.1.1数据表设计225.1.2数据库访问235.2 系统各界面图及代码246 总结与展望27参考文献1致 谢1附件21 绪论1.1 引言 随着计算机技术、现代通讯技术、网络技术突飞猛进的发展，尤其是这些技术在文献出版和信息传播领域内的广泛应用，不经意间，使传统图书馆发生了翻天覆地的变化，这种变化虽然悄无声息，但却来势迅猛，触手可及。这种变化源于一种技术的发展和成熟，那就是数字化技术在图书馆的广泛应用，从而产生的数字图书馆。与传统图书馆相比，数字图书馆最突出的

8、特点是收藏数字化，操作电脑化，传递网络化，信息存储规范化，资源共享化、和结构连接化。这里数字图书馆已不再是传统意义上的图书馆了，而是一个综合性的信息资源中心。首先，在外延上，知识中心的信息来源不再局限于某一个图书馆，也不是所有的图书馆，而是所有的信息提供单位；其次，在内涵上，知识中心不再仅仅包括各种原始信息，而且更加重视对这些原始信息的筛选、组织和开发，从而产生了不同层次的加工产品。数字化图书馆最大的方便还在于利用上。首先，它不受时空的局限，无论天涯海角，无论白天晚上或者假日，只要借助一台上网的电脑，你便能够获取你所要的信息；其次是数字图书馆是以用户为中心，以追求用户利益最大化为主要特征，它让

9、读者以最小的代价，最简捷的获取方式，就能获得最丰富、最有价值的信息资料。当然数字图书馆的特点还远远不止这些。正因为数字图书馆能提供如此方便的服务，因此，目前国内各种类型的图书馆都在积极的建设或者筹建自己的数字化图书馆，以适应现代技术条件下图书馆自身发展的需要。从以上几个主要的特点可以知道，数字图书馆的最大特点在于读者利用的快捷和方便上，在于不同区域、不同馆的读者能利用其它地区、其它馆的数字化文献，也就是共享。但这种共享是有条件的，有许许多多客观、主观的因素在其中，必须解决好这些因素才能最大化的实现数字图书馆给我们带来的方便快捷的服务。1.2 网上图书馆的概述1.2.1 网上图书馆的概念传统图书

10、馆在数字化的过程中有一个清醒的认识，将传统的图书馆服务搬到网上去并不是数字图书馆，将馆藏资源进行大规模数字化后也并不一定是数字图书馆。传统图书馆在建设数字图书馆时要分清几个层次的问题，这几个层次涉及到电子图书馆、网上图书馆、虚拟图书馆等几个类似概念，许多文章把这些概念当作同义词，我们认为有必要把它们的不同侧重点表述出来，对我们建设数字图书馆有一定的帮助。 电子图书馆：侧重对收藏特色的概括，收藏品基本为电子读物，阅读手段一般通过电脑等。不强调提供网上信息或上网服务。网上图书馆：将一定量的信息在网上组织起来，供“读者”查阅和检索.这种网上图书馆不一定需要对应的图书馆社会实体,它也可以视为数字图书馆

11、的初级形态。虚拟图书馆:网上图书馆的别称,侧重其无实体的特征 1.2.1 网上图书馆的特点(1) 信息资源数字化 信息资源数字化是数字图书馆的基础，因为数字图书馆的其他特点都是建立在信息资源数字化的基础之上的，这也是数字图书馆与传统图书馆的最大区别。数字图书馆的本质特征就是利用现代信息技术和网络通信技术，将各类传统介质的文献进行压缩处理并转化为数字信息，以“1”和“0”来组成信息资源的单位，并组成无数个比特和字节的信息元素和单元，通过这种转换将所有信息统一为数字信息。 (2)信息传递网络化 在信息资源数字化的基础上，数字图书馆通过以网络为主的信息基础设施来实现。目前，数字图书馆正在通过由宽带网

12、组成的Internet以高速度、海量的计算机和网络系统将全球的图书馆和数以万计的计算机构成一个整体。信息传递网络化的特点也同时带来了跨时空、跨地域、开放性标准规范化的信息服务，从而使信息的传递达到全方位的信息交互。 (3) 信息利用共享化 数字图书馆在实现了信息资源数字化和信息传递的网络化之后，接下来是关于信息利用的共享问题。资源共享可以减少信息资源的重复采购，从而使有限的经费发挥最大的效益，提高知识资源的利用率。信息利用共享化是数字图书馆的一大特点，其共享化的广度与深度都得到了很大的发展，远远超过了传统图书馆在资源共享的利用程度。由于有了数字化与网络化的基础，数字图书馆的信息共享化充分体现出

13、了跨行业的资源无限，跨时空的服务无限的特征，同时也体现了跨地域、跨国界的资源共建的协作化与资源共享的便捷性。信息传递的网络化，理论上使全球的图书馆能够借助网络获取全部数字信息，以满足读者对知识信息日益增长的需求，原有的信息壁垒将会逐渐被开放的信息共享所取代。 (4) 信息提供的知识化 与传统图书馆的区别是数字图书馆正在实现由文献的提供向知识的提供的转变。数字图书馆将图书、期刊、图像资料、数据库、网页、多媒体资料等各类信息载体与信息来源在知识单元的基础上有机地组织起来，以动态分布式的方式为用户提供服务有什么优点（可否在答辩的时候解释的明白？）；而自动标引、元数据这些概念一定要了解,meta da

14、ta 、内容检索、不同数据库的互联等知识发现与组织的技术将成为数字图书馆发展的技术关键。数字图书馆信息提供的知识化，将会为广大读者提供多种满足不同需要的数据库。由于信息加工的智能化和检索系统的完备性，使数字图书馆能够为读者提供某一主题的各种知识信息。 (5)信息实体虚拟化 数字图书馆使实体图书馆与虚拟图书馆结合在一起，在实体图书馆的基础上趋向虚拟化。在网络环境下，以各类文献为载体的知识信息都可以方便地转化为数字形式，向世界各地传输。从而打破了单个图书馆的界限，使每个图书馆在虚拟化的大环境下成为一个整体的图书馆。1.2.1 网上图书馆的发展历史数字图书馆(Digital Library)是用数字

15、技术处理和存储各种图文并茂文献的图书馆，实质上是一种多媒体制作的分布式信息系统。它把各种不同载体、不同地理位置的信息资源用数字技术存贮，以便于跨越区域、面向对象的网络查询和传播。它涉及信息资源加工、存储、检索、传输和利用的全过程。传统图书馆收集、存储并重新组织信息，使读者能方便地查到他所想要的信息，同时跟踪读者使用情况，以保护信息提供者的权益。从数字图书馆角度来看，就是收集或创建数字化馆藏，把各种文献替换成计算机能识别的二进制系列图像，在安全保护、访问许可和记账服务等完善的权限处理之下，经授权的信息利用因特网的发布技术，实现全球共享。数字图书馆的建立将使人们在任何时间和地点通过网络获取所需的信

16、息变为现实，大大地促进资源的共享与利用。“数字图书馆”概念一经提出，就得到了世界广泛的关注，纷纷组织力量进行探讨、研究和开发，进行各种模型的试验。随着数字地球概念、技术、应用领域的发展，数字图书馆已成为数字地球家庭的成员，为信息高速公路提供必需的信息资源，是知识经济社会中主要的信息资源载体。“数字图书馆”从概念上讲可以理解为两个范畴：数字化图书馆和数字图书馆系统，涉及到两个工作内容：一是将纸质图书转化为电子版的数字图书；二是电子版图书的存储，交换，流通；国际上有许多组织为此做出了贡献；国内也有不少单位积极参与到数字图书馆的建设中来；中国国家数字图书馆标准是一个很重要的标准，它参照国际标准制定，

17、即可以与国际上标准兼容又具有中国特色；国图，北图等受国家标准化委员会委托专门成立了中国国家数字图书馆标准协会数字图书馆是一门全新的科学技术，也是一项全新的社会事业。简而言之，就是一种拥有多种媒体内容的数字化信息资源，能为用户方便、快捷地提供信息的高水平服务机制。虽然称之为“馆”，但并不是图书馆实体：它对应 于各种公共信息管理与传播的现实社会活动，表现为种种新型信息资源组织和信息传播服务。它借鉴图书馆的资源组织模式、借助计算机网络通讯等高新技术，以普遍存取人类知识为目标，创造性地运用知识分类和精准检索手段，有效地进行信息整序，使人们获取信息消费不受空间限制，很大程度上也不受时间限制。其服务是以知

18、识概念引导的方式，将文字、图像、声音等数字化信息，通过互联网传输，从而做到信息资源共享。每个拥有任何电脑终端的用户只要通过联网，登录相关数字图书馆的网站，都可以在任何时间、任何地点方便快捷地享用世界上任何一个“信息空间”的数字化信息资源。通俗地说，数字图书馆就是虚拟的、没有围墙的图书馆，是基于网络环境下共建共享的可扩展的知识网络系统，是超大规模的、分布式的、便于使用的、没有时空限制的、可以实现跨库无缝链接与智能检索的知识中心。数字图书馆既是完整的知识定位统，又是面向未来互联网发展的信息管理模式，可以广泛地应用于社会文化、终身教育、大众媒介、商业咨询、电子政务等一切社会组织的公众信息传播。 国内

19、外有代表性的定义美国研究图书馆协会（ARL）定义（1995）（学术图书馆：高校图书馆、科研图书馆）http:/www.arl.org 归纳了90年代前期流行的数字图书馆的各种定义中具有共性的五个要素：数字图书馆不是一个单一实体；数字图书馆需要链接许多信息资源的技术；多个数字图书馆及信息机构之间的链接对最终用户透明；全球范围存取数字图书馆与信息服务是一个目标；数字图书馆的收藏并不局限于文献的数字化替代品，还扩展到不能以印刷形式表示或传播的数字化人造品。美国数字图书馆联盟（DLF*）定义（1998）：（ DLF：美国一些主要的著名大学和重要图书馆联合成立的数字图书馆学术组织）数字图书馆是一个拥有专

20、业人员等相关资源的组织，该组织对数字式资源进行挑选、组织、提供智能化存取、翻译、传播、保持其完整性和永存性等工作，从而使得这些数字式资源能够快速且经济地被特定的用户或群体所利用。William Y. Arms定义*：数字图书馆是具有服务功能的整理过的信息收藏，其中信息以数字化格式存储并可通过网络存取。该定义的关键在于信息是整理过的。 高文的定义*：数字图书馆是以电子方式存储海量的多媒体信息并能对这些信息资源进行高效的操作，如插入、删除、修改、检索、提供访问接口的信息保护等。孙坦的定义*：从社会需求和技术条件分析，数字图书馆的核心和本质是利用现代信息技术，以计算机网络为基础平台，构建一个有利于产

21、生影响新知识的资源、工具和合作环境，这种作为环境的数字图书馆不仅仅局限于网络数字信息资源的开放利用，更是一个促进信息获取、传递、交流的知识网络。刘炜的定义*：数字图书馆是社会信息基础机构中信息资源的基本组织形式，这一形式满足分布式面向对象的信息查询的需要。分布式：跨地区、跨物理形态你这些引述似乎应该写成标注比较合适，很多人都不了解这些人是干什么的。面向对象：直接获取一次文献而不是获取一次文献的线索数字图书馆定义（国家图书馆）数字图书馆为国家信息基础设施提供关键性信息管理技术，同时提供其主要的信息库和资源库。换句话说，数字图书馆是国家信息基础设施的核心。数字图书馆定义 （大英图书馆）利用数字技术

22、获取、存储、存取、发布信息的图书馆。（综合定义）数字图书馆是对以数字化形式存在的信息进行收集、整理、保存、发布和利用的实体，其形式可以是具体的社会机构或组织，也可以是虚拟的网站或者任何数字信息资源集合。在计算机界也通常指与此相关的非常广泛的技术研究领域。数字图书馆的内容特征是数字化信息，结构特征是不论其资源组织或用户利用都可以通过网络进行分布式的管理和存取，并具有个性化、人性化和动态化特征。随着计算机和网络技术的研究和发展，数字图书馆正在从基于信息的处理和简单的人机界面逐步向智能化。2 AJAX技术简介2.1 AJAX的概念及相关技术AJAX全称为“Asynchronous JavaScrip

23、t and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。另外很多人对AJAX读音为阿甲克斯，正确读音应该为“ai jian ke si”（汉字拼音，其实应该是ai jai ke si ，但jai在汉字中没有此拼音）Ajax（Asynchronous JavaScript + XML）的定义基于web标准大小写一定要规范！（standards-based presentation）XHTML+CSS的表示；使用 DOM（Document Object Model）进行动态显示及交互；使用 XML 和 XSLT 进行数据交换及相关操作；使用 XMLHtt

24、pRequest 进行异步数据查询、检索；使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。这也应该是引述吧！类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla Firefox、I

25、nternet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.03的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是，2005年初，许多事件使得Ajax被大

26、众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由Ajax: A New Approach to Web Applications一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。AJAX前景非常乐观，可以提高系统性能，优化用户界面。AJAX现有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建，需要添加

27、AjaxControlToolkit.dll文件，可以在控件列表中出现相关控件，但如以往微软控件类似，属于鸡肋，灵活性较差。传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用J

28、avaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现

29、了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为4。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击

30、后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。进行Ajax开发时，网络延迟即用户发出请求到服务器发出响应之间的间隔需要慎重考虑。不给予用户明

31、确的回应 ，没有恰当的预读数据 ，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不欲看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容上面的章节应该是答辩的时候，好好发挥的地方！仔细整理一下。2.1.1 XML HTTP Request(1)XMLHttpRequest简介XMLHttpRequest，是我们得以实现异步通讯的根本。最早在IE 5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到

32、了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。这就使得Ajax有了今天如火如荼的发展。用XMLHttpRequest进行异步通讯，首先必须用JavaScript创建一个XMLHttpRequest对象实例。创建XMLHttpRequest对象实例的代码清单如下所示：var xmlHttp;function createXMLHttpRequest()if(window.ActiveXObject)xmlHttp = new ActiveXObject(Microsoft.XMLHTTP);else if(window.XMLHttpRequest)

33、xmlHttp = new XMLHttpRequest();可以看出，创建XMLHttpRequest对象相当容易。首先，声明一个全局变量xmlHttp用来保存即将创建的XMLHttpRequest对象的引用；然后，在createXMLHttpRequest()方法中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest 对象的实现方法不同，因此在创建时，通过一个分支语句进行判断。如果window.ActiveXObject调用返回true，则证明为IE浏览器，那么就通过传递“Microsoft.XMLHTTP”给ActiveXObject()来创建XMLHttpRequest

34、对象，否则就把XMLHttpRequest实现为本地JavaScript对象。XMLHttpRequest对象在不同浏览器上的实现是兼容的，所以可以用同样的方法访问XMLHttpRequest的方法和属性。表 1 标准XMLHttpRequest方法方 法说 明abort()getAllResponseHeader()getResponseHeader(Header)open(method, url)send(content)setRequestHeader(header, value)停止当前请求把HTTP请求的所有响应头部作为键/值对返回返回指定首部的串值建立对服务器的调用向服务器发送请求

35、把指定首部设置为所提供的值表 2 标准XMLHttpRequest属性属 性说 明onreadystatechangereadyStateresponseTextresponseXMLstatusstatusText每个状态改变都会触发这个事件处理器请求的状态：0未初始化，1正在加载，2已加载，3交互中，4完成服务器的响应，表示为一个文本字符串值服务器的响应，表示为一个XML服务器的HTTP状态码HTTP状态码的相应文本1 利用XMLHttpRequest对象发送简单请求创建了XMLHttpRequest对象，并了解了XMLHttpRequest对象的方法和属性之后，让我们来看看怎样利用XML

36、HttpRequest对象发送简单的请求。利用XMLHttpRequest对象发送简单请求的基本步骤如下：1） 创建XMLHttpRequest对象实例。2） 设定XMLHttpRequest对象的回调函数，利用onreadystatechange属性。3） 设定请求属性：设定HTTP方法（GET或POST）；设定目标URL。利用open()方法。将请求发送给服务器。利用send()方法。2.1.2 DOM文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是

37、，DOM把网页和脚本以及其他的编程语言联系了起来。脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。object这个词在台湾通常翻译成“物件”）。网页上的标签是一层层嵌套的，最外面的一层是，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了

38、根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中，每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。万维网协会（World Wide Web Consortium，W3C）已经给文档对象模型制定了一系列标准，并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外，还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也

39、就是说现在浏览器使用的技术历史由来纷繁复杂，有些人们普遍使用的DOM技术并无标准可依。我们将深入所有通用DOM的细节（包括IE浏览器中“与众不同”的某些技术），以全面掌握面向实践的技术。2.1.3 CSSCSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 它的作用可以达到：（1）在几乎所有的浏览器上都可以使用。 （2）以前一些

40、非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 （3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。 （4）你可以轻松地控制页面的布局 。 （5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。 想一想，没有使用CSS前我们是如何控制字体的颜色和大小以及所使用的字体的？我们一般使用HTML标签来实现，代码非常烦琐。很难想象，如果在一个页面里需要频繁地更替字体的颜色大小，最终生成的HTML代码的长度一定臃肿不堪

41、。说实话，CSS就是为了简化这样的工作诞生的，当然其功能决非这么简单。 CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。 式样单放在页面中，通过浏览器的解释执行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。生殖对一些非常老的浏览器，页不会产生页面混乱的现象。2.1.4 XML扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。 XML与Access,Oracle和SQL Server等数据库不同，数据库提供了更强有力的数据存储和分析

42、能力，例如：数据索引、排序、查找、相关一致性等，XML仅仅是展示数据。事实上XML与其他数据表现形式最大的不同是：他极其简单。这是一个看上去有点琐细的优点，但正是这点使XML与众不同。XML的简单使其易于在任何应用程序中读写数据，这使XML很快成为数据交换的唯一公共语言，虽然不同的应用软件也支持其它的数据交换格式，但不久之后他们都将支持XML，那就意味着程序可以更容易的与Windows、Mac OS, Linux以及其他平台下产生的信息结合，然后可以很容易加载XML数据到程序中并分析它，并以XML格式输出结果。2.2 AJAX的工作原理使用Ajax的主要原因:(1)通过适当的Ajax应用达到更

43、好的用户体验；(2)把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。 Ajax是Asynchronous JavaScript and XML的缩写。它包括使用XHTML和CSS标准化呈现;使用DOM实现动态显示和交互;使用XML和XSLT进行数据交换与处理;使用XMLHttpRequest进行异步数据读取;最后用JavaScript绑定和处理所有数据;工作原理Ajax的工作原理相当于在用户和服务器之间加了个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像些数据验证和数据

44、处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。 Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载（白屏）的等待。2.2.1 XMLHTTP

45、Request Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。XMLHttpRequest 对象方法描述 abort() 停止当前请求； getAllResponseHeaders() 作为字符串返问完整的headers ；getResponseHeader(headerLabel) 作为字符串返问单个的header标签 ；open(method,URL,asyncFlag,userName, password) 设置未决的请求的目标 URL, 方法, 和其他参数 ；send(con

46、tent) 发送请求setRequestHeader(label, value) 设置header并和请求一起发送 (post方法一定要 )；XMLHttpRequest 对象属性描述 onreadystatechange 状态改变的事件触发器，readyState 对象状态(integer):0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 responseText 服务器进程返回数据的文本版本 responseXML 服务器进程返回数据的兼容DOM的XML文档对象 responseBody 服务器返回的主题（非文本格式）responseStream 服务器返回

47、的数据status 服务器返回的状态码, 如：404 = 文件末找到 、200 =成功 statusText 服务器返回的状态文本信息 2.2.2 JavaScriptJavaScript是一在浏览器中大量使用的编程语言。2.2.3 DOM Document Object ModelDOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现（例如，document 就代表“文件本身“这个对像， table 对象则代表

48、HTML 的表格对象等等）。这些对象可以由当今大多数的浏览器以 Script 来取用。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据，这些数据被封在DOM（Document Object Model）中，DOM提供了网页中各个对象的读写的支持。2.2.4 XML可扩展的标记语言（Extensible Markup Language）具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。2.2.5综合Ajax引擎，实际上是一个比较复杂的JavaScript应用程序，用来处理用户请求，读写服务器和更改DOM内容。JavaScript的Ajax引擎读取信

49、息，并且互动地重写DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，这是我们一直在通过JavaScript和DOM在广泛使用的方法，但要使网页真正动态起来，不仅要内部的互动，还需要从外部获取数据，在以前，我们是让用户来输入数据并通过DOM来改变网页内容的，但现在，XMLHTTPRequest，可以让我们在不重载页面的情况下读写服务器上的数据，使用户的输入达到最少。Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），而在以前两者是没有清晰的界限的，数据与呈现分离的分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的

50、发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理。(1)应用Ajax理念的出现，揭开了无刷新更新页面时代的序幕，并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势。(2)Ajax的优势减轻服务器的负担。因为Ajax的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；无刷新更新页面，减少用户实际和心理等待时间；也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离）；2.3

51、 AJAX的应用HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。 JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应 用程序的通信。DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用div、span和其他动态 HTML 元素来标记 HTML。 文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。2.3.1 表单驱动的交互传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，

52、立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。2.3.2 深层次的树的导航 深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。我们以前的对级联菜单的处理多数是这样的： 为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性将级联菜单的所有数据全部读取出来并写入数组，然后根据用户的操作用 JavaScript来控制它的子集项目的呈现，这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行 操作或只

53、对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为冗余数据而浪费用户的资源，特别是在菜单结构复杂、数据量大的情况下（比如菜单有 很多级、每一级菜又有上百个项目），这种弊端就更为突出。如果在此案中应用Ajax后，结果就会有所改观： 在初始化页面时我们只读出它的第一级的所有数据并显示，在用户操作一级菜单其中一项时，会通过Ajax向后台请求当前一级项目所属的二级子菜单的所有数据，如 果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据，以此类推这样，用什么就取什么、用多少就取 多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不

54、用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了 用户等待时间，也把对资源的浪费降到最低。2.3.3 快速的用户与用户间的交流响应在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，Ajax是最好的选择。 2.3.4类似投票、yes/no等无关痛痒的场景对于类似这样的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，但是Ajax可以把时间控制在1秒之内，从而更多的用户会加入进来。 2.3.5对数据进行过滤和操纵相关数据的场景 对数

55、据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。2.2.6普通的文本输入提示和自动完成的场景 在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。 3系统需求分析与设计3.1 可行性分析本系统是基于Ajax技术的网上看书系统，主要是为了方便读者借阅参考书籍，和便于图书管理员方便管理电子图书而研发的。在

56、前面的论述中已经介绍了Ajax的优点，和在电子书籍管理中应用的优势。由此证明了研发此系统的价值和意义所在。3.2需求分析3.2.1总体需求调查在开发此系统之前我们对目前各大图书网站做了详细的了解。以大型书籍网站google图书和百度图书为例。首先看看图书搜索的首页，百度图书搜索显得有点简陋，但它刚起步，对它太过苛刻。而Google图书搜索那里，除了可以搜索所以的图书之外，还可以缩小搜索范围只搜索“可全文阅读的图书”或“国学图书”。 留意看Google图书搜索下面的“提供给出版商的信息”，点击进去里面的内容大概是一些与出版商合作的政策，以帮助出版商提高图书的销量。从而使到用户，出版商，Googl

57、e之间实现“三赢”。我们看看高级搜索的功能， 百度的高级搜索是相当简陋，和普通网页的高级搜索没什么分别。所以不截图说明了。而Google的高级搜索提供的搜索的确是“高级”了。图书来源：前面已经隐约透露到，百度图书搜索的信息来源大概是网上书城。在百度图书搜索帮助文件里是这样说的：百度图书搜索是百度与众多图书行业合作伙伴合作建立的图书信息查询平台。而Google图书搜索的来源是一些实实在在的书，在它的帮助文档里是这样描述的：Google 图书搜索中的图书主要有两个来源：出版商和图书馆。搜索结果由中国大陆出版图书提供。（本地化？）。计划目的：现在看来，百度图书搜索的目的是在中文网络里面提供一个图书介

58、绍的平台，使得用户能够大概了解书的内容和购买网站或地点。百度图书搜索只提供简单的几行字的对图书的描述。相比之下，Google的计划更要来的宏伟。按照它的话，它的图书搜索平台不但直接面向用户，还面向企业，或者说合作商，合作商可以登录设置自己的图书信息，决定是“完全共享”还是“半共享”书目。而且现在Google还有一个叫做“Google 图书馆计划”的图书共享计划。这对于我们一些经常看外文文献的人来说是个不错的计划。搜索结果页面：这是最重要的部分，前面说到，Google不但提供中文图书搜索，还有外文的。但百度只支持中文图书搜索。Google图书搜索的结果页面每本图书结果都有封面的截图，右方的图书信

59、息里还有作者的信息，搜索的关键字位于书的哪一页。最底一行是告诉用户该书是完全共享还是部分共享的。再来看看百度那边的搜索结果。可能是因为系统还没完善，有些书还没有封面图片。相比之下，百度图书结果页面没有提供作者信息。图书结果页面：我选择了两者都共有的书目：车神舒马赫(F1英雄传) 百度提供了图书的出版信息，还包括定价。然后就是书的内容提要。最后是购买这本书的地址。显然，百度不提供图书页面内容的搜索。也许是担心版权的问题。（试想为什么百度MP3搜索为什么只提供链接呢？） 而Google方面，显示的信息就丰富很多了。在左边，不但有该图书页面内容的预览（pdf），让搜索者可以阅读图书的部分内容（有些书

60、不提供完全共享，除非你购买），在右边，从上到下分别是内容摘要，目录（该书的目录），书名页，然后就是购买该书的地址链接。之后是链接到World Cat的“在图书馆中查找此书”的链接。再下方是提供一个搜索本书内容的搜索（相当于站内搜索）。最后当然要照顾出版商的感受：版权提供方的信息。点击内容摘要里的连接，可以看到更多关于该书的内容摘要，这里不作说明。自己尝试一下吧。最后，总结一下。百度图书搜索因为是刚刚起步，功能上未免会有或这或那的缺陷，但它为我们购买图书提供了很大的方便。简单的图书搜索用百度最好不过。而Google图书搜索不但为我们提供了购买图书的途径，还有图书页面的预览和页面内容搜索，这对我们

61、对要研究或购买的书进行比较大范围的了解提供了很大的帮助。另外，Google图书搜索的高级搜索功能也是相当值得称赞的。不管是哪个图书搜索引擎，最终目的都是为了满足用。3.3系统目标根据模型要求，我们应该实现的功能有：(1)登陆需要的基本信息，如管理员名称密码，用户的编号和密码等。(2)登陆时，用户的不同角色拥有不同的功能权限界面，如管理员可以对用户，角色，书籍的信息进行添加，删除，更新和查看；对用户和角色，角色和功能，连带责任等信息进行操作。一旦用户的角色和任务等被管理员授权后，用户则可以登陆到用户功能界面执行其任务。(3) 在本系统中管理员的工作量相当的大。不仅要对用户的信息 进行详细查看和筛

62、选，还要对书籍的分类，书籍相关的信息进行设置。(4) 本系统每个页面提供图书搜索功能。分为书名、作者、出版社三个关键项进行搜索。也有对书籍详细搜索。用户输入书籍的相关信息就可以找到，用户想要的书籍。(5)本系统提供在线申请成为用户。及对注册页面的相关信息验证。(6) 本系统还有统计在在线阅读排行榜。有效地吸引用户去看书。(7) 系统的设置，对系统中的一些参数的设置，比如对各模块功能的添加和删除。(8) 系统应该提供相应的使用帮助文档。4概要设计4.1 系统模块图图书预览模块网站首页图书管理模块会员操作模块管理员管理模块图书搜索模块系统总体模块图4.14.1.1 图书管理模块 包括添加书籍，删除书籍，修改书籍信息，对书籍的预览页面的设置，查看书籍信息等。本模块如图所示如下：图书管理模块书籍的添加、删除、分类书籍预览页面的设置图书的详细信息的添加 图书管理模块图4.2 4.1.2用户管理模块详解 用户管理模块中，用户通过注册成为会员后，可以对获得对书籍预览的权利。这样可以确保在图书留言中，会员文明用语，确保了用户在线操作的安全性。用户注册管理员审核注册成功图书预览图书评价及留言 用户管理模块图4.34.1.3 管理员模块 在管理员模块中，管理员扮演着重要的角色。管理员模块会员管理图书管理个人信息管理系统管理图书浏览页面管理