jQueryAjax聊天室毕业设计完整版

年4月19日jQueryAjax聊天室毕业设计完整版文档仅供参考基于jQuery的Ajax聊天室应用摘要随着网络的逐渐普及，以及网络技术的不断发展，人们经过网络进行交流的方式变得多样化。网络聊天室便是其中之一。聊天室的即时交流方式满足了网络中多人同时聊天交流的需要，使得较多的人在同一个聊天页面进行交流变得方便，简单。本设计的目的是采用jQuery框架开发一个网络聊天室。jQuery是一个快速和简洁的JavaScript库，它简化了HTML文件的文档遍历、事件处理、动画以及快速Web开发应用的Ajax技术。本聊天室具有常见聊天室的所有功能，包括多人同时在线聊天,能显示在线用户列表，同时，为了管理聊天室中的用户，设计了用户注册登陆功能,增加了聊天室的操作性。本文首先介绍了聊天室所使用到的一些关键技术，例如jQuery技术和Ajax技术，接着介绍了该系统的设计思路，然后是对系统的详细介绍，包括系统中创立的数据库以及系统的具体功能介绍。聊天室在互联网上的应用非常普遍，实现的方法也是多种多样，相比之下，采用优秀的jQuery框架实现的聊天室更加高效、流畅，更加富有前景。关键词：聊天室；jQuery；Ajax

JQueryAjax-basedChatRoomApplicationAbstractWiththeincreasingpopularityofthenetworkandthedevelopmentofnetworktechnology,thewaytocommunicatewithothersthroughthenetworkbecomesdiverse.Internetchatroomisoneoftheway.Itmeetstheneedofpeoplethatcancommunicatewithotherswhoareonlineinstantly,andmakespeoplechattingonthesamepagebecomesconvenientandsimple.

ThedesignaimstodevelopachatroombasedonjQuerystructure.jQueryisafastandconciseJavaScriptLibrarythatsimplifiesHTMLdocumenttraversing,eventhandling,animating,andAjaxinteractionsforrapidwebdevelopment.Thechatroomhasallcommonfunctions,includingmorethanonechattinginthesametimeandcandisplayandupdatethelistofonlineusersinstantly.Meanwhile,inordertomanagetheusers,thechatroomhastheuserregistrationloginfunctionwhichincreasetheoperabilityofthechatroom.Thepaperfirstintroducesthekeytechnologiesusedsuchasjqueryandajax,thenintroducedthesystemdesignandrequirementsanalysis,followedbyadetaileddescriptionofthesystem,includingadatabasecreatedandspecificfeaturesintroducedinthedesign.TheapplicationofthechatroomisverycommonontheInternet,andtheapproachesofimplementationarevaried.Comparedwiththosetraditional,thechatroombasedonjQueryismoreeffectiveandfast,andhaveabrightoutlook.

Keywords:ChatRoom;Ajax;jQuery

目录引言 1第1章绪论 21.1系统概述 21.2需求背景 21.3系统开发目的与意义 2第2章开发工具及相关技术介绍 32.1开发工具 32.1.1MyEclipse介绍 32.1.2MySQL数据库介绍 32.1.3Tomcat6.0服务器 32.2关键技术 42.2.1JSP 42.2.2JavaScript 42.2.3Ajax技术 52.2.4jQuery技术 52.2.5Struts技术 52.3系统环境 62.3.1开发环境 62.3.2运行环境 6第3章jQuery技术 83.1jQuery简介 83.2配置jQuery环境 83.3编写简单的jQuery代码 83.4jQuery选择器 83.5jQuery与Ajax的应用 9第4章系统设计 174.1基于jQuery的Ajax聊天室功能要求 174.2聊天室总体功能结构图 174.3聊天室总体架构 174.4模块设计 194.5数据库设计 20第5章系统实现 225.1项目代码结构设计 225.2详细设计介绍 225.2.1登录功能设计 225.2.2注册功能设计 255.2.3聊天功能设计 28第6章系统测试 386.1单元测试 386.2集成测试 396.3系统测试 39结论与展望 41致谢 42参考文献 43附录 44附录A外文文献及其翻译 44附录B主要参考文献的题录及摘要 51

插图清单TOC\h\z\t"副标题,图题"\c图5-1项目代码结构图 22图5-2登陆页面图 23图5-3登陆失败图 23图5-4注册页面图 26图5-5聊天页面图 29图5-6xia的登录页面图 31图5-7ss的登录页面图 31图5-8ss的聊天页面图 32图5-9xia的聊天页面图 32

