收藏 分销(赏)

jQueryAjax聊天室毕业设计方案.doc

上传人:天**** 文档编号:2511314 上传时间:2024-05-31 格式:DOC 页数:79 大小:1.12MB
下载 相关 举报
jQueryAjax聊天室毕业设计方案.doc_第1页
第1页 / 共79页
jQueryAjax聊天室毕业设计方案.doc_第2页
第2页 / 共79页
jQueryAjax聊天室毕业设计方案.doc_第3页
第3页 / 共79页
jQueryAjax聊天室毕业设计方案.doc_第4页
第4页 / 共79页
jQueryAjax聊天室毕业设计方案.doc_第5页
第5页 / 共79页
点击查看更多>>
资源描述

1、基于jQueryAjax聊天室应用摘 要伴随网络逐步普及,和网络技术不停发展,大家经过网络进行交流方法变得多样化。网络聊天室便是其中之一。聊天室即时交流方法满足了网络中多人同时聊天交流需要,使得较多人在同一个聊天页面进行交流变得方便,简单。本设计目标是采取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 network technology, the way to com

3、municate 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 design aims to develop a chat room base

4、d 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 the same time and can display and upd

5、ate 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 introduced the system design and req

6、uirements 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.Compared with those traditional,the chat r

7、oom 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 JavaScript42.2.3 Ajax技术52.2.4 jQuery技术52.2.5

8、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 基于jQueryAjax聊天室功效要求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章 系统测

9、试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表6-2 用户登录信息测试用例39引 言Internet是现在世界上最大计算机互联网络

10、,它遍布全球,将世界各地多种规模网络连接成一个整体。作为Internet上一个优异,易于被大家所接收信息检索手段,World Wide Web(简称WWW)发展十分快速,成为现在世界上最大信息资源宝库。现在,大家不仅能够在网上查询自己需要资源,而且能够经过网络进行实时沟通。从实时性和有效性上全部超出了用信件和 Email,而且在费用上要低于电话。所以多种聊天服务备受用户青睐,在这方面开发和应用也较多,聊天服务也成为互联网提供关键服务之一,所以,建立一个好在线交流聊天系统十分关键。互联网大多数网站全部建有聊天室,而且有专业聊天网站提供聊天服务。网上聊天系统是为大家进行交流和联络提供一个平台。利用

11、现代网络资源优势和技术优势,经过提供完善网上聊天系统,以达成促进大家和大家之间信息交流和沟通目标。第1章 绪论1.1 系统概述多年来计算机技术快速发展,尤其是计算机网络发展,越来越深刻改变了大家生活方方面面,使得大家能以更低廉价格,开发出更方便、更实用网络工具。多种在线服务系统,更是深刻影响了大家联络和交流方法,使得大家能够在远隔千里之遥随时通讯。过去种种陈旧联络方法,已经不能满足现代生活需要。网上聊天系统作为一个方便拥有共同爱好爱好大家之间联络实用系统便应运而生。本设计关键是实现一个能够方便大家在线交流聊天室,能够立即显示在线人员和聊天内容。1.2需求背景伴随计算机网络日新月异发展,大家交流

12、方法越来越多,传统交流方法,如:信件、电报、电话等已经难以满足大家交流要求,在互联网上即时和好友取得联络,已经成为当今社会大家主流联络方法。两台计算机之间进行即时通讯、发送文件等交流方法已经成为时代时尚。所以出现了QQ等聊天工具。然而QQ等聊天工具即使方便、实用,不过,娱乐功效太多,有很多吸引人娱乐功效,从一定程度上来说,是一个娱乐工具,不能作为用于作为即时通讯、文件共享专用工具。现在,用于实现单一即时通讯、文件共享软件实在太少,而且,它们中大部分全部是绝正确C/S模式,对远程服务器有很大依靠性,没有根本实现点对点交流。在常见聊天室开发中,有基于ASP、基于SOCKET、基于JAVA开发聊天室

13、,本系统采取基于JSP采取jQuery和Ajax技术进行开发。JSP将网页逻辑和网页设计和显示分离,支持可重用基于组件设计,使基于Web应用程序开发变得快速和轻易。所以,采取JSP开发在线聊天系统能够提升开发效率和系统性能。网上聊天系统是常见,也是比较有代表性 Internet应用系统之一,其实现难点是聊天怎样保留聊天内容和怎么样将聊天信息立即快捷地在服务器和用户之间进行传输和共享。现在常见聊天内容保留方法有三种:一是利用数据库直接保留聊天内容;二是利用文本文件保留聊天内容三是利用 Application对象保留聊天内容。这三种聊天内容保留方法基础过程和开发难易程度相同。本系统采取第二种方法,

