JSP/Servlet开发——第十章 Ajax与JQuery
1、 认识Ajax:
◆在传统的 Web 应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应,如果前一个请求没有得到响应,则后一个请求就不能发送。 ◆由于这是一种独占式的请求,因此如果服务器响应没有结束,用户就只能等待或者不断地刷新页面,在等待期间,由于新的页面没有生成,整个浏览器将是一片空白,而用户只能继续等待。对于用户而言,这是一种不连续的体验,同时,频繁地刷新页面也会使服务器的负担加重; ◆Ajax技术正是为了弥补以上不足而诞生的,Ajax 应用使用 JavaScript 异步发送请求,不用每次请求都重新加载页面,发送请求时可以继续其他的操作,在服务器响应完成后,再使用 JavaScrip将晌应展示给用户; ◆使用 Ajax技术从用户发送请求到获得响应,当前用户界面在整个过程中不会受到干扰,而且我们可以在必要的时候只更新页面的一小部分,而不用刷新整个页面,即 ’无刷新’ 技术,这就避免了重复加载、浪费网络资源的现象,提高了加载进度,这是无刷新技术的第一个优势; |
||||||||||||||||||
◆无刷新:不刷新整个页面,只刷新局部 ★无刷新的好处: ▲只更新部分页面,有效利用带宽 ▲提供连续的用户体验 ▲提供类似C/S的交互效果,操作更方便; |
||||||||||||||||||
◆Web 2.0的特点(所有操作都是在不刷新窗口的情况下完成的):用户贡献内容 、内容聚合RSS 、更丰富的“用户体验”; |
||||||||||||||||||
◆传统的 Web 开发技术和 Ajax 技术的区别: ★无论使用哪种开发技术,流程都是先由客户端发送HTTP请求,然后由服器对请求生成响应。
|
2、Ajax(异步刷新技术)简介:
●Ajax (Asynchronous JavaScript and XNL) 并不是一种全新的技术 . 而是由 JavaScript、XML、CSS等几种现有技术整合而成。
|
●Ajax 的执行流程:用户界面触发事件调用 JavaScript , 通过 Ajax引擎——XMLHttpRequest 对象异步发送请求到服务器,服务器返回XML、JSON 或 HTML等格式的数据,然后利用返回的数据使用 DOM 和 CSS 技术局部更新用户界面; |
●工作流程如图:
|
●Ajax的关键元素: ★JavaScript语言:Ajax技术的主要开发语言; ★XML / JSON / HTML等:用来封装请求或响应的数据格式; ★DOM(文档对象模型):通过 DOM 属性或方法修改页面元素,实现页面局部刷新; ★CSS:改变样式,美化页面效果,提升用户体验度; ★Ajax 引擎 ; 即 XMLHttpRequest 对象,以异步方式在客户端与服务器端之间传递数据; |
3、XMLHttpRequest对象:整个Ajax技术的核心,提供异步发送请求的能力;
●XMLHttpRequest 对象可以在不刷新当前页面的情况下向服务器端发送异步请求,并接收服务器端的响应结果,从而实现局部更新当前页的功能,尽管名为XMLHttpRequest,但它并不限于和XML文档一起使用,它还可以接收 JSON 或 HTML 等格式的文档数据。 XMLHttpRequest 得到了目前所有览器的较好支持,但它的创建方式在不同浏览器下还具有一定的差别; |
||||||||||||||||||||||||||||||||||||
●创建 XMLHttpRequest 对象: ◆ 老版本 IE (IE 5和 IE 6): XMLHttpRequest =new ActiveXObject( "Microsoft.XMLHTTP) ◆新版本IE和其他大部分浏览器(推荐使用): XMLRttpRequest = new XMLHttpReqest() |
||||||||||||||||||||||||||||||||||||
●XMLHttpRequest 对象常用方法:
|
||||||||||||||||||||||||||||||||||||
●XMLHttpRequest 对象常用属性:
|
4、 使用 Ajax 发送 GET 请求及处理响应:
●实现Ajax的过程分为发送请求和处理响应两个步骤, ◆发送请求可以分为两种方式:即 GET 方式和 POST方式; ◆处理响应也分两种方式:即处理文本响应和处理 XML 响应; |
●使用XMLHttpRequest对象发送 GET 请求到服务器端,并处理文本方式响应,需要通过以下 4步骤实现: (1)、创建 XMLHttpRequest对象。通过 window . XMLHttpRequeSt 的返回值判断创建 XMLHttpRequest对象的方式; (2)、设置回调函数,通过 onreadystatechange 属性设置回调函数,其中回调函数需要自定义; (3)、初始化XMLHttpRequest对象,通过 open ( ) 方法设置请求的发送方式和路径; (4)、发送请求; |
eg:实现无刷新用户名验证: ◆当用户名文本框失去焦点时,发送请求到服务器,判断用户名是否存在,如果已经存在提示 “用户名已被使用”,如果不存在则提示 “用户名可以使用”;
|
<html> import java.io.IOException; 分析: ★步骤一:通过 window.XMLHttpRequest 的返回值判断当前浏览器创建XMLHttpRequest对象的方式,如果为 true, 说明是新版本 IE 或其他浏览器;可以使用 "new XMLHttpRequest()' 的方式创XMHttpRequest 对象;如果为false 说明是老版本 IE 浏览器 (IE 5 和 IE 6) , 需要使用 ’new ActiveXObject( 'Microsoft . XMLHTTP“) 的方式创建 XMLHttpRequest 对象; ★步骤二:通过 XMLHttpRequest 对象的 onreadystatechange 属性设置回调函数,监听服务器的响状态并做相应处理; ★步骤三:通过 XMLHttpRequest 对象的 open()方法,传入参数完成初始化 XMLHttpRequest 对象的工作。其中,第一个参数为 HTTP请求方式,这里选择发送 HTTP GET 请求。 第二个参数为要发送的URL请求路径,因为采用 “GET’ 方式请求 , 所以需要将要发送的数据附加到 URL 路径后面; ★步骤四:调用 XMLHttpRequest 对象的 send ( ) 方法,参数为要发送到服务器端的数据,因为采用GET方式请求时, 参数只能附加到 URL 路径后面,所以这里直接设为 null即可,需要提醒的是,如果 send()方法不设值,在不同的浏览器下可能存在不兼容问题。例如,在 IE 中能够正常运行,在 Firefox 中却不能,所以,建议最好设为 null; ★执行完步骤四:这个异步请求的发送过程就结束了,但是如何知道这个请求是否发送成功,服务器是否成功返回数据,则需要在步骤二设置的回调函数中判断。在回调函数中,使用 XMLHttpRequest对象的 readyState 属性判断当前请求的状态,使用 status 属性判断当前请求的 HTTP状态码, 当请状态码为 “4', 同时 HTTP “200“ 时, 表示成功接收到服务器端发送的数据。这时就可以用XMLHttpRequest对象的 responseText 属性去获取服务器端返回的文本格式数;
|
5、使用 Ajax 发送 GET 请求及处理响应:见上面示例注释部分的红色字体;
6、GET请求和POST请求的区别:
步 骤 |
请求方式 |
实现思路和代码 |
初始化组件(步骤三:初始化 XMLHttpRequest 对象) |
GET |
指定 XMLHttpRequest 对象的open( )方法中 method 参数为 "GET“;xmlHttpRequest.open( "GET", url, true ); |
POST |
指定 XMLHttpRequest 对象的open( )方法中 method 参数为 "POST“;xmlHttpRequest.open( "POST", url, true ); 指定XMLHttpRequest对象要请求的HTTP头信息,该HTTP头信息为固定写法; xmlHttpRequest.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" ); |
|
发送请求(步骤四) |
GET |
指定 XMLHttpRequest 对象的 send()方法中的 data参数为 “ nul“ ;xmlHttpRequest.send( null ); |
POST |
可以指定 XMLHttpRequest 对象的 send()方法中data 参数的值,即该请求需要携带的具体数据,多个名/值对使用 “&" 连接;xmlHttpRequest.send("key=xxx&type=12&year=2016" ); |
◆注意:采用 GET 方式发送请求时,通常会将需要携带的参数附加在URL路径后面一起发送,xmlHttpRequest.send() 方法不能传递参数,data 参数设置为null即可; 而采用 POST 方式发送请求时,则可以在xmlHttpRequest.send()方法中指定传递的参数;
7、 使用 jQuery 实现 Ajax:
●传统方式实现Ajax的不足: ★步骤繁琐 ★方法、属性、常用值较多不好记忆 ★处理复杂结构的响应数据(如XML格式)比较烦琐 ★浏览器兼容问题 |
|||||||||||||||||||||||||||||||||
●$.ajax()方法:可以通过发送 HTTP请求加载远程数据,是 jQuery 最底层的 Ajax 实现,具有较高灵活性; 语法:$.ajax( [settings] ); //参数 settings 是$.ajax ( )方法的参数列表,用于配置 Ajax 请求的键值对集合; ★常用配置参数表:
|
|||||||||||||||||||||||||||||||||
eg:使用$.ajax()发送异步请求: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>注册</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#name").blur(function() { var name = this.value; if (name == null || name == "") { $("#nameDiv").html("用户名不能为空!"); } else { $.ajax({ "url" : "userServlet", //要提交的URL路径 "type" : "GET", //发送请求的方式 "data" : "name="+name, //要发送到服务器的数据 "dataType" : "text", //指定返回的数据格式 "success" : callBack, //响应成功后要执行的代码 "error" : function() { //请求失败后要执行的代码 alert("用户名验证时出现错误,请稍后再试或与管理员联系!"); } }); //响应成功时的回调函数 function callBack(data) { if (data == "true") { $("#nameDiv").html("用户名已被使用!"); } else { $("#nameDiv").html("用户名可以使用!"); } }//end of callBack() } });//end of blur() }); </script> </head> <body> <form action="" id="form1"> <table> <tr> <td>用 户 名:</td> <td><input type="text" name="name" id="name" /> <font color="#c00fff">*</font></td> <td> <div id="nameDiv" style="display: inline"></div></td> </tr> </table> </form> </body> </html> 注意:$.ajax()方法的参数语法比较特殊。参数列表需要包含在一对花括号“{ }”之间,每个参数以以"参数名“ :"参数值“ 的方式书写;如有多个参数,以逗号“,”隔开; 分析:上面的代码,它与原生 JavaScript 实现 Ajax 相比要简洁清晰很多,只需设置几个参数即可。其中, success 函数用来处理晌应,相当于原生 JavaScript 实现 Ajax 时,回调数中晌应成功的分支;error 函数则相当于错误分支,在该函数中执行程序出错后的操作,如给出示信息等。另外,需要注意的是,不需要特别设定 的参数可以省略; |
|||||||||||||||||||||||||||||||||
技巧: ★1)、beforeSend回调函数除了可以修改请求参数外,还可以添加一些业务功能,以提升用户体验。例如,如果请求耗时较长,可在请求提交前显示一条提示信息,提醒用户正在处理中,以免用户认为没有响应而重复操作。 “beforeSend" : function(){ $(“#loading”).show();//#loading 为带有提示信息的div元素; }//若后面还有其他参数,这里应加“,“ 还可以进一步禁用 “提交’ 按钮,以杜绝用户的重复操作: “beforeSend" : function(){ $(“#loading“ ).show();//显示提示信 $ (“#submit“) .attr(“disabled", "disabled”) ;//禁用“提交“ 按钮; }//若后面还有其他参数,这里应加“,”; ★2)、 complete 回调函数则类似于 Java 代码中 finally语句块的特点。例如,无论是否成功,响应结束后都要隐藏“处理中”提示并将 ‘提交” 按钮恢复可用; "complete" : function(){ $(“#loading“ ).hide(); // 隐藏提示; $("#submit') .removeAttr(“ disabled”);// 恢复按钮可用 }// 若后面还有其他参数. 这里应加 ", “ |
8、 处理 JSON 格式的响应数据:
●JSON(JavaScript Object Notation)一种轻量级的数据交换格式,它基于 JavaScript 的一个子集,采用独立于语言的文本格式。JSON 类似于实体类对象,通常用来在客户端和服务器之间传递数据,在 Ajax 出现之初,客户端脚本和服务器之间传递数据使用的是 XML,但XML难于解析,体积也比较大,现在有JSON将 XML 取而代之的趋势; |
●JSON(JavaScript Object Notation): ★一种轻量级的数据交换格式 ★采用独立于语言的文本格式 ★通常用于在客户端和服务器之间传递数据 |
●JSON的优点: ★轻量级交互语言 ★结构简单 ★易于解析 |
●定义JSON对象: 语法:var JSON对象 = { "name" : value, "name" : value, …… }; ◆JSON数据以名/值对的格式书写,名和值用 ':' 隔开,名/值对之间用 ',' 隔开, 整个表式放在 ’{ }' 中,其中.,name必须是字符串,由双引号“”括起来,value可以是String、Number、boolean、null、对象、数组; eg:var person = { "name" : "张三", "age" : 30, "spouse" : null }; |
●定义JSON数组: 语法:var JSON数组 = [ value, value, …… ]; ● JSON数组的整个表达式放在 ’[ ]' 中,元素之间用“,”隔开; eg:字符串数组:var countryArray = [ "中国", "美国", "俄罗斯" ]; 对象数组:var personArray = [ { "name":"张三", "age":30 },{ "name":"李四", "age":40 } ]; |
JSP/Servlet开发——第十章 Ajax与JQuery的更多相关文章
- 基于JSP+Servlet开发手机销售购物商城系统(前台+后台)源码
基于JSP+Servlet开发手机销售购物商城系统(前台+后台) 开发环境: Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat+MySQL数据库 运行效果图: ...
- 基于JSP+Servlet开发高校社团管理系统(前台+后台) 源码
基于JSP+Servlet开发高校社团管理系统(前台+后台): 开发环境: Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat+MYSQL数据库 运行效果 ...
- windows7_下Eclipse中部署tomcat7.0进行JSP+servlet开发
环境:windows 7+EclipseJava EE IDE for Web Developers +tomcat 7.02 插件:tomcatPluginV321.zip(百度搜索下载即可) 一. ...
- JSP+Servlet开发物流管理系统 源码
开发环境: Windows操作系统开发工具:Myeclipse+Jdk+Tomcat+MYSQL数据库 运行效果图:
- Web(Jsp+ Servlet)开发中如何解决中文乱码问题
1.中文乱码的成因 编码的字符集和解码的字符集不一致. 2.web开发过程中可能出现的乱码的位置及解决方案 ①request乱码 在向服务器传递数据时,所传递的中文有可能出现乱码. post请求(协议 ...
- IntelliJ IDEA 配置JSP & Servlet开发环境
首先我们要安装和配置好JAVA和TOMCAT,这里不再详细描述 下载地址: JAVA:https://www.oracle.com/technetwork/java/javase/downloads/ ...
- 基于JSP+Servlet开发在线租车系统 java 源码
运行环境: 最好是java jdk 1.8,我们在这个平台上运行的.其他版本理论上也可以.IDE环境: Eclipse,Myeclipse,IDEA都可以tomcat环境: Tomcat 7.x,8. ...
- JSP/Servlet开发——第七章 Servel基础
1.Servlet简介: ●Servlet是一个符合特定规范的 JAVA 程序 , 是一个基于JAVA技术的Web组件. ●Servlet允许在服务器端,由Servlet容器所管理,用于处理客户端请求 ...
- 基于jsp+servlet图书管理系统之后台用户信息删除操作
上一篇的博客写的是修改操作,且附有源码和数据库,这篇博客写的是删除操作,附有从头至尾写的代码(详细的注释)和数据库! 此次删除操作的源码和数据库:http://download.csdn.net/de ...
随机推荐
- android query 模糊查询
package com.example.utils; import java.util.ArrayList; import android.content.ContentValues; import ...
- C#性能优化实践(转载)
原文地址http://www.infoq.com/cn/articles/C-sharp-performance-optimization?utm_source=infoq&utm_mediu ...
- docker images存放路径指定
steps: 1. mkdir /home/docker(你想要docker存放image的目录) 2. systemctl stop docker 3. vi /usr/lib/systemd/sy ...
- [问题记录]libpomelo的安装
1. 描述: 按照github上的操作完成 Windows in your libpomelo project root directory open git bash and type in mkd ...
- ipsec验证xl2tpd报错:handle_packet: bad control packet!
使用ipsec和xl2tpd搭建好vpn后,使用ipsec密钥方式不能连接,显示 “连接的时候被远程服务器中止” 使用xl2tpd -D查看连接情况,尝试连接了许多次,错误如下: 开始不确定问题所在, ...
- linux shell每天一阅 -- 安装nginx以及apache
当然这个博客原代码是转载大神的... 自动安装Nginx脚本,采用case方式,选择方式,也可以根据实际需求改成自己想要的脚本mynginx.sh #!/bin/sh ###nginx install ...
- 邮件营销巧妙添加GIF让您的邮件动起来
动态图片远比静态图片要吸引人,因此近年来,一些营销人员也开始越来越频繁的使用GIF动画图片,适当的穿插和点缀动态图片,能够生动形象的表达出 主题,并且时不时令读者忍俊不禁.尤其是做邮件营销的,如果能在 ...
- UEditor 中配置可以跨域访问的图片路径
文档里很清楚:http://fex.baidu.com/ueditor/#server-path 进入配置文件 当域名不是直接配置到项目根目录时,例:http://a.com/b/c 域名下有两文件 ...
- EmailMessage类
EmailMessage类 EmailMessage类 实例化有以下参数,注:以下所有参数都是可选的并且可以在send()方法之前任意时间设置. subject: email的主题 body: 主体内 ...
- Yii 读写分离 分表分库
本文转自 http://hudeyong926.iteye.com/blog/1299989 实现一主一从,一主多从,多主多从的读写分离 .支持DAO,AR,其中Query builder只完成部分 ...