jQueryAjax聊天室毕业设计说明

1、 I / 58基于基于 jQueryjQuery 的的 AjaxAjax 聊天室应用聊天室应用摘要摘要随着网络的逐渐普与，以与网络技术的不断发展，人们通过网络进行交流的方式变得多样化。网络聊天室便是其中之一。聊天室的即时交流方式满足了网络中多人同时聊天交流的需要，使得较多的人在同一个聊天页面进行交流变得方便，简单。本设计的目的是采用 jQuery 框架开发一个网络聊天室。jQuery 是一个快速和简洁的 JavaScript 库，它简化了 HTML 文件的文档遍历、事件处理、动画以与快速 Web 开发应用的 Ajax 技术。本聊天室具有常用聊天室的所有功能，包括多人同时在线聊天,能显示在线用户

2、列表，同时，为了管理聊天室中的用户，设计了用户注册登陆功能 ,增加了聊天室的操作性。本文首先介绍了聊天室所使用到的一些关键技术，例如 jQuery 技术和 Ajax 技术，接着介绍了该系统的设计思路，然后是对系统的详细介绍，包括系统中创建的数据库以与系统的具体功能介绍。聊天室在互联网上的应用非常普遍，实现的方法也是多种多样，相比之下，采用优秀的 jQuery 框架实现的聊天室更加高效、流畅，更加富有前景。关键词关键词：聊天室；jQuery；AjaxJQueryJQuery Ajax-basedAjax-based ChatChat RoomRoom ApplicationApplication

3、AbstractAbstractWith the increasing popularity of the network and the development of networktechnology, theway to communicate with others through the network becomes diverse.Internet chat room is one of the way. It meets the need of people that can communicate with others who are online instantly, a

4、nd makes people chatting on the same page becomes convenient and simple. Thedesign aims to develop a chat room based on jQuery structure.jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web developmen

5、t.The chat room has all common functions, including more than one chatting in the same time and can display and update the list of online users instantly.Meanwhile,in order to manage the users,the chat room has the user registration login function which increase the operability of the chat room.The

6、paper first introduces the key technologies used such as jquery and ajax, then introduced the system design and requirements analysis, followed by a detailed description of the system, including a database created and specific features introduced in the design.The application of the chat room is ver

7、y common on the Internet,and the approaches of implementation are varied pared with those traditional,the chat room based on jQuery is more effective and fast,and have a bright outlook.Keywords:CKeywords:Chat Room; Ajax; jQuery目录引言引言 1 1第第 1 1 章绪论章绪论 2 21.1 系统概述 21.2 需求背景 21.3 系统开发目的与意义 2第第 2 2 章开发工

8、具与相关技术介绍章开发工具与相关技术介绍 3 32.1 开发工具 32.1.1 MyEclipse 介绍 32.1.2 MySQL 数据库介绍 32.1.3 Tomcat 6.0 服务器 32.2 关键技术 42.2.1 JSP42.2.2 JavaScript42.2.3 Ajax 技术 52.2.4 jQuery 技术 52.2.5 Struts 技术 52.3 系统环境 62.3.1 开发环境 62.3.2 运行环境 6第第 3 3 章章 JQUERYJQUERY 技术技术 8 83.1 JQUERY简介 83.2 配置JQUERY环境 83.3 编写简单的JQUERY代码 83.4 J

9、QUERY选择器 83.5 JQUERY与 AJAX的应用 9第第 4 4 章系统设计章系统设计 17174.1 基于JQUERY的 AJAX聊天室功能要求 174.2 聊天室总体功能结构图 174.3 聊天室总体架构 174.4 模块设计 194.5 数据库设计 20第第 5 5 章系统实现章系统实现 22225.1 项目代码结构设计 225.2 详细设计介绍 225.2.1 登录功能设计 225.2.2 注册功能设计 255.2.3 聊天功能设计 28 III / 58第第 6 6 章系统测试章系统测试 38386.1 单元测试 386.2 集成测试 396.3 系统测试 39结论与展望结