14、将聊天信息存入数据库中,管理起来较方便。1.3系统开发目标和意义网络聊天系统是为人和人之间进行交流和联络提供一个平台。经过提供完善聊天服务和规范管理,能够达成促进人和人之间感情,促进大家之间沟通,方便大家联络目标;同时本系统能够拉近人和人之间距离,丰富大家业余时间,为大家在网络中交友提供了便捷渠道。第2章 开发工具及相关技术介绍2.1 开发工具2.1.1 MyEclipse介绍MyEclipse企业级工作平台(MyEclipse Enterprise Workbench,简称MyEclipse)是对EclipseIDE扩展,利用它我们能够在数据库和JavaEE开发、公布和应用程序服务器整合方面

15、极大提升工作效率。它是功效丰富JavaEE集成开发环境,包含了完备编码、调试、测试和公布功效,完整支持HTML,Struts,JSP,CSS,JavaScript,Spring,SQL,Hibernate。2.1.2 MySQL数据库介绍MySQL是一个小型关系型数据库管理系统,开发者为瑞典MySQLAB企业。MySQL是一个关联数据库管理系统,关联数据库将数据保留在不一样表中,而不是将全部数据放在一个大仓库内。这么就增加了速度并提升了灵活性。MySQLSQL“结构化查询语言”。SQL是用于访问数据库最常见标准化语言。MySQL软件采取了GPL(GNU通用公共许可证)。因为其体积小、速度快、总

16、体拥有成本低,尤其是开放源码这一特点,很多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。MySQL是一个快速、多线程、多用户SQL数据库服务器。它支持正规SQL查询语言和采取多个数据类型,能对数据进行多种具体查询等。MySQL数据库关键特征有:(1)MySQL关键程序采取完全多线程编程。线程是轻量级进程,它能够灵活地为用户提供服务,而不过多系统资源。用多线程和C语言实现MySql能很轻易充足利用CPU。(2)MySQL可运行在不一样操作系统下。(3)MySQL有一个很灵活而且安全权限和口令系统。当用户和MySQL服务器连接时,她们之间全部口令传送被加密,而且MySQL支持

17、主机认证。(4)MySQL支持ODBC for Windows。(5)MySQL支持大型数据库。MySQL能够方便地支持上千万条统计数据库。作为一个开放源代码数据库,MySQL能够针对不一样应用进行对应修改。(6)MySQL拥有一个很快速而且稳定基于线程内存分配系统,能够连续使用面无须担心其稳定性。实际上,MySQL稳定性足以应付一个超大规模数据库。(7)强大查询功效。MySQL支持查询SELECT和WHERE语句全部运算符和函数,而且能够在同一查询中混用来自不一样数据库表,从而使得查询变得快捷和方便10。2.1.3 Tomcat 6.0服务器Tomcat是Apache软件基金会(Apache

18、 Software Foundation)Jakarta 项目中一个关键项目,由Apache、Sun 和其它部分企业及个人共同开发而成。因为Tomcat 技术优异、性能稳定,而且无偿,所以深受Java 爱好者喜爱并得到了部分软件开发商认可,成为现在比较流行Web 应用服务器。Tomcat 一样也很受广大程序员喜爱,因为它运行时占用系统资源小,扩展性好,支持负载平衡和邮件服务等开发应用系统常见功效;而且它还在不停改善和完善中,任何一个感爱好程序员全部能够更改它或在其中加入新功效。Tomcat是一个轻量级应用服务器,在中小型系统和并发访问用户不是很多场所下被普遍使用,是开发和调试JSP程序首选。当

19、配置正确时,Apache为HTML页面服务,而Tomcat实际上运行JSP页面和Servlet。另外,Tomcat和IIS、Apache等Web服务器一样,含有处理HTML页面功效,另外它还是一个Servlet和JSP容器,独立Servlet容器是Tomcat默认模式。不过,Tomcat处理静态HTML能力不如Apache服务器。现在Tomcat最新版本为7.0.27 Released。本系统采取Tomcat 6.0版本。2.2 关键技术2.2.1 JSP JSP(Java Server Pages)是由Sun Microsystems企业提倡、很多企业参与一起建立一个动态网页技术标准。JSP