表格清单TOC\h\z\t"表x"\c表4-1用户信息表 21表4-2聊天信息表 21表6-1用户登录信息等价类划分 38表6-2用户登录信息测试用例 39引言Internet是当前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，WorldWideWeb（简称WWW）发展十分迅速，成为当前世界上最大的信息资源宝库。如今，人们不但能够在网上查询自己需要的资源，而且能够经过网络进行实时的沟通。从实时性和有效性上都超过了用信件和Email，而且在费用上要低于电话。因而各种聊天服务备受用户青睐，在这方面的开发与应用也较多，聊天服务也成为互联网提供的重要服务之一，因此，建立一个好的在线交流聊天系统十分重要。互联网的大多数网站都建有聊天室，而且有专业聊天网站提供聊天服务。网上聊天系统是为人们进行交流和联系提供的一个平台。利用现代的网络资源优势和技术优势，经过提供完善的网上聊天系统，以达到增进人们与人们之间的信息交流和沟通的目的。第1章绪论1.1系统概述近年来计算机技术的快速发展，特别是计算机网络的发展，越来越深刻的改变了人们生活的方方面面，使得人们能以更低廉的价格，开发出更方便、更实用的网络工具。各种在线服务系统，更是深刻的影响了人们的联系和交流方式，使得人们能够在远隔千里之遥随时通讯。过去的种种陈旧的联系方式，已经不能满足现代生活的需要。网上聊天系统作为一种方便拥有共同兴趣爱好的人们之间联系的实用系统便应运而生。本设计主要是实现一个能够方便人们在线交流的聊天室，能够及时显示在线人员和聊天内容。1.2需求背景随着计算机网络日新月异的发展，人们的交流方式越来越多，传统的交流方式，如：信件、电报、电话等已经难以满足人们的交流要求，在互联网上即时的和好友取得联系，已经成为当今社会人们主流的联系方式。两台计算机之间进行即时通讯、发送文件等交流方式已经成为时代的潮流。因此出现了QQ等聊天工具。然而QQ等聊天工具虽然方便、实用，可是，娱乐功能太多，有很多吸引人的娱乐功能，从一定程度上来说，是一种娱乐工具，不能作为用于作为即时通讯、文件共享的专用工具。当前，用于实现单一的即时通讯、文件共享的软件实在太少，而且，它们中大部分都是绝正确C/S模式，对远程服务器有非常大的依赖性，没有彻底实现点对点的交流。在常见的聊天室开发中，有基于ASP、基于SOCKET、基于JAVA开发的聊天室，本系统采用基于JSP采用jQuery和Ajax技术进行开发。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。因此，采用JSP开发在线聊天系统能够提高开发效率和系统性能。网上聊天系统是常见的，也是比较有代表性的Internet应用系统之一，其实现的难点是聊天怎样保存聊天内容以及怎么样将聊天的信息及时快捷地在服务器和用户之间进行传递和共享。当前常见的聊天内容保存方式有三种：一是利用数据库直接保存聊天内容；二是利用文本文件保存聊天内容三是利用Application对象保存聊天内容。这三种聊天内容保存方法的基本过程和开发的难易程度相似。本系统采用第二种方式，将聊天信息存入数据库中，管理起来较方便。1.3系统开发目的与意义网络聊天系统是为人与人之间进行交流和联系提供的一个平台。经过提供完善的聊天服务和规范的管理，能够达到增进人与人之间的感情，促进人们之间的沟通，方便人们联系的目的；同时本系统能够拉近人与人之间的距离，丰富人们的业余时间，为人们在网络中交友提供了便捷的渠道。第2章开发工具及相关技术介绍2.1开发工具2.1.1MyEclipse介绍MyEclipse企业级工作平台（MyEclipseEnterpriseWorkbench，简称MyEclipse）是对EclipseIDE的扩展，利用它我们能够在数据库和JavaEE的开发、发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。2.1.2MySQL数据库介绍MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQLAB公司。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内。这样就增加了速度并提高了灵活性。MySQL的SQL“结构化查询语言”。SQL是用于访问数据库的最常见标准化语言。MySQL软件采用了GPL（GNU通用公共许可证）。由于其体积小、速度快、总体拥有成本低，特别是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。MySQL是一个快速、多线程、多用户的SQL数据库服务器。它支持正规的SQL查询语言和采用多种数据类型，能对数据进行各种详细的查询等。MySQL数据库的主要特征有：（1）MySQL的核心程序采用完全的多线程编程。线程是轻量级的进程，它能够灵活地为用户提供服务，而不过多的系统资源。用多线程和C语言实现的MySql能很容易充分利用CPU。（2）MySQL可运行在不同的操作系统下。（3）MySQL有一个非常灵活而且安全的权限和口令系统。当客户与MySQL服务器连接时，她们之间所有的口令传送被加密，而且MySQL支持主机认证。（4）MySQL支持ODBCforWindows。（5）MySQL支持大型的数据库。MySQL能够方便地支持上千万条记录的数据库。作为一个开放源代码的数据库，MySQL能够针对不同的应用进行相应的修改。（6）MySQL拥有一个非常快速而且稳定的基于线程的内存分配系统，能够持续使用面不必担心其稳定性。事实上，MySQL的稳定性足以应付一个超大规模的数据库。（7）强大的查询功能。MySQL支持查询的SELECT和WHERE语句的全部运算符和函数，而且能够在同一查询中混用来自不同数据库的表，从而使得查询变得快捷和方便[10]。2.1.3Tomcat6.0服务器Tomcat是Apache软件基金会（ApacheSoftwareFoundation）的Jakarta项目中的一个核心项目，由Apache、Sun和其它一些公司及个人共同开发而成。因为Tomcat技术先进、性能稳定，而且免费，因而深受Java爱好者的喜爱并得到了部分软件开发商的认可，成为当前比较流行的Web应用服务器。Tomcat同样也很受广大程序员的喜欢，因为它运行时占用的系统资源小，扩展性好，支持负载平衡与邮件服务等开发应用系统常见的功能；而且它还在不断的改进和完善中，任何一个感兴趣的程序员都能够更改它或在其中加入新的功能。Tomcat是一个轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP程序的首选。当配置正确时，Apache为HTML页面服务，而Tomcat实际上运行JSP页面和Servlet。另外，Tomcat和IIS、Apache等Web服务器一样，具有处理HTML页面的功能，另外它还是一个Servlet和JSP容器，独立的Servlet容器是Tomcat的默认模式。不过，Tomcat处理静态HTML的能力不如Apache服务器。当前Tomcat最新版本为7.0.27Released。本系统采用Tomcat6.0版本。2.2关键技术2.2.1JSPJSP（JavaServerPages）是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件（*.htm,*.html）中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件（*.jsp）。用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其它操作系统上运行。JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理，然后将生成的HTML页面返回给客户端的浏览器。JavaServlet是JSP的技术基础，而且大型的Web应用程序的开发需要JavaServlet和JSP配合才能完成。JSP具备了Java技术的简单易用，完全的面向对象，具有平台无关性且安全可靠，主要面向因特网的所有特点。JSP是一种编译性程序，当一个JSP应用程序被首次访问时，JSP所在的服务器首先将JSP程序转变成为java程序，然后编译成class类文件，最后加载到服务器内存中为客户端请求提供服务。客户请求结束后，依然驻留内存，等待第二次请求到达。因此JSP网页在执行上一般是首次执行比较慢，但以后的执行速度要快很多。这是ASP程序锁不具备的[9]。JSP有五种内置对象：1.request对象：该对象封装了用户提交的信息，经过调用该对象相应的方法能够获取封装的信息，即使用该对象能够获取用户提交信息。它是HttpServletRequest的实例。2.response对象：对客户的请求做出动态的响应，向客户端发送数据。3.Session对象：session对象是一个JSP内置对象，它在第一个JSP页面被装载时自动创立，完成会话期管理。从一个客户打开浏览器并连接到服务器开始，到客户关闭浏览器离开这个服务器结束，被称为一个会话。当一个客户访问一个服务器时，可能会在这个服务器的几个页面之间重复连接，重复刷新一个页面，服务器应当经过某种办法知道这是同一个客户，这就需要session对象。4.application对象：服务器启动后就产生了这个application对象，当客户在所访问的网站的各个页面之间浏览时，这个application对象都是同一个，直到服务器关闭。可是与session不同的是，所有客户的application对象都是同一个，即所有客户共享这个内置的application对象。5.out对象：out对象是一个输出流，用来向客户端输出数据。out对象用于各种数据的输出。2.2.2JavaScriptJavaScript是Netscape公司开发的一种脚本语言。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系，使网页包含更多的活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术——Ajax（AsynchronousJavaScriptAndXML，异步的JavaScript和XML）诞生了。而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用，例如Gmail、GoogleSuggest和GoogleMap等。互联网中基于JavaScript的应用越来越多，使JavaScript不再是一种仅仅用于制作Web页面的简单脚本[3]。2.2.3Ajax技术Ajax即“AsynchronousJavaScriptandXML”（异步JavaScript和XML），Ajax不是一种新的编程语言，而是一种用于创立更好更快以及交互性更强的Web应用程序的技术。经过Ajax，JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信[4]。经过这个对象JavaScript可在不重载页面的情况与Web服务器交换数据。Ajax在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。Ajax可使因特网应用程序更小、更快，更友好。Ajax是一种独立于Web服务器软件的浏览器技术[2]。2.2.4jQuery技术jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+，FF1.5+，Safari2.0+，Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，而且方便地为网站提供Ajax交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页保持代码和HTML内容分离，也就是说，不用再在HTML里面插入一堆js来调用命令了，只需定义id即可。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作，其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、业余爱好者还是项目管理者，都很有必要去学习jQuery。jQuery强调的理念是写得少，做得多。jQuery独特的选择器、链式操作、事件处理机制和封装完善的Ajax都是其它JavaScript库望尘莫及的[1]。2.2.5Struts技术Struts是开源软件。使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时间。如果我们想混合使用Servlets和JSP的优点来建立可扩展的应用，struts是一个不错的选择。Struts1框架以ActionServlet作为核心控制器，整个应用由客户端请求驱动。当客户端向Web应用发送请求时，请求将被Struts1的核心控制器ActionServlet拦截，ActionServlet根据请求决定是否需要调用业务逻辑控制器处理用户请求（实际上，业务逻辑控制器还是控制器，它只是负责调用模型来处理用户请求），当用户请求处理完成后，其处理结果经过JSP呈现给用户。对于整个Struts1框架而言，控制器就是它的核心，Struts1的控制器由两个部分组成：核心控制器和业务逻辑控制器。其中核心控制器就是ActionServlet，由Struts1框架提供；业务逻辑控制就是用户自定义的Action，由应用开发者提供。对于大部分用户请求而言，都需要得到服务器的处理。当用户发送一个需要得到服务器处理的请求时，该请求被ActionServlet拦截到，ActionServlet将该请求转发给对应的业务逻辑控制器，业务逻辑控制器调用模型来处理用户请求；如果用户请求只是希望得到某个URL资源，则由ActionServlet将被请求的资源转发给用户。Struts2与Struts1相比，确实有很多革命性的改进，但它并不是新发布的新框架，而是在另一个赫赫有名的框架：WebWork基础上发展起来的。从某种程度上来讲，Strut2没有继承Struts1的血统，而是继承了WebWork的血统。或者说，WebWork衍生出了Struts2，而不是Struts1衍生了Struts2。因为Struts2是WebWork的升级，而不是一个全新的框架，因此稳定性、性能等各方面都有很好的保证；而且吸收了Struts1和WebWork两者的优势，因此，是一个非常值得期待的框架[15]。2.3系统环境2.3.1开发环境开发模式系统基于Browser/Server模式进行设计开发工具：myeclipse8.6、JDK6.0开发语言：JAVA：、JSP、HTML、JavaScript后台数据库：MySQLServer5.1服务器：采用Tomcat6.0服务器2.3.2运行环境硬件环境：1.服务器端服务器端的最低配置是由建立站点所需的软件来决定的，在最低配置的情况下，服务器的往往不尽如人意，现在的硬件性能已经相当出众，而且价格也很便宜，因此一般应给服务器端配置高性能的硬件。本网络系统服务器端的配置如下：处理器：InterPentium41.6GHz或更高内存：512MB硬盘空间：80GB光驱：CD-ROM48X显卡：SVAG显示适配器2.用户端因为客户端主要用于浏览和操作数据，因此对客户端的硬件要求不高，不过现在的电脑很高的性价比，因此需要的配置应该高于下面的配置：处理器：InterPentium1.0GHz或更高内存：256MB硬盘空间：40GB光驱：CD-ROM48X显卡：SVAG显示适配器。软件环境：服务器端操作系统：WindowsServer网络协议：TCP/IPweb服务器：Tomcat6.0数据库：MySQLServer5.1浏览器：InternetExplorer6.0以上用户端操作系统：Windows98//XP网络协议：TCP/IP数据库：MySQLServer5.1浏览器：InternetExplorer6.0以上第3章jQuery技术3.1jQuery简介jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由JohnResig创立于1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站涉及维护人员。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作，其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式[1]。3.2配置jQuery环境为了能顺利的应用jQuery技术，首先必须要进入jQuery的官方网站，下载最新的jQuery库文件。jQuery库的类型分为两种，分别是jQuery1.3.1（18KB，MinifiedandGripped）和jQuery1.3.1（114KB，Uncompressed）。两者的区别在于前者是完整无压缩版，主要用于学习、测试和开发，后者是经过JSMin等工具压缩后的版本，主要用于产品和项目。jQuery不需要安装，把下载的jquery-1.3.1.js放到网站上的一个公共位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件的位置即可。<scriptsrc=”../scripts/jquery-1.3.1.js”type=”text/javascript”></script>[1]3.3编写简单的jQuery代码在开始编写jQuery程序之前，首先应该明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)是等价的，$.ajax和jQuery.ajax是等价的。下面展示一个简单的jQuery程序。<scriptsrc=”../scripts/jquery-1.3.1.js”type=”text/javascript”></script><scripttype=”text/javascript”> $(document).ready(function(){ alert(“HelloWorld!”);})</script>这段代码的作用类似于传统JavaScript中得window.onload方法。3.4jQuery选择器选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。在开始了解jQuery选择器之前，有必要了解一下CSS技术。CSS是一项出众的技术，它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需经过添加不同的CSS规则，就能够得到各种不同样式的网页。常见的CSS选择器：1.标签选择器语法：E{CSS规则}以文档元素为选择符2.ID选择器语法：#ID{CSS规则}以文档元素的唯一标识符ID作为选择符3.类选择器语法：E.class{CSS规则}以文档元素的class作为选择符4.群组选择器语法：E1,E2,E3{CSS规则}多个选择符应用同样的样式规则5.后代选择器语法：EF{CSS规则}元素E的任意后代元素F6.通配选择器语法：*{CSS规则}以文档的所有元素作为选择符[8]jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器，能够非常便捷和快速地找出特定的DOM元素，然后为她们添加相应的行为，而无需担心浏览器是否支持这一选择器。jQuery选择器的优势：(1)简洁的写法$()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中，$(“#ID”)用来代替document.getElementById()函数，即经过ID获取元素；$(“tagName”)用来代替document.getElementByTagName()函数，即经过标签名获取HTML元素。(2)支持CSS1到CSS3选择器(3)完善的处理机制使用jQuery获取网页中不存在的元素也不会报错[7]。3.5jQuery与Ajax的应用Ajax全称为“AsynchronousJavaScirptandXML”（异步JavaScript和XML），它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现，揭开了无刷新更新页面的新时代，并有代替传统的Web方式和经过隐藏的框架来进行异步提交的趋势，是Web开发应用的一个里程碑[7]。 Ajax的优势：不需要插件支持Ajax不需要任何浏览器插件，就能够被大多数主流浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可。优秀的用户体验这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。提高Web程序的性能与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是经过表单来实现的，而数据获取是靠全页面刷新来重新获取整页的内容。而Ajax模式只是经过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。减轻服务器和宽带的负担Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创立Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来水处理，减轻服务器和宽带的负担。Ajax的不足：1.浏览器对XMLHttpRequest对象的支持度不足Ajax的不足之一首先来自于浏览器。InternetExplorer在5.0及以后的版本后才支持XMLHttpRequest对象，Mozilla、Netscape等浏览器更在其后。为了使得Ajax应用能在各个浏览器中正常运行，程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别，来让Ajax应用能够很好地兼容各个浏览器。这使得Ajax开发的难度比普通的Web开发高出很多，许多程序员因此对Ajax望而生畏。2.破坏浏览器前进、后退按钮的正常功能在传统的网页中，用户经常会习惯性的使用浏览器自带的“前进”和“后退”按钮，然而Ajax改变了此Web浏览习惯。在Ajax中“前进”和“后退”按钮的功能会失效，但相对于传统的方式却麻烦了许多，对于大多数程序员宁可放弃前进、后退功能，也不愿意在繁琐的逻辑中去处理该问题。然而，对于用户来说，她们经常会碰到这种情况，当单机一个按钮触发了一个Ajax交互后又觉得不想这样做，接着会习惯性地单击“后退”按钮，结果发生了最不愿意看到的结果，浏览器后退到了先前的一个页面，经过Ajax交互得到的内容完全消失了。3.对搜索引擎的支持的不足对于搜索引擎的支持也是Ajax的一项缺憾。经过搜索引擎都是经过爬虫程序来对互联网上的数以亿计的海量数据来进行搜索整理的，然而爬虫程序现在还不能理解那些奇怪的JavaScript代码和因此引起的页面内容的变化，这使得应用Ajax的站点在网络推广上相对于传统站点明显处于劣势。4.开发和调试工具的缺乏JavaScript是Ajax的重要组成部分，在当前，由于缺少很好的JavaScript开发和调试工具，使很多Web开发者对JavaScript望而生畏，这对于编写Ajax代码就更加困难了。同时，当前许多Web开发者已经习惯使用可视化的工具，对亲自动手编写代码有畏惧感，这也在一定程度上影响了大家对Ajax的应用。 jQuery中的Ajax： Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求，接收响应及执行回调都是经过它来完成的。我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的（这个后面会说到）。load(url,[data],[callback])：载入远程HTML文件代码并插入至DOM中。url(String)：请求的HTML页的URL地址。data(Map)：（可选参数）发送至服务器的key/value数据。callback(Callback)：（可选参数）请求完成时（不需要是success的）的回调函数。这个方法默认使用GET方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery1.2中，能够指定选择符，来筛选载入的HTML文档，DOM中将仅插入筛选出的HTML代码。语法形如"url#some>selector"。这个方法能够很方便的动态加载一些HTML文件，例如表单。示例代码：$(".ajax.load").load("",function(responseText,textStatus,XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象});jQuery.get(url,[data],[callback])：使用GET方式来进行异步请求参数：url(String)：发送请求的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能够是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请求选项配置信息jQuery.post(url,[data],[callback],[type])：使用POST方式来进行异步请求参数：url(String)：发送请求的URL地址.data(Map)：（可选）要发送给服务器的数据，以Key/value的键值对形式表示。callback(Function)：（可选）载入成功时回调函数（只有当Response的返回状态是success才是调用该方法）。type(String)：（可选）官方的说明是：Typeofdatatobesent。其实应该为客户端请求的类型（JSONX，ML等等）这是一个简单的POST请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码：Ajax.aspx：Response.ContentType="application/json";Response.Write("{result:'"+Request["Name"]+",你好！(这消息来自服务器)'}");jQuery代码：$.post("Ajax.aspx",{Action:"post",Name:"lulu"}, function(data,textStatus){ //data能够是xmlDoc,jsonObj,html,text,等等. //this;//这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this alert(data.result); },"json");点击提交：这里设置了请求的格式为"json"查看请求报头（图3-2）：图3-2请求报头信息如果你设置了请求的格式为"json"，此时你没有设置Response回来的ContentType为：Response.ContentType="application/json"，那么你将无法捕捉到返回的数据。注意一下，alert(data.result);由于设置了Accept报头为“json”，这里返回的data就是一个对象，并不需要用eval()来转换为对象。jQuery.getScript(url,[callback])：经过GET方式请求载入并执行一个JavaScript文件。参数：url(String)：待载入JS文件地址。callback\(Function)：（可选）成功载入后回调函数。jQuery1.2版本之前，getScript只能调用同域JS文件。1.2中，您能够跨域调用JavaScript文件。注意：Safari2或更早的版本不能在全局作用域中同步执行脚本。如果经过getScript加入脚本，请加入延时函数。这个方法能够用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件。下面看一些示例代码：加载并执行test.js。jQuery代码：$.getScript("test.js");加载并执行AjaxEvent.js，成功后显示信息。jQuery代码:$.getScript("AjaxEvent.js",function(){ alert("AjaxEvent.js加载完成");});jQueryAjax事件Ajax请求会产生若干不同的事件，我们能够订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件和全局事件。局部事件就是在每次的Ajax请求时在方法内定义的，例如：$.ajax({beforeSend:function(){//HandlethebeforeSendevent},complete:function(){//Handlethecompleteevent}//...});全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面getScript()示例中加载的脚本就是全局Ajax事件。全局事件能够如下定义：$("#loading").bind("ajaxSend",function(){$(this).show();}).bind("ajaxComplete",function(){$(this).hide();});或者：$("#loading").ajaxStart(function(){$(this).show();});我们能够在特定的请求将全局事件禁用，只要设置下global选项就能够了：$.ajax({url:"test.html",global:false,//禁用全局Ajax事件.//...});下面是jQuery官方给出的完整的Ajax事件列表：ajaxStart(GlobalEvent)