10、论与展望 4141致致 4242参考文献参考文献 4343附录附录 4444附录 A 外文文献与其翻译 44附录 B 主要参考文献的题录与摘要 51插图清单插图清单图 5-1 项目代码结构图 22图 5-2 登陆页面图 23图 5-3 登陆失败图 23图 5-4 注册页面图 26图 5-5 聊天页面图 29图 5-6 xia 的登录页面图 31图 5-7 ss 的登录页面图 31图 5-8 ss 的聊天页面图 32图 5-9 xia 的聊天页面图 32表格清单表格清单表 4-1 用户信息表 21表 4-2 聊天信息表 21表 6-1 用户登录信息等价类划分 38表 6-2 用户登录信息测试用例

11、 39 1 / 58引引 言言Internet 是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为 Internet 上一种先进的，易于被人们所接受的信息检索手段，World Wide Web（简称 WWW）发展十分迅速，成为目前世界上最大的信息资源宝库。如今，人们不仅可以在网上查询自己需要的资源，而且可以通过网络进行实时的沟通。从实时性和有效性上都超过了用信件和 Email，并且在费用上要低于。因而各种聊天服务备受用户青睐，在这方面的开发与应用也较多，聊天服务也成为互联网提供的重要服务之一，因此，建立一个好的在线交流聊天系统十分重要。互联网的大多数都建

12、有聊天室，并且有专业聊天提供聊天服务。网上聊天系统是为人们进行交流和联系提供的一个平台。利用现代的网络资源优势和技术优势，通过提供完善的网上聊天系统，以达到增进人们与人们之间的信息交流和沟通的目的。 第第 1 1 章章 绪论绪论1.1 系统概述近年来计算机技术的快速发展，特别是计算机网络的发展，越来越深刻的改变了人们生活的方方面面，使得人们能以更低廉的价格，开发出更方便、更实用的网络工具。各种在线服务系统，更是深刻的影响了人们的联系和交流方式，使得人们可以在远隔千里之遥随时通讯。过去的种种旧的联系方式，已经不能满足现代生活的需要。网上聊天系统作为一种方便拥有共趣爱好的人们之间联系的实用系统便应

13、运而生。本设计主要是实现一个能够方便人们在线交流的聊天室，能够与时显示在线人员和聊天容。1.2 需求背景随着计算机网络日新月异的发展，人们的交流方式越来越多，传统的交流方式，如：信件、电报、等已经难以满足人们的交流要求，在互联网上即时的和好友取得联系，已经成为当今社会人们主流的联系方式。两台计算机之间进行即时通讯、发送文件等交流方式已经成为时代的潮流。因此出现了 等聊天工具。然而 等聊天工具虽然方便、实用，但是，娱乐功能太多，有很多吸引人的娱乐功能，从一定程度上来说，是一种娱乐工具，不能作为用于作为即时通讯、文件共享的专用工具。目前，用于实现单一的即时通讯、文件共享的软件实在太少，并且，它们部

14、分都是绝对的 C/S模式，对远程服务器有非常大的依赖性，没有彻底实现点对点的交流。在常见的聊天室开发中，有基于 ASP、基于 SOCKET、基于 JAVA 开发的聊天室，本系统采用基于 JSP 采用 jQuery 和 Ajax 技术进行开发。JSP 将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于 Web 的应用程序的开发变得迅速和容易。因此，采用 JSP 开发在线聊天系统可以提高开发效率和系统性能。网上聊天系统是常见的，也是比较有代表性的 Internet 应用系统之一，其实现的难点是聊天怎样保存聊天容以与怎么样将聊天的信息与时快捷地在服务器和用户之间进行传递和共享。目前常

15、见的聊天容保存方式有三种：一是利用数据库直接保存聊天容；二是利用文本文件保存聊天容三是利用 Application 对象保存聊天容。这三种聊天容保存方法的基本过程和开发的难易程度相似。本系统采用第二种方式，将聊天信息存入数据库中，管理起来较方便。1.3 系统开发目的与意义网络聊天系统是为人与人之间进行交流和联系提供的一个平台。通过提供完善的聊天服务和规的管理，可以达到增进人与人之间的感情，促进人们之间的沟通，方便人们联系的目的；同时本系统可以拉近人与人之间的距离，丰富人们的业余时间，为人们在网络友提供了便捷的渠道。 3 / 58第第 2 2 章章 开发工具与相关技术介绍开发工具与相关技术介绍2

