疯狂Ajax讲义——Prototype/jQuery+DWR+Spring+Hibernate整合开发(含CD光盘1张)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-07-05 14:08:53

点击下载

作者:李刚

出版社:电子工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

疯狂Ajax讲义——Prototype/jQuery+DWR+Spring+Hibernate整合开发(含CD光盘1张)

疯狂Ajax讲义——Prototype/jQuery+DWR+Spring+Hibernate整合开发(含CD光盘1张)试读:

前言

Ajax技术已经不再是新技术,它已经成为企业开发中应用最广泛的技术之一,不管采用什么样的开发平台:Java EE也好,.NET也好,PHP也好,Ruby on Rails也好,只要开发B/S架构的应用,那么表现层就一定会使用Ajax技术。Ajax技术采用异步方式发送请求,避免了每个请求对应一个页面的模式,允许在一个页面发送多个请求,从而可以更大程度地利用已下载的页面,服务器每次响应生成的只是必需的数据,无须响应生成整个页面。对用户而言,发送异步请求不会阻塞当前的浏览器线程,浏览器可以继续下一步操作:比如继续浏览或再次发送异步请求。因此用户将不会处于等待状态,而是感觉自己一直与应用处于交互状态,从而带给了用户连续的体验。Ajax技术是Web 2.0的重要技术之一,互连网上各种Blog系统、RSS,以及Wiki系统和SNS交友网络等,都大量使用了Ajax技术。Ajax技术还催生了大量的网页游戏。国内的很多游戏运营商纷纷推出了自己的网页游戏。网页游戏具有无须下载、安装,即开即玩、简单便捷的特征,尤其对办公室上班族具有较大的吸引力,因此也具有很好的市场前景。在这种网页游戏中,每个网页上都包含了大量制作精美的图片,当游戏玩家单击、双击这些图片时,系统将采用Ajax技术与远程服务器通信,这是绝大部分网页游戏的底层运行机制。2007年出版的《基于J2EE的Ajax宝典》具有全面、专业的特征,书中不仅深入介绍了Ajax编程的底层原理和技术,还全面介绍了Prototype、Dojo、DWR、JSON-RPC-Java和AjaxTags等5个Ajax框架。不过,Dojo 版本更新太快,这一点限制了它在实际企业开发中的应用。本书作为《基于 J2EE的Ajax宝典》的第二版,详细介绍了XHTML、CSS、JavaScript、DOM和JavaScript事件机制等基础知识,重点分析了XMLHttpRequest对象的运行机制和运行原理。Ajax框架的介绍部分,Prototype、DWR、AjaxTags等框架升级到了最新版本,另外新增介绍了jQuery框架。本书的创作感言写一本书真的很累!每次一本书写到最后几章时,都会有一种近似虚脱的感觉。此外,如果还遭遇一些来自外界的困扰,就让人更加难以静下来做事。不过,笔者现在的主要职业是培训,需要不断地面对新的学生,有责任引导他们进入软件开发行业,这大概是支持自己继续写下去的一个动力吧。最初,笔者写书仅仅是为了作为笔者的培训教材,帮助自己的学生能更好地理解自己所讲授的内容,所以总是尽量使用清晰条理的方式来组织内容,用实用、易操作的实例来演示开发,用通俗易懂的语言进行表达。希望把实际企业开发中解决问题的方法,用通俗、简单的语言告诉学生。在本书创作过程中,笔者一度感到非常困惑:其实笔者这些书的学术价值真的很少,因为基本上没有什么创新,绝大部分都是前人的智慧。充其量,笔者只是进行了再归纳、总结,于是难免感到意兴阑珊。无聊中和一位美籍华人(一位资深CTO)在Skype上聊天,他告诉笔者:印度的程序员数量大概是中国程序员的100倍,因为印度有大量的程序员基数,所以就孕育出了大量优秀的程序员。中国人,虽然是世界上非常聪明的种族之一,但中国程序员太少了,所以中国产生的优秀程序员也很少。你写的书虽然没有什么创新,但只要能把实际软件开发的方法和经验传播开来,让更多的年轻人走进软件开发行业,你就为中国的软件开发业做出了贡献。如果有一天中国拥有1亿以上的软件开发工程师,那中国软件行业就真正发展起来了。那天之后,萧索的心情开始慢慢好转,毕竟自己还在做一件“切实爱国”的事情。笔者心想:爱国,不是光喊口号的事情,而是需要埋头做事的。本书有什么特点不知道是否有人仔细研究过笔者写的书,书中的长句是很少的——因为很多语句自己都会反复地调整,有兴趣的读者可以仔细体会一下这个特点。《基于J2EE的Ajax宝典》上市一年半了,其间收到不少读者来信,对书中内容也提了一些自己的见解。此外,该书也一直作为“疯狂Java实训营”的讲义,这些对本书的升级起到了很大的帮助。此外,本书还有如下特点:1.通俗易懂,适合自学该书第一版作为培训教材近2年了,在吸收大量学习者的学习体会和心得的基础上,本书重点讲解了学习过程中难以理解和掌握的知识点,降低了学习者的学习难度。2.知识丰富,内容全面正如该书的第一版,书中知识非常全面:XHTML、CSS、JavaScript、DOM、Event 机制、XMLHttpRequest、Prototype库、jQuery、DWR、AjaxTags等Ajax知识的相关内容,都可在本书中找到详细的讲解。3.深入实用,实践性强本书并不是一本 Ajax 的入门图书,本书将 Ajax 技术融入轻量级 Java EE 开发,深入介绍了Ajax+Java EE整合开发的方法和步骤,对实际企业开发具有极好的指导意义。衷心感谢本书创作过程中有一些小事情一度影响了笔者的心情,让笔者产生过心灰意懒、意兴阑珊的感觉,使得写作也一度中断。在此,要衷心感谢电子工业出版社的朋友,以及疯狂Java联盟的杨恩雄、heyitang、petrelsky5等广大网友和所有给我鼓励的朋友,是你们的支持让我再度燃起创作热情。本书写给谁看本书是疯狂Java体系丛书之一,前半部分(前8章)没有基础即可阅读,后半部分则需要一定的Spring、Hibernate等 Java EE基础。如果读者只希望掌握 JavaScript编程、DHTML和Ajax基础,则无须任何基础;如果读者希望将Ajax融入实际的 Java EE开发,则建议先阅读《轻量级 Java EE企业应用实战》一书。2008年3月17日疯狂Java学习路线图Java EE体系的理解,对 Java EE学习者给出一个粗略线路图:备注:1.没有灰色覆盖的区域稍有难度,请谨慎尝试。2.本学习线路图不涉及设计模式、软件方法学等概念,但希望大家能从开发中悟道。3.本人并不认为Spring、Hibernate很复杂,只要基础扎实,掌握框架是水到渠成的。光盘说明一、光盘内容本光盘是《疯狂Ajax讲义》一书的配书光盘,书中的代码按章、按节存放,即第2章、第2节所使用的代码放在codes文件夹的02\2.2文件夹下,依次类推。另:书中每份源代码也给出与光盘源文件的对应关系,方便读者查找。本光盘codes目录下有17个文件夹,其内容和含义说明如下:(1)01~17个文件夹名对应于《疯狂Ajax讲义》中的章名,即第二章所使用的代码放在codes文件夹的02文件夹下,依次类推。(2)其中10、12、14、16、17文件夹下有Xxx和Xxx_Eclipse两个文件夹,它们是同一个项目的源文件,其中Xxx是IDE平台无关的项目,使用Ant来编译即可;而Xxx_Eclipse是该项目在Eclipse IDE工具中的项目文件。(3)codes文件夹下大量文件夹下包含了.classpath、.mymetadata、.project、.springBeans等文件,它们是Eclipse项目文件,请不要删除。二、运行环境本书中的程序在以下环境调试通过:(1)安装jdk-6u6-windows-i586-p.exe,安装完成后,添加CLASSPATH环境变量,该环境变量的值为;%JAVA_HOME%/lib/tools.jar;;%JAVA_HOME%/lib/dt.jar。如果为了可以编译和运行 Java程序,还应该在PATH环境变量中增加%JAVA_HOME%/bin。其中JAVA_HOME代表JDK(不是JRE)的安装路径。(2)安装Apache的Tomcat6.0.16,不要使用安装文件安装,而是采用解压缩的安装方式。安装Tomcat请参看第一章。安装完成后,将Tomcat安装路径的lib下的jsp-api.jar和servlet-api.jar两个JAR文件添加到CLASSPATH环境变量之后。(3)安装apache-ant-1.7.0。将下载的Ant压缩文件解压缩到任意路径,然后增加ANT_HOME的环境变量,让变量的值为 Ant 的解压缩路径。并在 PATH 环境变量中增加%ANT_HOME%/bin环境变量。(4)安装MySQL5.0或更高版本,安装MysSQL时候选择GBK的编码方式。(5)安装Eclipse3.3,并安装MyEclipse6.0的插件。三、注意事项(1)独立应用程序的代码中都包括build.xml文件,在Dos或Shell下进入build.xml文件所在路径,执行如下命令:ant build --编译程序ant run --运行程序(2)对于Web应用,将该应用复制到%TOMCAT_HOME%/webapps路径下,然后进入build.xml所在路径,执行如下命令:ant build --编译应用启动Tomcat服务器,使用浏览器即可访问该应用。(3)对于Eclipse项目文件,导入Eclipse开发工具即可。(4)代码中有大量代码需要连接数据库,读者应修改数据库 URL 以及用户名、密码让这些代码与读者运行环境一致。如果项目下有SQL脚本,导入SQL脚本即可,如果没有SQL脚本,系统将在运行时自动建表,读者只需创建对应数据库即可。(5)在使用本光盘的程序时,请将程序拷贝到硬盘上,并去除文件的只读属性。(6)本书绝大部分章节后都提供了相应的编程习题,供开发者巩固所学,将理论融入实际开发之用。关于这些编程习题的解题思路和参考答案可登录http://www.crazyit.org获取。四、技术支持如果您使用本光盘中遇到不懂的技术问题,您可以登录如下网站与作者联系:网站:http://www.crazyit.org第1章Ajax概述本章要点● C/S模式应用的结构和缺点● B/S模式应用的结构和优势● 传统Web应用的不足● 如何改进传统的Web应用● RIA的改进和优势● Ajax的基础● Ajax的基本特征● Ajax依赖的核心技术● 了解Ajax的替代技术● 建立开发和运行Ajax应用的环境Ajax(Asynchronous JavaScript And XML,异步JavaScript和XML)是个相当新的名词,它在2005年由Jesse James Garrett首先提出。在接下来的极短时间内,Ajax被广泛应用到大量B/S结构的应用中,改进了传统的Web应用,给浏览者一种更连续的体验。Ajax的最大优势在于异步交互,即浏览者在浏览页面时,可同时向服务器发送请求,甚至可以不用等待前一次请求得到完全响应,便再次发送请求。这种异步请求的方式,非常类似于传统的桌面应用。通过使用Ajax技术,可以使互联网网页具有更友好的人机交互和更美观的浏览界面。使用Ajax的异步请求方式,浏览器无须频繁地重新加载新页面,服务器的响应不再是整个页面内容,而只是必须更新的部分数据。Ajax 可以减轻服务器和带宽的负担,提供更好的服务响应。使用Ajax的异步模式,浏览器无须重新加载整个页面,就可以显示新的数据。浏览器通过JavaScript代码向服务器发送请求,JavaScript代码负责解析服务器的响应数据,并把样式表加到数据上,然后在现有网页中显示出来。Ajax技术给互联网带来了一场革命——Web 2.0,而且它也正是这场革命中的核心技术。到目前为止,已很难找到一个没有使用Ajax技术的Web应用。Ajax技术甚至催生了一种新的网络游戏平台:网页游戏——游戏玩家无须下载任何客户端,直接打开网页就可开始游戏。1.1 重新思考Web应用传统的Web应用经过多年的发展,在很多方面都是相当完善的。特别是Java EE、.NET、Ruby on Rails等平台的出现,更是规范了Web应用的开发。Ajax的出现,让人不得不重新思考传统的Web应用。Ajax给浏览者一种全新的体验:浏览者可以无须等待服务器响应,而多次以异步方式向服务器发送请求。这种体验方式,非常类似于传统的桌面应用。Ajax并不是要颠覆传统的B/S结构的应用,而只是让B/S结构的应用更加完善。1.1.1 应用系统的发展史早期应用软件系统大都采用 C/S(客户机/服务器模式)结构,C/S 结构的软件分为客户机和服务器两层。客户机不是毫无运算能力的输入/输出设备,在客户端需要部署大量的应用程序,而且可能还具有一定的数据存储能力。C/S 结构应用的服务器端通常主要安装数据库管理系统,当然也可能包含一些业务逻辑实现(这些业务逻辑实现通常以函数、存储过程和触发器的形式存在)。通过把软件系统的计算和数据合理地分配在客户机和服务器两端,可以有效地降低网络通信量和服务器运算量。C/S结构应用的结构图如图1.1所示。图1.1 C/S结构应用对于C/S结构的应用而言,因为可以直接在客户端部署应用程序,所以可以让应用的人机交互界面更加友好,并可充分美化应用程序的人机界面。但由于服务器连接个数和数据通信量的限制,这种结构的软件适于在用户数目不多的局域网内使用。早期的大部分ERP软件产品即属于此类结构。随着Internet技术的兴起,B/S(浏览器/服务器模式)结构得到了大规模应用。B/S结构是对C/S结构的一种改进。在这种结构下,应用的业务逻辑完全在应用服务器端实现,用户表现完全在Web服务器上实现,客户端只需要浏览器即可进行业务处理,是一种全新的软件系统结构技术。这种结构是当今应用软件的首选体系结构。在这种应用结构下,客户端的所有处理请求都以HTTP请求形式发送,而服务器端则将响应以HTML页面的形式送回客户端,由客户端浏览器负责显示HTML页面。B/S结构应用的结构图如图1.2所示。图1.2 B/S结构的应用B/S结构得到迅速推广是有原因的。在大部分情况下,B/S结构的应用比C/S结构的应用更加优秀,适应性更广。相对而言,B/S结构的系统有如下方面的优势:● 数据安全性高。由于C/S结构软件的数据分布特性,客户端所发生的火灾、地震、盗抢、病毒、黑客攻击等都成了可怕的数据杀手。另外,对于集团级的异地软件应用,C/S 结构的软件必须在各地安装多台服务器,并在多台服务器之间进行数据同步。因此,每个数据点上的数据安全都会影响到整个应用的数据安全。对于跨区域的大型应用而言,C/S 结构软件的安全性是令人无法接受的。而对B/S结构的系统而言,数据集中存放于总部的数据库服务器(服务器数据可以通过多种方式备份存放),客户端不保存任何业务数据和数据库持久化信息,无须进行数据同步,所以这些安全问题自然也就不存在了。● 数据一致性好。在C/S结构的解决方案里,对于跨区域的大型企业应用都采用各地安装区域级服务器,然后再进行数据同步的模式。这些服务器每天必须同步完毕之后,总部才可得到最终的数据。由于局部网络故障等原因,可能造成个别数据库无法正常同步。即使都能正常同步,但各服务器往往不能同时同步,因而数据也无法绝对一致,不能用于决策。而对于B/S结构的系统而言,数据是集中存放的,客户端发生的每次数据修改都直接进入到中央数据库,不存在数据一致性的问题。● 数据实时性好。对于大型的跨区域应用而言,C/S 结构不可能随时跟踪各客户端的业务发生情况,因为数据都不是实时更新,因而看到的数据都是滞后的;而B/S结构则不同,因为其数据都是实时存入服务器端的数据库,因而服务器端可以实时看到当前发生的所有业务,能提供更好的企业决策支持。● 系统更新方便。软件供应商提供的软件不可能是完美无缺的。即使是一个绝对完美的软件系统,当具体的业务环境发生改变后,系统也应随之改变。因而,必须经常对已部署的软件产品进行维护、升级。对C/S结构的软件而言,由于其应用是分布的,需要对每一个节点手动进行程序安装,所以,即使非常小的程序缺陷都需要很长的时间来重新部署。重新部署时,为了保证各程序版本的一致性,必须暂停业务进行更新(即“休克更新”)。在很多情景下,这是不可忍受的。而B/S结构的软件则不同,其应用程序集中于服务器上,各应用节点没有任何程序,应用的更新只需要更新服务器端程序即可,因而可以做到快速的服务响应。● 网络应用限制小。C/S结构的软件通常仅适用于局域网内部用户或宽带用户(1M以上);而B/S结构的软件可以适用于任何网络结构(包括28.8K拨号入网方式),特别适于宽带不能到达的地方。传统的C/S结构软件开发工具有早期的Visual Basic、Visual FoxPro等,这些开发工具目前已经趋于淘汰。目前依然使用的开发工具有 PowerBuilder、Delphi 等。除早期的一些系统外,现在新开发的系统大部分使用B/S结构。B/S结构的应用开发早期有ASP、JSP和PHP等。早期这些B/S结构开发技术相当混乱,系统中业务逻辑、数据持久化、控制逻辑混在一起,这些处理逻辑都通过页面的脚本实现。早期的B/S结构应用面临着后期维护困难、难以扩充的问题。MVC设计模式重新定义了B/S结构应用的开发模式,规定B/S结构应用应该分成Model(M:模型)、View(V:视图)和Controller(C:控制器)三个部分。MVC模式分离的数据访问和数据表现,给系统提供了更好的解耦。MVC 架构的核心思想是,将程序分成相对独立而又能协同工作的三个部分。通过使用MVC架构,可以降低模块之间的耦合,提供应用的可扩展性。MVC中的每个组件只关心组件内的逻辑,不应与其他组件的逻辑混合。Java EE的出现,则更加规范了B/S结构应用的开发。Java EE推荐将应用分为数据持久层、业务逻辑层和Web层,各层之间以松耦合的方式组织在一起。目前,Ajax的出现,再次完善了传统的Web应用。Ajax应用强调异步发送用户请求:用户在浏览页面的同时可以发送请求,在第一个请求的服务器响应还没有完全结束时,可以再次发送请求。这种请求的发送方式非常类似于传统的C/S结构的应用。在传统的Web应用里,因为用户总是需要加载新页面时才提交请求,而提交请求后又需要等待服务器响应,所以如果服务器响应还没有完全结束,则用户只能等待,不能继续发送请求。与传统Web应用不同的是,Ajax将请求与页面分离:在传统的Web应用里,每个请求即对应一个页面,不管客户端以POST还是GET方式提交请求,每次请求都会丢弃当前页面,等待服务器生成新页面。在等待期间,旧的页面已经丢弃,新的页面还没有完全生成,整个浏览器将一片空白,而用户什么都做不了,只能等待——对于用户而言,这是一种不连续的体验,感觉非常不好。1.1.2 传统Web应用的优势和缺点经过前面对应用发展历史的介绍我们知道:B/S结构依然是目前应用的主流结构。Ajax技术并没有提出一种全新的应用开发结构。Ajax并不是要取代传统B/S结构应用,而是对传统B/S结构应用的完善,从而提供给用户一种更连续的体验。传统Web应用取代C/S结构的应用自然有其必然的理由,那就是传统Web应用的优势:● 客户端的零安装,零部署。客户端软件就是浏览器,无须用户安装、部署新的客户端,客户端只需启动浏览器即可以运行系统。● 系统更加安全。所有的数据和业务逻辑全部部署在服务器端,多层的应用结构将数据库隐藏在底层,使得系统更加安全。● 数据抗风险能力加强。所有的业务数据由服务器统一管理,服务器数据是完整的业务数据,服务器可以提供完整的业务数据备份。● 更广的网络适应。处于万维网上的应用可以被全世界的浏览者访问。但传统的Web 应用也存在种种问题,比如界面简单,独占式请求。传统的Web 应用的不足主要表现在如下方面:● 独占式的请求:比如一个任务需要多步骤或多选项该任务才能完成。在HTML里,一个多步骤的任务可以在单页内表达出来。但是由于HTML的互动性有限,便可能产生一份很长的页面,使用户感到混乱、笨拙而难以使用。或者将多个步骤分成几个页面分别提交,但传统的独占式的请求,如果前一个请求没有得到完全响应,则后一个请求不能发送。用户在等待服务器的响应期间,浏览器一片空白。这种独占式请求如图1.3所示。图1.3 独占式请求的示意图● 频繁的页面刷新:传统的Web应用基本上采用请求-页面的对应模式,每个请求都需要丢弃当前页面来重新加载新页面。频繁的页面刷新不仅让客户处于不连续的体验中,也使服务器的负担加重。● 简陋的页面:传统Web应用因为需要频繁刷新页面,因而不可能制作出具有丰富表现功能的页面。丰富表现的页面导致页面文件过大,下载速度更慢,而且页面频繁刷新。一个表现丰富的页面下载需要相当多的时间,但随着请求的提交,又需要重新下载新页面,这样系统开销相当大。因而传统Web应用的页面不可能非常出色。而Ajax正是为弥补以上不足而诞生,Ajax使用XMLHttpRequest对象异步发送请求。Ajax应用不采用请求对应页面的模式,请求就是请求,发送请求不要求重新加载页面。浏览器发送请求后,无须等待服务器响应,而是可以继续原来的操作。在服务器的响应完成后,客户端使用 JavaScript 函数将响应数据加载到浏览器中。通过使用Ajax技术,用户发送请求,请求得到响应这个过程在后台进行,用户的界面以连续的方式进行。1.2 重新设计Web应用传统Web应用的不足,一直凸显在用户面前,用户常常抱怨系统的响应速度太慢。除了网络带宽的限制、业务逻辑复杂、硬件设备制约等因素外,频繁的页面刷新,每次响应都必须下载整个响应页面,也导致了响应速度慢。针对传统Web 应用界面简单的弊病,有相当多的改进Web 应用的设想,例如DHTML以及后来的所谓RIA应用。1.2.1 富Internet应用RIA,是Rich Internet Application的缩写,即富Internet应用。B/S结构已成为应用程序开发的默认结构,用户对应用程序复杂性要求日增,Web应用程序对完成复杂逻辑始终差强人意。用户与复杂的Web应用程序交互时,其体验并不能令人满意。Web模型是基于HTML页面的模型,缺少客户端智能机制。传统的Web应用几乎无法完成复杂的用户交互(如传统的C/S应用程序和桌面应用程序中的用户交互)。因而,Web在许多应用程序中难以发挥。为了提高用户体验,出现了一种新类型的Web应用,那就是Rich Internet Applications(RIA)。这些应用程序吸收了桌面应用程序的反应快、交互性强的优点,改进了Web应用程序的用户交互,可以提供一种更丰富、更具有交互性和响应性的用户体验。RIA架构可以理解为运行于B/S结构上的C/S应用。应用客户端采用标准的浏览器,但在浏览器内支持类似C/S应用的操作,所以RIA应用可以提供强大的功能,让用户有高交互性、高效率响应的体验。同时,RIA又是基于Internet浏览器的应用,所以,用户使用RIA非常方便。理想的 RIA 与普通 Web 页面,用户无须安装任何的客户端软件,而只需拥有浏览器。一个典型的富客户端应用是Google Maps。Google Maps的地图支持鼠标的拖动和放大、缩小。地图随着鼠标的拖动而拖动——明显加载了新的数据,但页面本身却无须重新加载。如果鼠标拖动得太远,可能出现部分空白区域,但这种空白只是地图区域在加载,而不是整个页面在加载。当使用鼠标单击地图上的提示点时,地图上可以出现该点的更详细的介绍。图1.4显示了Google Maps中的美国地图。图1.4 Google Maps应用目前,典型的RIA技术有:● Microsoft的ClickOnce技术。● Sun 的 Java Web Start 技术。● Adobe的Flash技术。● Ajax技术。可以说,RIA代表着目前Web应用的发展趋势,因而各大软件厂商均希望在RIA方面获得自己的市场份额。而Ajax并不属于任何软件厂商。Ajax 代表的是一种开源风格,而且采用的大部分都是早已存在的技术,如 JavaScript、CSS 等。Ajax所采用的技术是基于标准的,并不属于特定厂商,是一种真正开源风格的RIA。同时,与其他RIA不同的是,基于Ajax技术的应用完全基于现有的浏览器,所以兼容性最好。基于Ajax技术的应用,通常无须下载任何客户端,这也正是Ajax的魅力所在。1.2.2 异步发送请求,避免等待与之前简单的DHTML页面相比,所有RIA的共同特点是:允许在同一页面多次发送请求,都将传统Web应用的每请求对应页面拆分,页面只是单纯的视图,负责显示数据,而请求与页面之间并无一一对应的关系。就某种程度而言,Ajax就是传统的DHTML页面+异步发送请求,当然也包括了动态装载服务器数据。如图1.5所示为异步发送请求的示意图。图1.5 RIA的异步发送请求RIA的特征除异步发送请求外,还有动态加载服务器响应数据。使用RIA能避免频繁刷新页面,服务器响应的是数据,而不是整个页面内容。RIA负责获取服务器数据,然后将其动态加载到浏览器中。1.2.3 使用Ajax在前面的介绍中已经讲过:Ajax应用本质上是一种RIA,而构建RIA,Ajax也并不是唯一的选择。甚至在某些特殊的情形下,Ajax并不是最合适的选择。但我们完全有理由相信:在大部分情形下,使用Ajax改善传统Web应用,能提供更好的适应性。Ajax的优势非常明显:基于Ajax的应用无须浏览器下载任何插件,并可以在任何平台上良好运行。Ajax还有个显著的优势是,所用的技术大都是些“古老”的技术,例如JavaScript、XML、DOM、CSS等。对于开发人员而言,相比于重新选择新的技术,如ClickOnce等,他们将更乐意选择这些已经熟悉的技术。同时,这些技术都是标准的,并不属于任何特定的厂商,目前所有浏览器都对 Ajax技术支持良好。所以Ajax技术自从2005年问世以来,已在业界得到迅速推广,到现在已很难找到没有使用Ajax的B/S应用了。Ajax使用简单的XMLHttpRequest对象发送请求,使用简单的JavaScript函数监视服务器响应。在服务器响应完成后,JavaScript通过DOM动态更新HTML页面。自始至终,用户的动作无须中断,所感受的是一种连续的体验。1.3 Ajax介绍Ajax由Jesse James Garrett在2005年2月的一篇文章中提出。不过Ajax并不是一种新的语言或技术。实际上,它由几种已有的技术组合而成。Ajax 通过在浏览器和服务器之间添加 Ajax 中间层,允许浏览器异步发送请求,同时允许动态加载服务器响应。用户的请求不再直接向服务器提交,而是使用XMLHttpRequest异步地向服务器发送,从而避免了丢弃当前页面。1.3.1 Ajax的工作方式Ajax的核心是JavaScript对象XMLHttpRequest。该对象在Internet Explorer 5中首次引入,它提供了异步发送请求的能力。简而言之,使用XMLHttpRequest,可以通过JavaScript向服务器发送请求,并能够处理服务器响应,避免阻塞用户动作。通过使用 XMLHttpRequest 对象,浏览器通过客户端脚本与服务器交换数据,而Web页面无须频繁重新加载,Web页面的内容也由客户端脚本动态更新。异步,指基于Ajax的应用与服务器通信的方式。对于传统的Web应用,每次用户发送请求,向服务器请求获得新数据时,浏览器都会完全丢弃当前页面,而等待重新加载新的页面。而在服务器完全响应之前,用户浏览器将一片空白,用户的动作必须中断。而异步指用户发送请求后,完全无须等待,请求在后台发送,不会阻塞用户当前活动。用户无须等待第一次请求得到完全响应,可以立即发送第二次请求。使用Ajax的异步模式,浏览器就不必等用户请求操作,无须重新下载整个页面,一样可以显示服务器的响应数据。Ajax使用JavaScript来回传送数据,XMLHttpRequest是Ajax的核心,JavaScript则是Ajax技术的粘合剂。整个Ajax应用的工作过程如下:(1)JavaScript脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时,既可以发送GET请求,也可以发送POST请求。(2)JavaScript脚本使用XMLHttpRequest对象解析服务器响应数据。(3)JavaScript脚本通过DOM动态更新HTML页面。也可以为服务器响应数据增加CSS样式表,在当前网页的某个部分加以显示。在前面已经多次提到,Ajax并不是新技术,而是一些传统技术的组合。在这些传统的技术中,除了XMLHttpRequest比较新外,其他技术都有了很多年的历史。下面就来简单介绍一下其中的关键技术。1.3.2 Ajax的核心:XMLHttpRequestXMLHttpRequest 是整个Ajax 技术的灵魂。可以说,没有XMLHttpRequest,就没有Ajax。Ajax技术的核心是异步发送请求,而XMLHttpRequest则是异步发送请求的对象。如果抛开异步发送请求, Ajax的其他技术将完全失去原有的意义。最早应用XMLHTTP的是微软。IE(IE5以上)允许在Web页面内部使用XMLHTTP ActiveX组件,从而扩展自身的功能,可以无须从当前Web页面发送请求,允许直接传输数据给服务器,并允许直接从服务器取数据。这个功能是很重要的。因为它减少了无状态连接的痛苦,还可以避免下载冗余HTML代码,从而可以提高进程的速度。后来,Mozilla(Mozilla 1.0以上及Netscape Navigator 7以上)也有了自己的实现——XMLHttpRequest对象。Konqueror(还有Safari 1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象。而Opera在其7.6以后的版本中也增加了对XMLHttpRequest的支持。大部分情况下,XMLHttpRequest 对象和 XMLHTTP 组件非常相似,方法和属性也类似。只有极个别的属性存在细微差异。XMLHttpRequest对象在Mozilla 浏览器中通过如下代码完成初始化:微软的XMLHTTP组件在JavaScript中采用如下代码完成初始化:上面的代码中的XMLHTTP组件的前缀各不相同。因为在不同的IE版本中, XMLHTTP的实现版本并不相同。下面的代码则以一种更通用(能实现跨浏览器访问)的方式创建了XMLHttpRequest对象:只有借助XMLHttpRequest对象,Ajax才能实现异步发送请求。XMLHttpRequest是浏览器与服务器交换信息的载体。在整个Ajax技术中,XMLHttpRequest是灵魂。1.3.3 Ajax的编程脚本:JavaScript语言JavaScript 是一种跨平台的脚本语言,虽然很多地方也称 JavaScript 为面向对象的语言,但实际上JavaScript并不是一种纯粹的面向对象语言。JavaScript简单易用,而且在绝大部分浏览器中都运行良好。JavaScript脚本是Ajax技术中另一个重要部分。JavaScript主要完成如下事情:● 创建XMLHttpRequest对象。● 通过XMLHttpRequest向服务器发送请求。● 创建回调函数,监视服务器响应状态,在服务器响应完成后,回调函数启动● 回调函数通过DOM动态更新HTML页面。JavaScript是Ajax技术的粘合剂,通过将其他几个技术有机地结合在一起,从而形成了Ajax技术。1.3.4 HTML页面的DOM模型DOM(Document Object Model)是操作HTML和XML文件的一组 API,它提供了文件的结构表述。通过使用DOM,可以采用编程方式操作文档结构,可以改变文档的内容。通过使用DOM,HTML页面以一种结构化方式组织在一起,HTML页面的内容以节点方式组织。Web程序开发者可以增加文件的节点、属性及事件,从而提供对HTML页面的动态更新,例如document 就代表“HTML文件本身”,而table对象则代表 HTML的表格对象等。HTML页面中DOM模型的主要功能是允许JavaScript动态操作HTML文档。如图1.6所示为一个简单的HTML页面的DOM树形图。由图1.6可以看出,通过DOM可将HTML页面视为一组包含父子关系的节点。JavaScript 可以访问每个节点,修改节点内容及其属性,也可以新增节点、删除节点。这些DOM操作将直接对应HTML页面内容的改变。简而言之,DOM提供了动态改变HTML页面内容的方法。DOM也是Ajax的核心技术。没有DOM,JavaScript在获取服务器数据后无法动态更新HTML页面,获得的数据无法显示在用户的当前浏览页面中。事实上,DOM也是JavaScript获取页面数据的方式。在 JavaScript 发送请求之前,已经需要使用 DOM 来获取请求数据了。图1.6 HTML页面的DOM树形图1.3.5 数据交换和显示CSS(Cascading Style Sheets,级联样式单)和XML(可扩展标记语言)并不是Ajax所必需的技术。但通常Ajax依然离不开这两项技术。实际上,HTML页面本身就离不开CSS,如果想让HTML页面更美观,就需要CSS的配合了。在 Web 页面中采用 CSS 技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。通过CSS技术,只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,CSS技术的优点主要有:● 目前几乎所有浏览器都支持CSS技术。● 支持丰富的表现效果。以前一些采用图片实现的效果,现在完全可以通过CSS实现,从而提供更快的下载速度。● 页面的字体更漂亮,更容易编排,页面效果更加美观。● 支持更好的页面布局。● 同一个CSS文件可以同时控制多个页面,从而避免重复更新每个页面。CSS主要的工作是让页面的表现更友好。虽然CSS并不是Ajax所必需的,但对于实际应用而言,用户界面的友好是非常重要的,因而CSS也是必不可少的技术。XML文档是一种结构化文档,其主要作用有:● 用于简单数据的表示和交换。● 用于面向消息的计算。● 与用户界面相关,表示相关的上下文。关于Ajax的这些相关技术,本书将在后面的章节详细介绍,这里就不再深入介绍了。1.4 Ajax的基本特征传统的Web应用已经存在了很多年,而针对传统Web 应用的改进一刻也没有停止过。可能有一些技术在很多方面与Ajax非常相似,但并不是Ajax。下面介绍Ajax应用的基本特征。1.4.1 异步发送请求异步发送请求是Ajax应用最核心的内容。如果抛开了异步发送请求这个特征,那么不管页面做得多么丰富多彩,外表上多么像桌面应用,也都不可能是Ajax应用。Ajax应用的巨大改进之处,在于给用户的连续体验。用户发送请求后,还可以在当前页面浏览,或者继续发送请求,即使服务器响应还没有完成。而服务器响应完成后,浏览器并不是重新加载整个页面,而是仅加载需要更新的部分。1.4.2 服务器响应是数据,而不是页面内容与传统的Web 应用不同的是,服务器不再生成整个Web 页面。这是一种非常“浪费”的行为,这种浪费不仅对于用户不利,对于服务器也是一样。用户从服务器完整下载了一个Web页面,随着服务器响应的到来,用户再次重新下载新的页面,也许这两个页面的基本内容完全相同,只有极个别的数据需要修改,但用户不得不下载全部页面,而服务器则不得不提供对应的带宽给用户下载。例如对于一个实时的股票行情显示系统,每隔一段时间需要实时刷新当前的股票行情。当前页面的大部分内容如图片、Flash动画等都无须改变,甚至股票名称文字也无须改变,需要改变的仅仅是当前的股票价格。但传统的Web应用里,每隔一段时间都需要重复下载整个页面,将导致服务器负载加重,而用户则处于一种不连续的体验中。在Ajax应用中,网络负载主要集中在应用加载期,也就是页面第一次下载时。一旦页面下载成功,则相当于在客户端部署了复杂的应用。而后面的操作将是相当迅速的,客户端的 JavaScript 负责与服务器通信,从服务器获取必须更新的部分数据,而不再是整个页面内容。因此,Ajax的累积网络流量比传统Web应用要小得多。1.4.3 浏览器中的是应用,不是简单视图传统的Web应用中,浏览器只是简单视图,负责显示系统状态,并收集用户信息提交给服务器,浏览器没有任何逻辑功能。当然在传统的Web应用中,也不允许浏览器中包含逻辑。因为如果在页面中包含逻辑,则随着用户请求的提交,页面被丢弃,所有的逻辑都将丢失。传统的Web应用中,浏览器没有包含逻辑,更不能包含用户的会话状态。因为如果将状态保存在客户端,则随着页面的刷新,用户会话状态将丢失。对于 Ajax 应用则完全不同,浏览器不仅可以包含简单逻辑,甚至可以保存用户会话状态。因为Ajax应用有个特点:无须刷新页面即可完成内容的动态更新。例如一个简单在线购物系统,用户的购物车就是典型的会话状态。在传统的Web应用里,都会采用session保存会话状态,即将用户的状态信息保存在服务器端。每次用户购买物品,都必须提交一次请求,从而将购买物品提交到服务器session中。而在Ajax应用中则无须使用session,Ajax应用可采用JavaScript的变量保存用户购买的所有物品,而用户每次购买的物品也无须提交给服务器session,而是直接修改浏览器中的JavaScript变量。在这种情况下,Web页面既保存了用户的状态信息,又处理了部分业务逻辑。直到用户提交购买,数据需要持久化时,JavaScript才将请求发送到服务器。Ajax应用初始化时,需要加载大量的JavaScript代码。这些JavaScript代码中已经包含了部分业务逻辑,将在后台默默工作,负责处理部分逻辑,异步提交请求,以及读取服务器响应数据,动态更新页面。1.5 Ajax的替代技术正如前面所介绍的,Ajax应用的本质就是一种RIA。而构建RIA,并不是非Ajax莫属。下面介绍一些Ajax技术的主要替代方案,这些替代方案可能在某些方面更优秀。1.5.1 Sun的Java Web Start技术Java Web Start是Java应用程序的一种部署解决方案。Java Web Start提供一次单击激活应用程序的简易方法,并保证始终运行应用程序的最新版本,从而可避免复杂的安装或升级过程。传统情况下,通过Web发布软件需要用户在Web 上查找、下载,然后在系统中存放,并执行安装程序。执行安装程序后,将提示指定安装路径和安装选项,例如完全、典型或最小安装。这是一项耗时而又复杂的任务,并且在安装软件的每个新版本时都必须重复进行。相反,通过Web部署的应用程序,都非常容易安装和使用。通过使用Java Web Start,浏览器自动完成整个安装过程。没有复杂的下载、安装和配置过程,并且确保软件是最新版本。Java Web Start提供了通过Web部署应用程序的解决方案,提供了基于B/S模式的C/S应用的解决方案,比简单的B/S应用有更好的特性:● 高交互性的用户界面。● 低带宽要求。应用程序不需要和 Web Server始终保持连接,可以在本地的硬盘中保留应用程序的缓存,并通过缓存来运行应用程序。● 支持离线工作。使用Java Web Start,只需要在第一次使用应用时下载该程序。而一旦下载完成,Java Web Start会将应用程序在本地进行缓存。虽然第一次运行时所花的代价要比HTML应用高,但此后就可以在任何时候立即运行。每次运行应用程序的时候,Java Web Start都会自动连接服务器,检查是否有新的版本出现,如果有就下载需要更新的文件,从而保证运行的程序是最新版本,省却了手动升级的麻烦。1.5.2 Microsoft的ClickOnce技术ClickOnce 是一种部署技术。使用该技术可创建自行更新的Windows应用,这些应用程序几乎无须用户参与即可完成应用的安装和运行。ClickOnce克服了传统部署的三个主要问题:● 更新应用程序困难。使用 Windows Installer 部署,每次应用程序更新,用户都必须重新安整个应用程序。而使用 ClickOnce 部署,则可以提供自动更新。只有更改过的应用程序部才会被下载,然后从新的并行文件夹重新安装完整的、更新后的应用程序。对用户的计算机的影响。使用 Windows Installer 部署时,应用程序通常依赖于共享组件,这便有可能发生版本冲突。而使用 ClickOnce 部署时,每个应用程序都是独立的,不会干扰其他应用程序。● 安全权限。Windows Installer 部署要求具有管理员权限并且只允许有限的用户安装。而 ClickOnce部署允许非管理员用户安装应用程序并仅授予应用程序所需要的那些代码访问安全权限。通过使用ClickOnce技术,可以创建基于Web的应用程序,但这种应用程序可以提供Windows 窗体丰富的用户界面和响应性。通过使用 ClickOnce技术,还可以开发出基于B/S架构的Windows程序。1.5.3 基于Flash的FlexFlash在早期仅仅是一种简单的网页动画,它的出现改善了静态HTML页面的外观。Flash是一种流媒体的格式,无须等到动画完全下载,即可立即播放。后来,Flash增加了一种叫ActionScript的脚本,从而允许播放交互式电影。ActionScript还提供了对输入表单UI组件的支持。虽然 Flash 动画的运行必须依赖一种浏览器插件,但这种插件已经存在了很长时间。通常,各种主流浏览器都已经包含了Flash插件,而且该插件也可以跨Windows、Linux等操作平台。Flex应用与传统的HTML应用程序的主要区别在于:Flex应用可提供给用户更快的响应,在不同状态与显示之间流畅过渡,并提供连续的用户体验。Flex应用程序框架由MXML、ActionScript及Flex类库构成。开发人员利用 MXML及ActionScript编写Flex应用程序。利用MXML定义应用程序用户界面元素,利用ActionScript定义客户逻辑与程序控制。Flex类库中包括Flex组件、管理器及行为等。利用基于Flex 组件的开发模型,开发人员可在程序中加入内建组件、创建新组件等。对比三种技术可以发现:Java Web Start和ClickOnce本质上还是一种C/S结构应用,只是这种应用转为以HTML页面为容器,因而可以自动安装和更新客户端程序。Java Web Start和ClickOnce都是对于传统C/S结构应用的改进,而不是对B/S结构应用的改进。因此所有的Windows程序、ClickOnce的应用只能在Windows平台下运行。而基于Flash的Flex应用,则提供比Ajax更好的用户界面,因为Flash起初的目标就是制作网页动画,它支持非常丰富的图形界面。可见,如果需要客户端完成相当多的业务逻辑,而且应用大部分在局域网内进行,可以采用Java Web Start和ClickOnce技术。如果应用需要在不同平台上运行,则应该使用Java Web Start。如果应用需要非常丰富的客户端表现效果,例如游戏,则应该考虑使用Flash。在某种程度上,Ajax 综合了三项技术的优点,但达不到在三者的强项上的高度。JavaScript 要完全达到Java Web Start或ClickOnce那种桌面应用的界面,难度相当大(目前有个商用JavaScript库Bindows做得非常出色)。而要达到Flash那么丰富的动画效果,则更不可思议。但大部分情形下,采用Ajax是个不错的选择。毕竟,对于真正的应用而言,构建复杂的动画界面是不是太“舍本逐末”了一点?而Java Web Start和ClickOnce毕竟不是对B/S结构应用的改进,而是对传统C/S结构应用的改进。1.6 搭建Ajax开发环境Ajax是一种技术,这种技术并不局限于任何特定语言、特定平台。从某个方面讲,Ajax更像一种思想,而不是一种技术。在不同的Web开发平台上都可以施展Ajax技术,例如ASP、PHP、.NET和Java EE等。本节将介绍本书的Ajax所使用的语言平台,以及如何搭建Ajax的运行开发环境。1.6.1 本书的Ajax开发环境本书介绍的Ajax应用全部基于Java EE平台,虽然Ajax的思想在其他开发平台上完全一样。本书中所有的Ajax应用,都基于Java EE开发平台完成。在本书的Ajax应用中,Ajax作为上层表现层技术,与下面的Web层交互,Web层的控制器则负责拦截Ajax引擎发出的XMLHttpRequest请求,并调用业务逻辑层对象处理请求。底层的持久化将通过DAO组件完成。本书作为疯狂Java体系的一员,并不打算为介绍Ajax而Ajax,而是致力于让Ajax有机地融入Java EE体系中。本书并不准备讲述Ajax在其他Web开发技术上的应用,而将专注于Ajax与Java EE平台的整合。本书将介绍以Ajax技术为核心,以Java EE技术为支撑,二者有机结合的Web 2.0应用。后面的实例都将以Java EE应用为核心——主要基于Spring、Hibernate两个轻量级框架,表层融入Ajax技术。这些实例演示了Ajax技术的作用:更好地改善传统Java EE应用给用户的体验。提 示:本书可分为2个部分阅读,前面8章主要介绍XHTML、JavaScript、CSS、DOM和事件机制等基础知识,阅读前面8章几乎无须任何基础知识。但本书后面章节的内容则大量使用了Hibernate、Spring框架知识,建议读者先阅读疯狂Java体系的《轻量级Java EE企业应用实战》一书。本书采用的Java版本为JDK 6 Update 6。本书介绍的Ajax应用都将以Tomcat 6.0.16作为服务器。本书介绍的Ajax应用都是轻量级Java EE应用整合了Ajax技术的产物,因而采用Tomcat 6.0.16作为Web容器即可——当然,也可以在其他Web服务器上运行良好。

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载