ThiseventisbroadcastifanAjaxrequestisstartedandnootherAjaxrequestsarecurrentlyrunning.beforeSend(LocalEvent)Thisevent,whichistriggeredbeforeanAjaxrequestisstarted,allowsyoutomodifytheXMLHttpRequestobject(settingadditionalheaders,ifneedbe.)ajaxSend(GlobalEvent)

Thisglobaleventisalsotriggeredbeforetherequestisrun.success(LocalEvent)

Thiseventisonlycallediftherequestwassuccessful(noerrorsfromtheserver,noerrorswiththedata).ajaxSuccess(GlobalEvent)

Thiseventisalsoonlycallediftherequestwassuccessful.error(LocalEvent)

Thiseventisonlycalledifanerroroccurredwiththerequest(youcanneverhavebothanerrorandasuccesscallbackwitharequest).ajaxError(GlobalEvent)

Thisglobaleventbehavesthesameasthelocalerrorplete(LocalEvent)

Thiseventiscalledregardlessofiftherequestwassuccessful,ornot.Youwillalwaysreceiveacompletecallback,evenforsynchronousrequests.ajaxComplete(GlobalEvent)

ThiseventbehavesthesameasthecompleteeventandwillbetriggeredeverytimeanAjaxrequestfinishes.ajaxStop(GlobalEvent)