16、.1 开发工具2.1.1 MyEclipse 介绍MyEclipse 企业级工作平台（MyEclipse Enterprise Workbench，简称MyEclipse）是对 EclipseIDE 的扩展，利用它我们可以在数据库和 JavaEE 的开发、发布以与应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的 JavaEE 集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。2.1.2 MySQL 数据库介绍MySQL 是一个小型关系型数据库管理系统，开发者为瑞典 My

17、SQLAB 公司。MySQL 是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库。这样就增加了速度并提高了灵活性。MySQL 的 SQL“结构化查询语言”。SQL 是用于访问数据库的最常用标准化语言。MySQL 软件采用了 GPL（GNU 通用公共许可证） 。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型为了降低总体拥有成本而选择了 MySQL 作为数据库。MySQL 是一个快速、多线程、多用户的 SQL 数据库服务器。它支持正规的 SQL 查询语言和采用多种数据类型，能对数据进行各种详细的查询等。MySQL 数据库的主要特征有

18、：（1）MySQL 的核心程序采用完全的多线程编程。线程是轻量级的进程，它可以灵活地为用户提供服务，而不过多的系统资源。用多线程和 C 语言实现的 MySql 能很容易充分利用 CPU。 （2）MySQL 可运行在不同的操作系统下。（3）MySQL 有一个非常灵活而且安全的权限和口令系统。当客户与 MySQL 服务器连接时，他们之间所有的口令传送被加密，而且 MySQL 支持主机认证。 （4）MySQL 支持ODBC for Windows。 （5）MySQL 支持大型的数据库。MySQL 可以方便地支持上千万条记录的数据库。作为一个开放源代码的数据库，MySQL 可以针对不同的应用进行相应的

19、修改。 （6）MySQL 拥有一个非常快速而且稳定的基于线程的存分配系统，可以持续使用面不必担心其稳定性。事实上，MySQL 的稳定性足以应付一个超大规模的数据库。 （7）强大的查询功能。MySQL 支持查询的 SELECT 和 WHERE 语句的全部运算符和函数，并且可以在同一查询中混用来自不同数据库的表，从而使得查询变得快捷和方便10。2.1.3 Tomcat 6.0 服务器Tomcat 是 Apache 软件基金会（Apache Software Foundation）的 Jakarta 项目中的一个核心项目，由 Apache、Sun 和其他一些公司与个人共同开发而成。因为Tomcat

20、技术先进、性能稳定，而且免费，因而深受 Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的 Web 应用服务器。Tomcat 同样也很受广大程序员的喜欢，因为它运行时占用的系统资源小，扩展性好，支持负载平衡与服务等开发应用系统常用的功能；而且它还在不断的改进和完善中，任何一个感兴趣的程序员都可以更改它或在其中加入新的功能。Tomcat 是一个轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合 下被普遍使用，是开发和调试 JSP 程序的首选。当配置正确时，Apache 为 HTML 页面服务，而 Tomcat 实际上运行 JSP 页面和 Servlet。另外，Tomc

21、at 和 IIS、Apache 等 Web服务器一样，具有处理 HTML 页面的功能，另外它还是一个 Servlet 和 JSP 容器，独立的 Servlet 容器是 Tomcat 的默认模式。不过，Tomcat 处理静态 HTML 的能力不如Apache 服务器。目前 Tomcat 最新版本为 7.0.27 Released。本系统采用 Tomcat 6.0版本。2.2 关键技术2.2.1JSPJSP（Java Server Pages）是由 Sun Microsystems 公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP 技术有点类似 ASP 技术，它是在传统的网页 HTML

