学位论文-—jqueryajax聊天室完整版.doc

上传人:教**** 文档编号:93038827 上传时间:2023-06-22 格式:DOC 页数:59 大小:1.20MB
返回 下载 相关 举报
学位论文-—jqueryajax聊天室完整版.doc_第1页
第1页 / 共59页
学位论文-—jqueryajax聊天室完整版.doc_第2页
第2页 / 共59页
点击查看更多>>
资源描述

《学位论文-—jqueryajax聊天室完整版.doc》由会员分享,可在线阅读,更多相关《学位论文-—jqueryajax聊天室完整版.doc(59页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

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

2、了聊天室的操作性。本文首先介绍了聊天室所使用到的一些关键技术,例如jQuery技术和Ajax技术,接着介绍了该系统的设计思路,然后是对系统的详细介绍,包括系统中创建的数据库以及系统的具体功能介绍。聊天室在互联网上的应用非常普遍,实现的方法也是多种多样,相比之下,采用优秀的jQuery框架实现的聊天室更加高效、流畅,更加富有前景。关键词:聊天室;jQuery;Ajax JQuery Ajax-based Chat Room ApplicationAbstractWith the increasing popularity of the network and the development of

3、 network technology, the way 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, and makes people chatting on the same page becomes convenient and simple. The desi

4、gn 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 development.The chat room has all common functions, including more than one chatting in th

5、e 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 paper first introduces the key technologies used such as jquery and ajax, then i

6、ntroduced 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 very common on the Internet,and the approaches of implementation are varied.Compare

7、d with those traditional,the chat room based on jQuery is more effective and fast,and have a bright outlook.Keywords:Chat Room; Ajax; jQuery目录引 言1第1章 绪论21.1 系统概述21.2 需求背景21.3 系统开发目的与意义2第2章 开发工具及相关技术介绍32.1 开发工具32.1.1 MyEclipse介绍32.1.2 MySQL数据库介绍32.1.3 Tomcat 6.0服务器32.2 关键技术42.2.1 JSP42.2.2 JavaScript

8、42.2.3 Ajax技术52.2.4 jQuery技术52.2.5 Struts技术52.3 系统环境62.3.1 开发环境62.3.2 运行环境6第3章 JQUERY技术83.1 jQuery简介83.2 配置jQuery环境83.3 编写简单的jQuery代码83.4 jQuery选择器83.5 jQuery与Ajax的应用9第4章 系统设计174.1 基于jQuery的Ajax聊天室功能要求174.2 聊天室总体功能结构图174.3 聊天室总体架构174.4 模块设计194.5 数据库设计20第5章 系统实现225.1 项目代码结构设计225.2 详细设计介绍225.2.1 登录功能设

9、计225.2.2 注册功能设计255.2.3 聊天功能设计28第6章 系统测试386.1 单元测试386.2 集成测试396.3 系统测试39结论与展望41致 谢42参考文献43附 录44附录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

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

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

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

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

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

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

16、不同的表中,而不是将所有数据放在一个大仓库内。这样就增加了速度并提高了灵活性。MySQL的SQL“结构化查询语言”。SQL是用于访问数据库的最常用标准化语言。MySQL软件采用了GPL(GNU通用公共许可证)。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。MySQL是一个快速、多线程、多用户的SQL数据库服务器。它支持正规的SQL查询语言和采用多种数据类型,能对数据进行各种详细的查询等。MySQL数据库的主要特征有:(1)MySQL的核心程序采用完全的多线程编程。线程是轻量级的进程,它可以灵活地为用户提供服

17、务,而不过多的系统资源。用多线程和C语言实现的MySql能很容易充分利用CPU。(2)MySQL可运行在不同的操作系统下。(3)MySQL有一个非常灵活而且安全的权限和口令系统。当客户与MySQL服务器连接时,他们之间所有的口令传送被加密,而且MySQL支持主机认证。(4)MySQL支持ODBC for Windows。(5)MySQL支持大型的数据库。MySQL可以方便地支持上千万条记录的数据库。作为一个开放源代码的数据库,MySQL可以针对不同的应用进行相应的修改。(6)MySQL拥有一个非常快速而且稳定的基于线程的内存分配系统,可以持续使用面不必担心其稳定性。事实上,MySQL的稳定性足

18、以应付一个超大规模的数据库。(7)强大的查询功能。MySQL支持查询的SELECT和WHERE语句的全部运算符和函数,并且可以在同一查询中混用来自不同数据库的表,从而使得查询变得快捷和方便10。2.1.3 Tomcat 6.0服务器Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应用服务器。Tomcat 同样也很受广大程序

19、员的喜欢,因为它运行时占用的系统资源小,扩展性好,支持负载平衡与邮件服务等开发应用系统常用的功能;而且它还在不断的改进和完善中,任何一个感兴趣的程序员都可以更改它或在其中加入新的功能。Tomcat是一个轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP程序的首选。当配置正确时,Apache为HTML页面服务,而Tomcat实际上运行JSP页面和Servlet。另外,Tomcat和IIS、Apache等Web服务器一样,具有处理HTML页面的功能,另外它还是一个Servlet和JSP容器,独立的Servlet容器是Tomcat的默认模式。不过,Tomcat

20、处理静态HTML的能力不如Apache服务器。目前Tomcat最新版本为7.0.27 Released。本系统采用Tomcat 6.0版本。2.2 关键技术2.2.1 JSP JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(*.jsp)。 用JSP开发的Web应用是跨平台的,既能在Linux下运行,也能在其他操作系统上运行。JSP页面由HT

21、ML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理,然后将生成的HTML页面返回给客户端的浏览器。Java Servlet是JSP的技术基础,而且大型的Web应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用,完全的面向对象,具有平台无关性且安全可靠,主要面向因特网的所有特点。JSP是一种编译性程序,当一个JSP应用程序被首次访问时,JSP所在的服务器首先将JSP程序转变成为java程序,然后编译成class类文件,最后加载到服务器内存中为客户端请求提供服务。客户请求结束后,依然驻留内存,等待第二次请求

22、到达。所以JSP网页在执行上通常是首次执行比较慢,但以后的执行速度要快很多。这是ASP程序锁不具备的9。JSP有五种内置对象:1. request对象:该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以获取用户提交信息。它是HttpServletRequest的实例。2. response对象:对客户的请求做出动态的响应,向客户端发送数据。3. Session对象:session对象是一个JSP内置对象,它在第一个JSP页面被装载时自动创建,完成会话期管理。从一个客户打开浏览器并连接到服务器开始,到客户关闭浏览器离开这个服务器结束,被称为一个会话。当一个客

23、户访问一个服务器时,可能会在这个服务器的几个页面之间反复连接,反复刷新一个页面,服务器应当通过某种办法知道这是同一个客户,这就需要session对象。4. application对象:服务器启动后就产生了这个application对象,当客户在所访问的网站的各个页面之间浏览时,这个application对象都是同一个,直到服务器关闭。但是与session不同的是,所有客户的application对象都是同一个,即所有客户共享这个内置的application对象。5. out对象:out对象是一个输出流,用来向客户端输出数据。out对象用于各种数据的输出。2.2.2 JavaScriptJava

24、Script是Netscape公司开发的一种脚本语言。JavaScript的出现使得网页和用户之间实现了一种实时的、动态的和交互的关系,使网页包含更多的活跃的元素和更加精彩的内容。JavaScript自身存在3个弊端,即复杂的文档对象模型(DOM),不一致的浏览器实现和缺乏便捷的开发、调试工具。正当JavaScript从开发者的视线中渐渐隐去时,一种新型的基于JavaScript的Web技术Ajax(Asynchronous JavaScript And XML,异步的JavaScript和XML)诞生了。而使人们真正认识到Ajax技术的强大的导火索是Google公司推出的一系列新型Web应用

25、,例如Gmail、Google Suggest和Google Map等。互联网中基于JavaScript的应用越来越多,使JavaScript不再是一种仅仅用于制作Web页面的简单脚本3。2.2.3 Ajax技术 Ajax即“Asynchronous JavaScript and XML”(异步JavaScript和XML),Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过Ajax,JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信4。通过这个对象JavaScript可在不重载页面的情况与We

26、b服务器交换数据。Ajax在浏览器与 Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。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、实现动画效果,并且方便

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

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

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

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

31、好的保证;而且吸收了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. 服务器端服务器端的最低配置是由建立站点所需的软件来决定的,在最低配置的情况下,服务器的往往不尽如人意,现在的硬件性能已经相当出色,而且价格也很便宜,因此通常应给服务器端配置高性能的

32、硬件。本网络系统服务器端的配置如下:处理器:Inter Pentium4 1.6GHz 或更高内存:512MB硬盘空间:80GB光驱:CD-ROM 48X显卡:SVAG显示适配器2. 用户端因为客户端主要用于浏览和操作数据,所以对客户端的硬件要求不高,不过现在的电脑很高的性价比,因此需要的配置应该高于下面的配置:处理器:Inter Pentium 1.0GHz 或更高内存:256MB硬盘空间:40GB光驱:CD-ROM 48X显卡:SVAG显示适配器。软件环境:1. 服务器端操作系统:Windows 2000 Server网络协议:TCP/IPweb服务器:Tomcat6.0数据库:MySQL

33、 Server 5.1浏览器:Internet Explorer 6.0以上2. 用户端操作系统:Windows 98/2000/XP网络协议:TCP/IP数据库:MySQL Server 5.1浏览器:Internet Explorer 6.0以上第3章 jQuery技术3.1 jQuery简介jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站涉及维护人员。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人

34、员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作,其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式1。3.2 配置jQuery环境为了能顺利的应用jQuery技术,首先必须要进入jQuery的官方网站 and Gripped)和jQuery1.3.1(114KB,Uncompressed)。两者的区别在于前者是完整无压缩版,主要用于学习、测试和开发,后者是经过JSMin等工具压缩后的版本,主要用于产品和项目。jQuery不需要安装,把下载的jquery-1.3.1.js放到网站上的一个公共位置,想要在某个页面上使用jQuery时,只需要在