20、技术有点类似ASP技术,它是在传统网页HTML文件(*.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技术简单易用,完全面向对象,含有平台无关性且安全

21、可靠,关键面向因特网全部特点。JSP是一个编译性程序,当一个JSP应用程序被首次访问时,JSP所在服务器首先将JSP程序转变成为java程序,然后编译成class类文件,最终加载到服务器内存中为用户端请求提供服务。用户请求结束后,仍然驻留内存,等候第二次请求抵达。所以JSP网页在实施上通常是首次实施比较慢,但以后实施速度要快很多。这是ASP程序锁不含有9。JSP有五种内置对象:1. request对象:该对象封装了用户提交信息,经过调用该对象对应方法能够获取封装信息,即使用该对象能够获取用户提交信息。它是HttpServletRequest实例。2. response对象:对用户请求做出动态响

22、应,向用户端发送数据。3. Session对象:session对象是一个JSP内置对象,它在第一个JSP页面被装载时自动创建,完成会话期管理。从一个用户打开浏览器并连接到服务器开始,到用户关闭浏览器离开这个服务器结束,被称为一个会话。当一个用户访问一个服务器时,可能会在这个服务器多个页面之间反复连接,反复刷新一个页面,服务器应该经过某种措施知道这是同一个用户,这就需要session对象。4. application对象:服务器开启后就产生了这个application对象,当用户在所访问网站各个页面之间浏览时,这个application对象全部是同一个,直到服务器关闭。不过和session不一样

23、是,全部用户application对象全部是同一个,即全部用户共享这个内置application对象。5. out对象:out对象是一个输出流,用来向用户端输出数据。out对象用于多种数据输出。2.2.2 JavaScriptJavaScript是Netscape企业开发一个脚本语言。JavaScript出现使得网页和用户之间实现了一个实时、动态和交互关系,使网页包含更多活跃元素和愈加出色内容。JavaScript本身存在3个弊端,即复杂文档对象模型(DOM),不一致浏览器实现和缺乏便捷开发、调试工具。正当JavaScript从开发者视线中逐步隐去时,一个新型基于JavaScriptWeb技术

24、Ajax(Asynchronous JavaScript And XML,异步JavaScript和XML)诞生了。而使大家真正认识到Ajax技术强大导火索是谷歌企业推出一系列新型Web应用,比如Gmail、谷歌 Suggest和谷歌 Map等。互联网中基于JavaScript应用越来越多,使JavaScript不再是一个仅仅用于制作Web页面简单脚本3。2.2.3 Ajax技术 Ajax即“Asynchronous JavaScript and XML”(异步JavaScript和XML),Ajax 不是一个新编程语言,而是一个用于创建愈加好愈加快和交互性更强Web应用程序技术。经过Ajax

25、,JavaScript可使用JavaScriptXMLHttpRequest对象来直接和服务器进行通信4。经过这个对象JavaScript可在不重载页面情况和Web服务器交换数据。Ajax在浏览器和 Web服务器之间使用异步数据传输(HTTP请求),这么就可使网页从服务器请求少许信息,而不是整个页面。Ajax 可使因特网应用程序更小、愈加快,更友好。Ajax是一个独立于Web服务器软件浏览器技术2。2.2.4 jQuery技术jQuery是继prototype以后又一个优异JavaScript框架。它是轻量级js库(压缩后只有21k) ,它兼容CSS3,还兼容多种浏览器(IE 6.0+,FF

26、1.5+,Safari 2.0+,Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,而且方便地为网站提供Ajax交互。jQuery还有一个比较大优势是,它文档说明很全,而且多种应用也说得很具体,同时还有很多成熟插件可供选择。jQuery能够使用户HTML页保持代码和HTML内容分离,也就是说,不用再在HTML里面插入一堆js来调用命令了,只需定义id即可。jQuery凭借简练语法和跨平台兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、实施动画和开发Ajax操作,其独特而又优雅代码风格改变了J

27、avaScript程序员设计思绪和编写程序方法。总而言之,不管是网页设计师、后台开发者、业余爱好者还是项目管理者,全部很有必需去学习jQuery。jQuery强调理念是写得少,做得多。jQuery独特选择器、链式操作、事件处理机制和封装完善Ajax全部是其它JavaScript库望尘莫及1。2.2.5 Struts技术Struts是开源软件。使用Struts目标是为了帮助我们降低在利用MVC设计模型来开发Web应用时间。假如我们想混合使用Servlets和JSP优点来建立可扩展应用,struts是一个不错选择。Struts 1框架以ActionServlet作为关键控制器,整个应用由用户端请求

28、驱动。当用户端向Web应用发送请求时,请求将被Struts 1关键控制器ActionServlet拦截,ActionServlet依据请求决定是否需要调用业务逻辑控制器处理用户请求(实际上,业务逻辑控制器还是控制器,它只是负责调用模型来处理用户请求),当用户请求处理完成后,其处理结果经过JSP展现给用户。对于整个Struts 1框架而言,控制器就是它关键,Struts 1控制器由两个部分组成:关键控制器和业务逻辑控制器。其中关键控制器就是ActionServlet,由Struts 1框架提供;业务逻辑控制就是用户自定义Action,由应用开发者提供。对于大部分用户请求而言,全部需要得到服务器处

29、理。当用户发送一个需要得到服务器处理请求时,该请求被ActionServlet拦截到,ActionServlet将该请求转发给对应业务逻辑控制器,业务逻辑控制器调用模型来处理用户请求;假如用户请求只是期望得到某个URL资源,则由ActionServlet将被请求资源转发给用户。Struts 2和Struts 1相比,确实有很多革命性改善,但它并不是新公布新框架,而是在另一个赫赫有名框架:WebWork基础上发展起来。从某种程度上来讲,Strut2没有继承Struts 1血统,而是继承了WebWork血统。或说,WebWork衍生出了Struts 2,而不是Struts 1衍生了Struts 2

30、。因为Struts 2是WebWork升级,而不是一个全新框架,所以稳定性、性能等各方面全部有很好确保;而且吸收了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. 服务器端服务器端最低配置是由建立站点所需软件来决定,在最低配置情况下,服务器往往不尽如人意,

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

32、Pweb服务器:Tomcat6.0数据库:MySQL Server 5.1浏览器:Internet Explorer 6.0以上2. 用户端操作系统:Windows 98/XP网络协议:TCP/IP数据库:MySQL Server 5.1浏览器:Internet Explorer 6.0以上第3章 jQuery技术3.1 jQuery介绍jQuery是继Prototype以后又一个优异JavaScript库,是一个由John Resig创建于1月开源项目。现在jQuery团体关键包含关键库、UI和插件等开发人员和推广和网站包含维护人员。jQuery凭借简练语法和跨平台兼容性,极大地简化了Jav

33、aScript开发人员遍历HTML文档、操作DOM、处理事件、实施动画和开发Ajax操作,其独特而又优雅代码风格改变了JavaScript程序员设计思绪和编写程序方法1。3.2 配置jQuery环境为了能顺利应用jQuery技术,首先必需要进入jQuery官方网站,下载最新jQuery库文件。jQuery库类型分为两种,分别是jQuery1.3.1(18KB,Minified and Gripped)和jQuery1.3.1(114KB,Uncompressed)。二者区分在于前者是完整无压缩版,关键用于学习、测试和开发,后者是经过JSMin等工具压缩后版本,关键用于产品和项目。jQuery不

34、需要安装,把下载jquery-1.3.1.js放到网站上一个公共位置,想要在某个页面上使用jQuery时,只需要在相关HTML文档中引入该库文件位置即可。13.3 编写简单jQuery代码在开始编写jQuery程序之前,首先应该明确一点,在jQuery库中,$就是jQuery一个简写形式,比如$(“#foo”)和jQuery(“#foo”)是等价,$.ajax和jQuery.ajax是等价。下面展示一个简单jQuery程序。$(document).ready(function()alert(“Hello World!”);)这段代码作用类似于传统JavaScript中得window.onloa

35、d方法。3.4 jQuery选择器选择器是jQuery根基,在jQuery中,对事件处理、遍历DOM和Ajax操作全部依靠于选择器。在开始了解jQuery选择器之前,有必需了解一下CSS技术。CSS是一项出色技术,它使得网页结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构,只需经过添加不一样CSS规则,就能够得到多种不一样式网页。常见CSS选择器:1. 标签选择器 语法:ECSS规则 以文档元素为选择符2. ID选择器 语法:#ID CSS规则 以文档元素唯一标识符ID作为选择符3. 类选择器 语法:E.class CSS规则 以文档元素class作为选择

36、符4. 群组选择器 语法:E1,E2,E3 CSS规则 多个选择符应用一样样式规则5. 后代选择器 语法:E F CSS规则 元素E任意后代元素F6. 通配选择器 语法:* CSS规则 以文档全部元素作为选择符8jQuery中选择器完全继承了CSS风格。利用jQuery选择器,能够很便捷和快速地找出特定DOM元素,然后为她们添加对应行为,而无需担心浏览器是否支持这一选择器。jQuery选择器优势:(1)简练写法$()函数在很多JavaScript类库中全部被作为一个选择器函数来使用,在jQuery中也不例外。其中,$(“#ID”)用来替换document.getElementById()函数,

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

38、碑7。Ajax优势:1. 不需要插件支持Ajax不需要任何浏览器插件,就能够被大多数主流浏览器所支持,用户只需要许可JavaScript在浏览器上实施即可。2. 优异用户体验这是Ajax技术最大优点,能在不刷新整个页面前提下更新数据,这使得Web应用程序能更为快速地回应用户操作。3. 提升Web程序性能和传统模式相比,Ajax模式在性能上最大区分就在于传输数据方法,在传统模式中,数据提交是经过表单来实现,而数据获取是靠全页面刷新来重新获取整页内容。而Ajax模式只是经过XMLHttpRequest对象向服务器提交期望提交数据,即按需发送。4. 减轻服务器和宽带负担Ajax工作原理相当于在用户和

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

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

41、也是Ajax一项缺憾。经过搜索引擎全部是经过爬虫程序来对互联网上数以亿计海量数据来进行搜索整理,然而爬虫程序现在还不能了解那些奇怪JavaScript代码和所以引发页面内容改变,这使得应用Ajax站点在网络推广上相对于传统站点显著处于劣势。4. 开发和调试工具缺乏JavaScript是Ajax关键组成部分,在现在,因为缺乏很好JavaScript开发和调试工具,使很多Web开发者对JavaScript望而生畏,这对于编写Ajax代码就愈加困难了。同时,现在很多Web开发者已经习惯使用可视化工具,对亲自动手编写代码有畏惧感,这也在一定程度上影响了大家对Ajax应用。jQuery中Ajax:Aja

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

43、ss)回调函数。这个方法默认使用GET方法来传输,假如data参数有传输数据进去,就会自动转换为POST方法。jQuery 1.2中,能够指定选择符,来筛选载入HTML文档,DOM 中将仅插入筛选出HTML代码。语法形如 url #some selector。这个方法能够很方便动态加载部分HTML文件,比如表单。示例代码:$(.ajax.load).load(,function (responseText, textStatus, XMLHttpRequest)this;/在这里this指向是目前DOM对象,即$(.ajax.load)0/alert(responseText);/请求返回内容

44、/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):(可选) 载入成功时回调函数(只有当Response返回状态是success才是调用该方法)。这是一个简单GET请

45、求功效以替换复杂$.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(

46、this););jQuery.get()回调函数里面this,指向是Ajax请求选项配置信息(图3-1):图3-1Ajax请求选项配置信息3. jQuery.post( url, data, callback, type ):使用POST方法来进行异步请求参数:url(String):发送请求URL地址.data(Map):(可选)要发送给服务器数据,以Key/value 键值对形式表示。callback(Function):(可选)载入成功时回调函数(只有当Response返回状态是success才是调用该方法)。type(String):(可选)官方说明是:Type of data to be sent。其实应该为用户端请求类型(JSONX,ML等等)这是一个简单POST请求功效以替换复杂$.ajax。请求成功时可调用回调函数。假如需要在犯错时实施函数,请使用$.ajax。示例代码:Ajax.aspx:Response.ContentType = application/json;Response.Write(result: + RequestName + ,你好!(这消息来自服务器);jQuery 代码:$.post(Aja

展开阅读全文
相似文档                                   自信AI助手自信AI助手
猜你喜欢                                   自信AI导航自信AI导航
搜索标签

当前位置:首页 > 学术论文 > 毕业论文/毕业设计

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        获赠5币

©2010-2024 宁波自信网络信息技术有限公司  版权所有

客服电话:4008-655-100  投诉/维权电话:4009-655-100

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :gzh.png    weibo.png    LOFTER.png 

客服