22、文件（*.htm,*.html）中插入 Java 程序段（Scriptlet）和 JSP 标记（tag） ，从而形成 JSP 文件（*.jsp） 。 用 JSP 开发的 Web 应用是跨平台的，既能在 Linux 下运行，也能在其他操作系统上运行。JSP 页面由 HTML 代码和嵌入其中的 Java 代码所组成。服务器在页面被客户端请求以后对这些 Java 代码进行处理，然后将生成的 HTML 页面返回给客户端的浏览器。Java Servlet 是 JSP 的技术基础，而且大型的 Web 应用程序的开发需要 Java Servlet和 JSP 配合才能完成。JSP 具备了 Java 技术的简单

23、易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。JSP 是一种编译性程序，当一个 JSP 应用程序被首次访问时，JSP 所在的服务器首先将 JSP 程序转变成为 java 程序，然后编译成 class 类文件，最后加载到服务器存中为客户端请求提供服务。客户请求结束后，依然驻留存，等待第二次请求到达。所以JSP 网页在执行上通常是首次执行比较慢，但以后的执行速度要快很多。这是 ASP 程序锁不具备的9。JSP 有五种置对象：1. request 对象：该对象封装了用户提交的信息，通过调用该对象相应的方法可以获取封装的信息，即使用该对象可以获取用户提交信息。它是 Serv

24、letRequest的实例。2. response 对象：对客户的请求做出动态的响应，向客户端发送数据。3. Session 对象：session 对象是一个 JSP 置对象，它在第一个 JSP 页面被装载时自动创建，完成会话期管理。从一个客户打开浏览器并连接到服务器开始，到客户关闭浏览器离开这个服务器结束，被称为一个会话。当一个客户访问一个服务器时，可能会在这个服务器的几个页面之间反复连接，反复刷新一个页面，服务器应当通过某种办法知道这是同一个客户，这就需要 session 对象。4. application 对象：服务器启动后就产生了这个 application 对象，当客户在所访问的的各

25、个页面之间浏览时，这个 application 对象都是同一个，直到服务器关闭。但是与 session 不同的是，所有客户的 application 对象都是同一个，即所有客户共享这个置的 application 对象。5. out 对象：out 对象是一个输出流，用来向客户端输出数据。out 对象用于各种数据的输出。 5 / 582.2.2JavaScriptJavaScript 是 Netscape 公司开发的一种脚本语言。JavaScript 的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含更多的活跃的元素和更加精彩的容。JavaScript 自身存在 3 个弊端

26、，即复杂的文档对象模型（DOM） ，不一致的浏览器实现和缺乏便捷的开发、调试工具。正当 JavaScript 从开发者的视线中渐渐隐去时，一种新型的基于 JavaScript 的Web 技术Ajax（Asynchronous JavaScript And XML，异步的 JavaScript 和 XML）诞生了。而使人们真正认识到 Ajax 技术的强大的导火索是 Google 公司推出的一系列新型 Web 应用，例如 Gmail、Google Suggest 和 Google Map 等。互联网中基于JavaScript 的应用越来越多，使 JavaScript 不再是一种仅仅用于制作 Web

27、 页面的简单脚本3。2.2.3 Ajax 技术Ajax 即“Asynchronous JavaScript and XML” （异步 JavaScript 和 XML） ，Ajax 不是一种新的编程语言，而是一种用于创建更好更快以与交互性更强的 Web 应用程序的技术。通过 Ajax，JavaScript 可使用 JavaScript 的 XML Request 对象来直接与服务器进行通信4。通过这个对象 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。Ajax 在浏览器与 Web 服务器之间使用异步数据传输（ 请求） ，这样就可使网页从服务器请求少量的信息，而不是整个页

28、面。Ajax 可使因特网应用程序更小、更快，更友好。Ajax 是一种独立于 Web 服务器软件的浏览器技术2。2.2.4 jQuery 技术jQuery 是继 prototype 之后又一个优秀的 JavaScript 框架。它是轻量级的 js 库(压缩后只有 21k) ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+，FF 1.5+，Safari 2.0+，Opera 9.0+） 。jQuery 使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为提供 Ajax 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细

29、，同时还有许多成熟的插件可供选择。jQuery能够使用户的 HTML 页保持代码和 HTML 容分离，也就是说，不用再在 HTML 里面插入一堆 js 来调用命令了，只需定义 id 即可。jQuery 凭借简洁的语法和跨平台的兼容性，极简化了 JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发Ajax 的操作，其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者还是项目管理者，都很有必要去学习 jQuery。jQuery 强调的理念是写得少，做得多。jQuery 独特的选择