35、相关的HTML文档中引入该库文件的位置即可。13.3 编写简单的jQuery代码在开始编写jQuery程序之前,首先应该明确一点,在jQuery库中,$就是jQuery的一个简写形式,例如$(“#foo”)和jQuery(“#foo”)是等价的,$.ajax和jQuery.ajax是等价的。下面展示一个简单的jQuery程序。$(document).ready(function()alert(“Hello World!”);)这段代码的作用类似于传统JavaScript中得window.onload方法。3.4 jQuery选择器选择器是jQuery的根基,在jQuery中,对事件处理、遍历D

36、OM和Ajax操作都依赖于选择器。在开始了解jQuery选择器之前,有必要了解一下CSS技术。CSS是一项出色的技术,它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构,只需通过添加不同的CSS规则,就可以得到各种不同样式的网页。常用的CSS选择器:1. 标签选择器 语法:ECSS规则 以文档元素为选择符2. ID选择器 语法:#ID CSS规则 以文档元素的唯一标识符ID作为选择符3. 类选择器 语法:E.class CSS规则 以文档元素的class作为选择符4. 群组选择器 语法:E1,E2,E3 CSS规则 多个选择符应用同样的样式规则5

37、. 后代选择器 语法:E F CSS规则 元素E的任意后代元素F6. 通配选择器 语法:* CSS规则 以文档的所有元素作为选择符8jQuery中的选择器完全继承了CSS的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器。jQuery选择器的优势:(1)简洁的写法$()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中也不例外。其中,$(“#ID”)用来代替document.getElementById()函数,即通过ID获取元素;$(“tagName”)用来代替document

38、.getElementByTagName()函数,即通过标签名获取HTML元素。(2)支持CSS1到CSS3选择器(3)完善的处理机制使用jQuery获取网页中不存在的元素也不会报错7。3.5 jQuery与Ajax的应用Ajax全称为“Asynchronous JavaScirpt and XML”(异步JavaScript和XML),它并不是指一种单一的技术,而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现,揭开了无刷新更新页面的新时代,并有代替传统的Web方式和通过隐藏的框架来进行异步提交的趋势,是Web开发应用的一个里程碑7。Ajax的优势:1. 不需要插件支持A

39、jax不需要任何浏览器插件,就可以被大多数主流浏览器所支持,用户只需要允许JavaScript在浏览器上执行即可。2. 优秀的用户体验这是Ajax技术的最大优点,能在不刷新整个页面的前提下更新数据,这使得Web应用程序能更为迅速地回应用户的操作。3. 提高Web程序的性能与传统模式相比,Ajax模式在性能上的最大区别就在于传输数据的方式,在传统模式中,数据提交是通过表单来实现的,而数据获取是靠全页面刷新来重新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据,即按需发送。4. 减轻服务器和宽带的负担Ajax的工作原理相当于在用户和服务器之间加了一个

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

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

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

43、了大家对Ajax的应用。jQuery中的Ajax:Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键发送异步请求,接收响应及执行回调都是通过它来完成的。我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到)。1. load( url, data, callback ):载入远程HTML文件代码并插入至DOM中。url(String) :请求的HTML页的URL地址。data(Map) :(可选参数)发送至服务器的key/value 数据。call

44、back(Callback):(可选参数)请求完成时(不需要是success的)的回调函数。这个方法默认使用GET方式来传递的,如果data参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2中,可以指定选择符,来筛选载入的HTML文档,DOM 中将仅插入筛选出的HTML代码。语法形如 url #some selector。这个方法可以很方便的动态加载一些HTML文件,例如表单。示例代码:$(.ajax.load).load( .post,function (responseText, textStatus, XMLHttpRequest)this;/在这里this指向的是当

45、前的DOM对象,即$(.ajax.load)0/alert(responseText);/请求返回的内容/alert(textStatus);/请求状态:success,error/alert(XMLHttpRequest);/XMLHttpRequest对象);2. jQuery.get( url, data, callback ):使用GET方式来进行异步请求参数:url(String):发送请求的URL地址。data(Map):(可选)要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。callback(Function):(可

46、选) 载入成功时回调函数(只有当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请求选项

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育专区 > 教案示例

本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

工信部备案号:黑ICP备15003705号© 2020-2023 www.taowenge.com 淘文阁