ThisglobaleventistriggerediftherearenomoreAjaxrequestsbeingprocessed.具体的全局事件请参考API文档。

好了，下面开始介绍jQuery里面功能最强的Ajax请求方法$.ajax()。jQuery.ajax(options)：经过HTTP请求加载远程数据。这个是jQuery的底层Ajax实现。简单易用的高层实现见$.get，$.post等。$.ajax()返回其创立的XMLHttpRequest对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。注意：如果你指定了dataType选项，请确保服务器返回正确的MIME信息，（如xml返回"text/xml"）。错误的MIME类型可能导致不可预知的错误。见SpecifyingtheDataTypeforAJAXRequests。

当设置datatype类型为‘script’的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。$.ajax()只有一个参数：参数key/value对象，包含各配置及回调函数信息。详细参数选项见下：jQuery1.2中，能够跨域加载JSON数据，使用时需将数据类型设置为JSONP。使用JSONP形式调用函数时，如“myurl?callback=?”jQuery将自动替换?为正确的函数名，以执行回调函数。数据类型设置为“jsonp”时，jQuery将自动调用回调函数。参数列表：参数名类型描述urlString（默认：当前页地址）发送请求的地址。typeString（默认："GET"）请求方式（"POST"或"GET"），默认为"GET"。注意：其它HTTP请求方法，如PUT和DELETE也能够使用，但仅部分浏览器支持。timeoutNumber设置请求超时时间（毫秒）。此设置将覆盖全局设置。asyncBoolean（默认:true）默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才能够执行。beforeSendFunction发送请求前可修改XMLHttpRequest对象的函数，如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。function(XMLHttpRequest){this;//theoptionsforthisajaxrequest}cacheBoolean（默认：true）jQuery1.2新功能，设置为false将不会从浏览器缓存中加载请求信息。completeFunction请求完成后回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象，成功信息字符串。function(XMLHttpRequest,textStatus){this;//theoptionsforthisajaxrequest}contentTypeString（默认："application/x-www-form-urlencoded"）发送信息至服务器时内容编码类型。默认值适合大多数应用场合。dataObject,

String发送到服务器的数据。将自动转换为请求字符串格式。GET请求中将附加在URL后。查看processData选项说明以禁止此自动转换。必须为Key/Value格式。如果为数组，jQuery将自动为不同值对应同一个名称。如{foo:["bar1","bar2"]}转换为'&foo=bar1&foo=bar2'。dataTypeString预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递，可用值:"xml"：返回XML文档，可用jQuery处理。"html"：返回纯文本HTML信息；包含script元素。"script"：返回纯文本JavaScript代码。不会自动缓存结果。"json"：返回JSON数据。"jsonp"：JSONP

格式。使用JSONP形式调用函数时，如"myurl?callback=?"，jQuery将自动替换?为正确的函数名，以执行回调函数。errorFunction（默认：自动判断（xml或html））请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest对象，错误信息，（可能）捕获的错误对象。function(XMLHttpRequest,textStatus,errorThrown){//一般情况下textStatus和errorThown只有其中一个有值this;//theoptionsforthisajaxrequest}globalBoolean（默认：true）是否触发全局AJAX事件。设置为false将不会触发全局Ajax事件，如ajaxStart或ajaxStop。可用于控制不同的Ajax事件ifModifiedBoolean（默认：false）仅在服务器数据改变时获取新数据。使用HTTP包Last-Modified头信息判断。processDataBoolean（默认:true）默认情况下，发送的数据将被转换为对象（技术上讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或其它不希望转换的信息，请设置为false。successFunction请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态function(data,textStatus){//datacouldbexmlDoc,jsonObj,html,text,etc...this;//theoptionsforthisajaxrequest}这里有几个Ajax事件参数：beforeSend，success，complete，error。我们能够定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的this都是指向Ajax请求的选项信息的（请参考图3-1）。请认真阅读上面的参数列表，如果要用jQuery来进行Ajax开发，那么这些参数你都必须熟知的。第4章系统设计4.1基于jQuery的Ajax聊天室功能要求聊天室是一个提供人们在线沟通交流和联系的平台。本系统的总目标是在计算机网络、数据库和先进的开发平台MyEclipse上，利用Tomcat，配置一定的硬件，开发一个具有开放体系结构的、易扩充的、易维护的、具有良好人机交互界面的无刷新聊天室。该聊天室不但能够实时显示在线人员列表，而且能够实时显示聊天信息，能够提供多人同时在线聊天。4.2聊天室总体功能结构图图4-1聊天室总体功能结构图4.3聊天室总体架构本系统采用了时下比较流行的三层架构，即表现层（展现给用户的界面，方便用户和系统进行交互）、业务逻辑层（处理涉及到的业务逻辑）和数据访问（直接和数据库进行数据交换）层，使得系统能够适应多种不同的使用环境。当环境发生一系列的变化时，对系统所要做的只是改变其配置文件，极大的增加了系统的扩展性。以下将简要描述三层体系结构。1.三层体系所谓三层体系结构，是在客户端与数据库之间加入了一个“中间层”，也叫组件层。这里所说的三层体系，不是指物理上的三层，不是简单地放置三台机器就是三层体系结构，也不但仅有B/S应用才是三层体系结构，三层是指逻辑上的三层，即使这三个层放置到一台机器上。三层体系的应用程序将业务规则、数据访问、合法性校验等工作放到了中间层进行处理。一般情况下，客户端不直接与数据库进行交互，而是经过COM/DCOM通讯与中间层建立连接，再经由中间层与数据库进行交互。一个好的分层式结构，能够使得开发人员的分工更加明确。一旦定义好各层次之间的接口，负责不同逻辑设计的开发人员就能够分散关注，齐头并进。例如UI人员只需考虑用户界面的体验与操作，领域的设计人员能够仅关注业务逻辑的设计，而数据库设计人员也不必为繁琐的用户交互而头疼了。每个开发人员的任务得到了确认，开发进度就能够迅速的提高。松散耦合的好处是显而易见的。如果一个系统没有分层，那么各自的逻辑都紧紧纠缠在一起，彼此间相互依赖，谁都是不可替换的。一旦发生改变，则牵一发而动全身，对项目的影响极为严重。降低层与层间的依赖性，既能够良好地保证未来的可扩展，在复用性上也是优势明显。每个功能模块一旦定义好统一的接口，就能够被各个模块所调用，而不用为相同的功能进行重复地开发。进行好的分层式结构设计，标准也是必不可少的。只有在一定程度的标准化基础上，这个系统才是可扩展的，可替换的。而层与层之间的通信也必然保证了接口的标准化。如果现在用的系统是SQLServer数据库，由于各种原因要更改用ORACLE。如果不是三层结构系统的话，可能需要改很多代码，延长了开发周期。现在使用了三层结构，只要在加一个Oracle的数据访问层。这样就能够实现多数据库了。现在可能要做另外一个系统了，该系统也要对数据库进行操作。如果以前编写过，这样的一个数据层。只要把以前写的那个数据层拷贝过来就能够了。实现代码复用，从而减短了软件的开发周期了。2.表现层设计表现层位于最外层（最上层），离用户最近。用于显示数据和接收用户输入的数据，为用户提供一种交互式操作的界面。本设计采用JSP网页来向用户展示，主要由三个页面构成，首先是用户登录时的一个界面，用户能够填写用户名和密码，其次是新用户注册的一个界面，用户需要填写相关的必要信息，最后是成功登录后聊天室界面，在这个页面中，用户能够聊天，并能够马上看到自己和别人的说话内容，也能够看见在线人员列表的变化。3.业务逻辑层设计业务逻辑层在体系架构中的位置很关键，它处于数据访问层与表示层中间，起到了数据交换中承上启下的作用。由于层是一种弱耦合结构，层与层之间的依赖是向下的，底层对于上层而言是“无知”的，改变上层的设计对于其调用的底层而言没有任何影响。如果在分层设计时，遵循了面向接口设计的思想，那么这种向下的依赖也应该是一种弱依赖关系。因而在不改变接口定义的前提下，理想的分层式架构，应该是一个支持可抽取、可替换的“抽屉”式架构。正因为如此，业务逻辑层的设计对于一个支持可扩展的架构尤为关键，因为它扮演了两个不同的角色。对于数据访问层而言，它是调用者；对于表示层而言，它却是被调用者。依赖与被依赖的关系都纠结在业务逻辑层上。本设计采用struct2框架，当客户端向Web应用发送请求时，请求将被Struts2的核心控制器ActionServlet拦截，ActionServlet根据请求决定是否需要调用业务逻辑控制器处理用户请求（实际上，业务逻辑控制器还是控制器，它只是负责调用模型来处理用户请求），当用户请求处理完成后，其处理结果经过JSP呈现给用户。其中核心控制器就是ActionServlet，由Struts2框架提供；业务逻辑控制就是用户自定义的Action，是本设计的关键所在，所有表现层页面触发的Action都要实现定义，比如登录操作、注册操作等等。4.数据访问层设计数据访问层：有时候也称为是持久层，其功能主要是负责数据库的访问，能够访问数据库系统、二进制文件、文本文档或是XML文档。本设计新建一个类专门用来处理与数据库的直接操作，并把数据库中的两张表抽象成对象，能够更加方便的进行有关的数据库操作。4.4模块设计(1).登陆模块设计：如图4-2登陆模块设计图所示图4-2登陆模块设计图(2).注册模块设计：如图4-3注册模块设计图所示图4-3注册模块设计图(3).聊天模块设计：如图4-4聊天模块设计图所示图4-4聊天模块设计图所示4.5数据库设计1数据库逻辑设计数据库逻辑设计的主要目的是产生一个DBMS可处理的数据模型和数据库模式，该模式必须满足数据库的存取，一致性及运行等方面的用户需求。为了进一步提高数据库应用系统的性能，一般以规范化理论为指导，还应该适当地修改、调整数据模型的结构。数据模型的优化方法为：确定数据依赖，对于各关系模式之间的数据依赖进行极小化处理，消除冗余的联系。按照数据依赖的理论对关系模式逐一进行分析，考查是否存在部分函数依赖、传递函数依赖、多值依赖等，确定各关系模式分别属于第几范式。按照需求分析阶段得到的各种应用对数据处理的要求，分析对于这样的应用环境这些模式是否合适，确定是否要对它们进行合并或分解。对关系模式进行必要的分解[10]。本设计的表很简单，只需要维护两张表，一个是用户信息表，另一个是聊天信息表。聊天信息表里的发消息人和收消息人要和用户信息表中的用户名相对应。2数据库物理设计数据库物理设计是为一个给定的逻辑数据模色散型选取一个最适合应用环境的物理结构的过程。其任务是为了有效地实现逻辑模式，确定所采取的存储策略。以逻辑设计的结果作为输入，选定数据库在物理设备上的存储结构和存取方法。各个表中字段的设计如下：(1)用户信息表表4-SEQ表3-\*ARABIC1用户信息表字段名列名字段类型字段宽度说明客户编号idint11主键用户名usernamevarchar50非空密码passwordvarchar50非空Emailemailvarchar50非空性别gendervarchar50非空个性签名scriptvarchar50非空状态statevarchar50非空(2)聊天信息表表4-2聊天信息表字段名列名字段类型字段宽度说明消息编号idint11主键用户名usernamevarchar50非空聊天内容chatMsgvarchar50非空发送时间sendTimevarchar50非空聊天对象toWhovarchar50非空第5章详细设计5.1项目代码结构项目的代码结构，如图5-1项目代码结构图所示：图5-1项目代码结构图5.2功能模块设计与实现5.2.1登录功能设计设计好的登陆界面图，如图5-2登陆页面图所示。登录页面实现了用户名密码为空的检错，当用户输入用户名密码后，点击提交，后台会验证数据库中是否有此信息，如果有，则登录成功，转入聊天页面，失败则返回到失败页面（如图5-3），在失败页面，你能够选择注册新用户或者重新登录。图5-2登陆页面图图5-3登陆失败图在表单中输入用户名和密码后，会自动验证输入的合法性，采用的是jQuery技术来控制DOM操作。验证的jQuery代码如下：functioncheck(){ if($("#username").val()=="请输入用户名"){alert("请输入用户名！"); $("#username").focus(); returnfalse; } if($("#password").val()=="请输入密码"){ alert("请输入密码！"); $("#password").focus(); returnfalse; } returntrue; }//check //用户名和密码框获取和失去焦点，触发的事件 $("#username").focus(function(){ vartxt_value=$(this).val(); if(txt_value==this.defaultValue){$(this).val(""); } }); $("#username").blur(function(){ vartxt_value=$(this).val(); if(txt_value==""){$(this).val(this.defaultValue); } }) $("#password").focus(function(){ vartxt_value=$(this).val(); if(txt_value==this.defaultValue){$(this).val(""); } }); $("#password").blur(function(){ vartxt_value=$(this).val(); if(txt_value==""){$(this).val(this.defaultValue); } })当点击提交后，页面拦截请求，调用TaoTaoAction_login，具体的代码如下：publicStringlogin(){ Useru=this.taoTaoManager.findUser(username,password); //System.out.println(u.getUserId()); if(u!=null){ if(u.getUsername().equals("admin")){ findUsers(); return"findUsers"; } taoTaoManager.updateUser(u.getUserId()); this.session.put("user",u); return"loginOk"; } return"loginError"; }这里，关于数据库的操作由taoTaoManager来具体执行，相关代码如下：publicUserfindUser(Stringusername,Stringpassword){ Connectionconn=null; PreparedStatementpstmt=null; ResultSetrs=null; Useruser=null; Stringsql="select*fromt_userwhereusername=?andpassword=?"; try{ conn=DB.getConn(); pstmt=conn.prepareStatement(sql); pstmt.setString(1,username); pstmt.setString(2,password); rs=pstmt.executeQuery(); while(rs.next()){ user=newUser(); user.setUserId(rs.getInt("id")); System.out.println(rs.getInt("id")); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); user.setEmail(rs.getString("email")); user.setGender(rs.getString("gender")); user.setScript(rs.getString("script")); user.setState("1"); } }catch(SQLExceptione){ e.printStackTrace(); }finally{ DB.close(rs); DB.close(pstmt); DB.close(conn); } returnuser; }5.2.2注册功能设计注册功能的实现，设计好的注册页面，如图5-4注册页面图所示。注册页面实现了必填的数据，即数据库中非空的设计，也实现了电子邮箱的格式检错，当点击注册时，需要同意聊天室条款才能够继续。如图5-4注册页面图所示：图5-4注册页面图注册功能的实现，首先用户边输入数据，后台边对输入合法性进行检查并提示用户，依然采用jQuery来控制DOM，相关代码如下： functionagree(){ if($("[value=0]:checkbox").val("checked")==true){ returntrue; } else{ alert("您必须同意以下条款才能继续操作！"); returnfalse; } } $(function(){ $("form:input.required").each(function(){ var$required=$("<strongclass='high'>*</strong>"); $(this).parent().append($required); }); $('form:input').blur(function(){ var$parent=$(this).parent(); $parent.find('.formtips').remove(); if($(this).is('#username')){ if(this.value==""||this.value.length<2){ varerrorMsg='请输入至少2位的用户名.'; $parent.append('<spanclass="formtipsonError">'+errorMsg+'</span>