30、器、链式操作、事件处理机制和封装完善的 Ajax 都是其他 JavaScript 库望尘莫与的1。2.2.5Struts 技术Struts 是开源软件。使用 Struts 的目的是为了帮助我们减少在运用 MVC 设计模型来开发 Web 应用的时间。如果我们想混合使用 Servlets 和 JSP 的优点来建立可扩展的应用，struts 是一个不错的选择。Struts 1 框架以 ActionServlet 作为核心控制器，整个应用由客户端请求驱动。当客户端向 Web 应用发送请求时，请求将被 Struts 1 的核心控制器 ActionServlet 拦 截，ActionServlet 根据请

31、求决定是否需要调用业务逻辑控制器处理用户请求（实际上，业务逻辑控制器还是控制器，它只是负责调用模型来处理用户请求） ，当用户请求处理完成后，其处理结果通过 JSP 呈现给用户。对于整个 Struts 1 框架而言，控制器就是它的核心，Struts 1 的控制器由两个部分组成：核心控制器和业务逻辑控制器。其中核心控制器就是 ActionServlet，由Struts 1 框架提供；业务逻辑控制就是用户自定义的 Action，由应用开发者提供。对于大部分用户请求而言，都需要得到服务器的处理。当用户发送一个需要得到服务器处理的请求时，该请求被 ActionServlet 拦截到，ActionServ

32、let 将该请求转发给对应的业务逻辑控制器，业务逻辑控制器调用模型来处理用户请求；如果用户请求只是希望得到某个 URL 资源，则由 ActionServlet 将被请求的资源转发给用户。Struts 2 与 Struts 1 相比，确实有很多革命性的改进，但它并不是新发布的新框架，而是在另一个赫赫有名的框架：WebWork 基础上发展起来的。从某种程度上来讲，Strut2 没有继承 Struts 1 的血统，而是继承了 WebWork 的血统。或者说，WebWork 衍生出了 Struts 2，而不是 Struts 1 衍生了 Struts 2。因为 Struts 2 是 WebWork 的升

33、级，而不是一个全新的框架，因此稳定性、性能等各方面都有很好的保证；而且吸收了 Struts 1 和 WebWork 两者的优势，因此，是一个非常值得期待的框架15。2.3 系统环境2.3.1 开发环境开发模式系统基于 Browser/Server 模式进行设计开发工具：myeclipse8.6、JDK6.0开发语言：JAVA：、JSP、HTML、JavaScript后台数据库：MySQL Server 5.1服务器：采用 Tomcat 6.0 服务器2.3.2 运行环境硬件环境：1. 服务器端服务器端的最低配置是由建立站点所需的软件来决定的，在最低配置的情况下，服务器的往往不尽如人意，现在的硬

34、件性能已经相当出色，而且价格也很便宜，因此通常应给服务器端配置高性能的硬件。本网络系统服务器端的配置如下：处理器：Inter Pentium4 1.6GHz 或更高存：512MB硬盘空间：80GB光驱：CD-ROM 48X显卡：SVAG 显示适配器2. 用户端因为客户端主要用于浏览和操作数据，所以对客户端的硬件要求不高，不过现在的电脑很高的性价比，因此需要的配置应该高于下面的配置：处理器：Inter Pentium 1.0GHz 或更高 7 / 58存：256MB硬盘空间：40GB光驱：CD-ROM 48X显卡：SVAG 显示适配器。软件环境：1. 服务器端操作系统：Windows 2000

35、Server网络协议：TCP/IPweb 服务器：Tomcat6.0数据库：MySQL Server 5.1浏览器：Internet Explorer 6.0 以上2. 用户端操作系统：Windows 98/2000/XP网络协议：TCP/IP数据库：MySQL Server 5.1浏览器：Internet Explorer 6.0 以上 第第 3 3 章章 jQueryjQuery 技术技术3.1 jQuery 简介jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库，是一个由 John Resig创建于 2006 年 1 月的开源项目。现在的 jQuery 团

