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> <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"> function validate() { var name = $("#name").val(); if (name == null || name == "") { $("#nameDiv").html("用户名不能为空！"); } else { //1.创建XMLHttpRequest对象 xmlHttpRequest = createXmlHttpRequest(); //2.设置回调函数 xmlHttpRequest.onreadystatechange = callBack; //3.初始化XMLHttpRequest组件 var url = "userServlet?name=" + name;//服务器端URL地址,name为用户名文本框获取的值 xmlHttpRequest.open("GET", url, true); //4.发送请求 xmlHttpRequest.send(null); /* 使用POST方式发送请求 var url = "userServlet";//服务器端URL地址 xmlHttpRequest.open("POST", url, true); xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = "name=" + name;//需要发送的数据信息,name为用户名文本框获取的值 xmlHttpRequest.send(data); */ //Ajax 回调函数 function callBack() { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { var data = xmlHttpRequest.responseText; if (data == "true") { $("#nameDiv").html("用户名已被使用！"); } else { $("#nameDiv").html("用户名可以使用！"); } } }//end of callBack() } }//end of validate() /* *创建XMLHttpRequest对象 */ function createXmlHttpRequest() { if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器 return new XMLHttpRequest(); } else {//返回值为false时说明是老版本IE浏览器（IE5和IE6） return new ActiveXObject("Microsoft.XMLHTTP"); } } </script> </head> <body> <form action="" id="form1"> <table> <tr> <td>用 户 名：</td> <td><input type="text" name="name" id="name" onblur="validate();" /> <font color="#c00fff">*</font></td> <td> <div id="nameDiv" style="display: inline"></div></td> </tr> </table> </form> </body> </html>
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); boolean used = false; if("ajax".equals(name)){ used = true; }else{ used = false; } response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); out.print(used); out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); this.doGet(request, response); } }
分析： ★步骤一：通过 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 } ]; |