36、队主要包括核心库、UI 和插件等开发人员以与推广和涉与维护人员。jQuery 凭借简洁的语法和跨平台的兼容性，极简化了 JavaScript 开发人员遍历 HTML 文档、操作 DOM、处理事件、执行动画和开发 Ajax的操作，其独特而又优雅的代码风格改变了 JavaScript 程序员的设计思路和编写程序的方式1。3.2 配置 jQuery 环境为了能顺利的应用 jQuery 技术，首先必须要进入 jQuery 的官方 jquery./，下载最新的 jQuery 库文件。jQuery 库的类型分为两种，分别是jQuery1.3.1（18KB，Minified and Gripped）和jQu

37、ery1.3.1（114KB，Uncompressed） 。两者的区别在于前者是完整无压缩版，主要用于学习、测试和开发，后者是经过 JSMin 等工具压缩后的版本，主要用于产品和项目。jQuery 不需要安装，把下载的 jquery-1.3.1.js 放到上的一个公共位置，想要在某个页面上使用 jQuery 时，只需要在相关的 HTML 文档中引入该库文件的位置即可。13.3 编写简单的 jQuery 代码在开始编写 jQuery 程序之前，首先应该明确一点，在 jQuery 库中，$就是 jQuery的一个简写形式，例如$(“#foo”)和 jQuery(“#foo”)是等价的，$.ajax

38、 和jQuery.ajax 是等价的。下面展示一个简单的 jQuery 程序。$(document).ready(function()alert(“Hello World!”);)这段代码的作用类似于传统 JavaScript 中得 window.onload 方法。3.4 jQuery 选择器 9 / 58选择器是 jQuery 的根基，在 jQuery 中，对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器。在开始了解 jQuery 选择器之前，有必要了解一下 CSS 技术。CSS 是一项出色的技术，它使得网页的结构和表现样式完全分离。利用 CSS 选择器能轻松地对某个元素添加样式

39、而不改动 HTML 结构，只需通过添加不同的 CSS 规则，就可以得到各种不同样式的网页。常用的 CSS 选择器：1. 标签选择器 语法：ECSS 规则 以文档元素为选择符2. ID 选择器 语法：#ID CSS 规则 以文档元素的唯一标识符 ID 作为选择符3. 类选择器 语法：E.class CSS 规则 以文档元素的 class 作为选择符4. 群组选择器 语法：E1,E2,E3 CSS 规则 多个选择符应用同样的样式规则5. 后代选择器 语法：E F CSS 规则 元素 E 的任意后代元素 F6. 通配选择器 语法：* CSS 规则 以文档的所有元素作为选择符8jQuery 中的选择器

40、完全继承了 CSS 的风格。利用 jQuery 选择器，可以非常便捷和快速地找出特定的 DOM 元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器。jQuery 选择器的优势：(1)简洁的写法$()函数在很多 JavaScript 类库中都被作为一个选择器函数来使用，在 jQuery中也不例外。其中，$(“#ID”)用来代替 document.getElementById()函数，即通过 ID 获取元素；$(“tagName”)用来代替document.getElementByTagName()函数，即通过标签名获取 HTML 元素。(2)支持 CSS1 到 CSS3 选择器(

41、3)完善的处理机制使用 jQuery 获取网页中不存在的元素也不会报错7。3.5 jQuery 与 Ajax 的应用Ajax 全称为“Asynchronous JavaScirpt and XML” （异步 JavaScript 和 XML） ，它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现，揭开了无刷新更新页面的新时代，并有代替传统的 Web 方式和通过隐藏的框架来进行异步提交的趋势，是 Web 开发应用的一个里程碑7。Ajax 的优势：1. 不需要插件支持Ajax 不需要任何浏览器插件，就可以被大多数主流浏览器所支持，用户只需要允许 Jav

42、aScript 在浏览器上执行即可。2. 优秀的用户体验这是 Ajax 技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web 应用程序能更为迅速地回应用户的操作。3. 提高 Web 程序的性能与传统模式相比，Ajax 模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是通过表单来实现的，而数据获取是靠全页面刷新来重新 获取整页的容。而 Ajax 模式只是通过 XML Request 对象向服务器提交希望提交的数据，即按需发送。4. 减轻服务器和宽带的负担Ajax 的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建 Ajax

43、 引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来水处理，减轻服务器和宽带的负担。Ajax 的不足：1. 浏览器对 XML Request 对象的支持度不足Ajax 的不足之一首先来自于浏览器。Internet Explorer 在 5.0 与以后的版本后才支持 XML Request 对象，Mozilla、Netscape 等浏览器更在其后。为了使得 Ajax 应用能在各个浏览器中正常运行，程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别，来让 Ajax 应用能够很好地兼容各个浏览器。这使得 Ajax 开发的难度比普通的 Web 开发高出很多，许多程序员因此对 A

44、jax 望而生畏。2. 破坏浏览器前进、后退按钮的正常功能在传统的网页中，用户经常会习惯性的使用浏览器自带的“前进”和“后退”按钮，然而 Ajax 改变了此 Web 浏览习惯。在 Ajax 中“前进”和“后退”按钮的功能会失效，但相对于传统的方式却麻烦了许多，对于大多数程序员宁可放弃前进、后退功能，也不愿意在繁琐的逻辑中去处理该问题。然而，对于用户来说，他们经常会碰到这种情况，当单机一个按钮触发了一个 Ajax 交互后又觉得不想这样做，接着会习惯性地单击“后退”按钮，结果发生了最不愿意看到的结果，浏览器后退到了先前的一个页面，通过 Ajax 交互得到的容完全消失了。3. 对搜索引擎的支持的不足

45、对于搜索引擎的支持也是 Ajax 的一项缺憾。通过搜索引擎都是通过爬虫程序来对互联网上的数以亿计的海量数据来进行搜索整理的，然而爬虫程序现在还不能理解那些奇怪的 JavaScript 代码和因此引起的页面容的变化，这使得应用 Ajax 的站点在网络推广上相对于传统站点明显处于劣势。4. 开发和调试工具的缺乏JavaScript 是 Ajax 的重要组成部分，在目前，由于缺少很好的 JavaScript 开发和调试工具，使很多 Web 开发者对 JavaScript 望而生畏，这对于编写 Ajax代码就更加困难了。同时，目前许多 Web 开发者已经习惯使用可视化的工具，对亲自动手编写代码有畏惧感

46、，这也在一定程度上影响了大家对 Ajax 的应用。jQuery 中的 Ajax：Ajax 的核心是 XML Request 对象，它是 Ajax 实现的关键发送异步请求，接收响应与执行回调都是通过它来完成的。我们先来看一些简单的方法，这些方法都是对 jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到 jQuery.ajax()的（这个后面会说到） 。1. load( url, data, callback )：载入远程 HTML 文件代码并插入至 DOM 中。url(String) ：请求的 HTML 页的 URL 地址。 11 / 58data(

47、Map) ：（可选参数）发送至服务器的 key/value 数据。callback(Callback)：（可选参数）请求完成时（不需要是 success 的）的回调函数。这个方法默认使用 GET 方式来传递的，如果data参数有传递数据进去，就会自动转换为 POST 方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如url #some selector。这个方法可以很方便的动态加载一些 HTML 文件，例如表单。示例代码：$(.ajax.load).load(.cnblogs./QLeelulu/archive/

48、2008/03/30/1130270.html .post,function (responseText, textStatus, XML Request)this;/在这里 this 指向的是当前的 DOM 对象，即$(.ajax.load)0/alert(responseText);/请求返回的容/alert(textStatus);/请求状态：success，error/alert(XML Request);/XML Request 对象);2. jQuery.get( url, data, callback )：使用 GET 方式来进行异步请求参数：url(String)：发送请求的

49、URL 地址。data(Map)：（可选）要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为 QueryString 附加到请求 URL 中。callback(Function)：（可选） 载入成功时回调函数（只有当 Response的返回状态是 success 才是调用该方法） 。这是一个简单的 GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax 示例代码：$.get(./Ajax.aspx, Action:get,Name:lulu, function (data, textStatus)/返回的 data

50、可以是 xmlDoc, jsonObj, html, text, 等等.this; / 在这里 this 指向的是 Ajax 请求的选项配置信息，请参考下图alert(data);/alert(textStatus);/请求状态：success，error 等等。 当然这里捕捉不到 error，因为 error 的时候根本不会运行该回调函数/alert(this););jQuery.get()回调函数里面的 this，指向的是 Ajax 请求的选项配置信息（图 3-1）： 图 3-1Ajax 请求选项配置信息3. jQuery.post( url, data, callback, type )

51、：使用 POST 方式来进行异步请求参数：url(String)：发送请求的 URL 地址.data(Map)：（可选）要发送给服务器的数据，以 Key/value 的键值对形式表示。callback(Function)：（可选）载入成功时回调函数（只有当 Response 的返回状态是 success 才是调用该方法） 。type(String)：（可选）官方的说明是：Type of data to be sent。其实应该为客户端请求的类型（JSONX，ML 等等）这是一个简单的 POST 请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.aja

52、x。示例代码：Ajax.aspx：Response.ContentType = application/json;Response.Write(result: + RequestName + ,你好！(这消息来自服务器);jQuery 代码：$.post(Ajax.aspx, Action: post, Name: lulu ,function (data, textStatus)/ data 可以是 xmlDoc, jsonObj, html, text, 等等./this; / 这个 Ajax 请求的选项配置信息，请参考 jQuery.get()说到的 thisalert(data.res

53、ult);, json);点击提交：这里设置了请求的格式为json查看请求报头（图 3-2）： 13 / 58图 3-2 请求报头信息如果你设置了请求的格式为json，此时你没有设置 Response 回来的ContentType 为：Response.ContentType = application/json，那么你将无法捕捉到返回的数据。注意一下，alert(data.result);由于设置了 Accept 报头为“json” ，这里返回的data 就是一个对象，并不需要用 eval()来转换为对象。4. jQuery.getScript( url, callback )：通过 GET

54、 方式请求载入并执行一个JavaScript 文件。参数：url(String)：待载入 JS 文件地址。callback(Function)：（可选）成功载入后回调函数。jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。1.2 中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。这个方法可以用在例如当只有编辑器 focus()的时候才去加载编辑器需要的 JS 文件。下面看一些示例代码：加载并执行 test.js。jQuery 代码：$.getSc

55、ript(test.js);加载并执行 AjaxEvent.js，成功后显示信息。jQuery 代码:$.getScript(AjaxEvent.js, function()alert(AjaxEvent.js 加载完成););5. jQuery Ajax 事件Ajax 请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在 jQuery 这里有两种 Ajax 事件：局部事件和全局事件。局部事件就是在每次的 Ajax 请求时在方法定义的，例如： $.ajax( beforeSend: function() / Handle the beforeSend event , com

56、plete: function() / Handle the complete event / . );全局事件是每次的 Ajax 请求都会触发的，它会向 DOM 中的所有元素广播，在上面 getScript()示例中加载的脚本就是全局 Ajax 事件。全局事件可以如下定义： $(#loading).bind(ajaxSend, function() $(this).show(); ).bind(ajaxComplete, function() $(this).hide(); );或者： $(#loading).ajaxStart(function() $(this).show(); ); 我

57、们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了： $.ajax( url: test.html, global: false,/ 禁用全局 Ajax 事件. / . );下面是 jQuery 官方给出的完整的 Ajax 事件列表：ajaxStart(Global Event)This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.beforeSend(Local Event)This event, which is tr

58、iggered before an Ajax request is started, allows you to modify the XML Request object (setting additional headers, if need be.)ajaxSend(Global Event)This global event is also triggered before the request is run.success(Local Event)This event is only called if the request was successful (no errors f

59、rom the server, no errors with the data).ajaxSuccess(Global Event)This event is also only called if the request was successful.error(Local Event)This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).ajaxError(Global E

60、vent)This global event behaves the same as the local error plete(Local Event)This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests. 15 / 58ajaxComplete(Global Event)This event behaves the same as the compl