JSP／Servlet开发——第十章 Ajax与JQuery

时间 2019-12-12

标签 jsp servlet 开发第十 ajax jquery 栏目 JSP 繁體版

原文原文链接

一、 认识Ajax：javascript

◆在传统的 Web 应用中，每次请求服务器都会生成新的页面，用户在提交请求后，老是要等待服务器的响应，若是前一个请求没有获得响应，则后一个请求就不能发送。 html

◆因为这是一种独占式的请求，所以若是服务器响应没有结束，用户就只能等待或者不断地刷新页面，在等待期间，因为新的页面没有生成，整个浏览器将是一片空白，而用户只能继续等待。对于用户而言，这是一种不连续的体验，同时，频繁地刷新页面也会使服务器的负担加剧；java

◆Ajax技术正是为了弥补以上不足而诞生的，Ajax 应用使用 JavaScript 异步发送请求，不用每次请求都从新加载页面，发送请求时能够继续其余的操做，在服务器响应完成后，再使用 JavaScrip将晌应展现给用户；jquery

◆使用 Ajax技术从用户发送请求到得到响应，当前用户界面在整个过程当中不会受到干扰，并且咱们能够在必要的时候只更新页面的一小部分，而不用刷新整个页面，即 ’无刷新’ 技术，这就避免了重复加载、浪费网络资源的现象，提升了加载进度，这是无刷新技术的第一个优点；ajax

◆无刷新：不刷新整个页面，只刷新局部数组

　　★无刷新的好处：浏览器

　　　　▲只更新部分页面，有效利用带宽服务器

　　　　▲提供连续的用户体验网络

　　　　▲提供相似C/S的交互效果，操做更方便；app

◆Web 2.0的特色（全部操做都是在不刷新窗口的状况下完成的）：用户贡献内容、内容聚合RSS 、更丰富的“用户体验”；

◆传统的 Web 开发技术和 Ajax 技术的区别：

★不管使用哪一种开发技术，流程都是先由客户端发送HTTP请求，而后由服器对请求生成响应。

差别	方式	说明
发送请求方式不一样	传统Web	浏览器发送同步请求
发送请求方式不一样	Ajax技术	异步引擎对象发送请求，经过 JavaScript的 XMLHttpRequest对象
服务器响应不一样	传统Web	服务器的响应内容是一个完整页面
服务器响应不一样	Ajax技术	服务器响应内容只是须要的数据
客户端处理方式不一样	传统Web	需等待服务器响应完成并从新加载整个页面后用户才能进行操做
客户端处理方式不一样	Ajax技术	能够动态更新页面中的部份内容，经过 JavaScdp动态更新页面中须要更新的部分不影响用户在页面进行其余操做

二、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 对象，以异步方式在客户端与服务器端之间传递数据；

三、XMLHttpRequest对象：整个Ajax技术的核心，提供异步发送请求的能力；

●XMLHttpRequest 对象能够在不刷新当前页面的状况下向服务器端发送异步请求，并接收服务器端的响应结果，从而实现局部更新当前页的功能，尽管名为XMLHttpRequest，但它并不限于和XML文档一块儿使用，它还能够接收 JSON 或 HTML 等格式的文档数据。 XMLHttpRequest 获得了目前全部览器的较好支持，但它的建立方式在不一样浏览器下还具备必定的差异；

●建立 XMLHttpRequest 对象：

　　◆ 老版本 IE （IE 5和 IE 6)：

　　　　XMLHttpRequest =new ActiveXObject( "Microsoft.XMLHTTP)

　　◆新版本IE和其余大部分浏览器(推荐使用):

　　　　XMLRttpRequest = new XMLHttpReqest()

●XMLHttpRequest 对象经常使用方法：

方法	说明
open( String method, String url, boolean async, String user, String password )	建立一个新的HTTP请求，参数method：设置HTTP的请求方法，如：POST、GET等，对大小写不敏感；参数url：请求的URL地址；参数async：可选，指定此请求是否为异步方法，默认为true；参数user：可选，若是服务器须要验证，此处须要指定用户名，不然，会弹出，验证的窗口；参数password：可选，验证信息中的密码，若是用户名为空，此值将被忽略；
send( String data )	发送请求到服务器端；参数data：字符串类型，经过此请求发送的数据，此参数取决于open方法中的method参数，若是method参数为’POST’，能够指定该参数，若是，method值为”GET”,该参数的值为null；
abort( )	取消当前请求
setRequestHeader(String header, String value )	设置请求的某个HTTP头信息；参数header：要指定的HTTP头名称；参数value：要指定的HTTP头名称所对应的值；
getResponseHeader(String header)	获取响应的指定HTTP头信息；参数header：要获取的HTTP头；
getAllResponseHeader( )	获取响应的全部HTTP头信息

●XMLHttpRequest 对象经常使用属性：

属性名称

说明

onreadystatechange

指定回调函数

readyState

XMLHttpRequest的状态信息，返回请求的当前状态；

0	XMLHttpRequest对象未完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应
4	XMLHttpRequest对象读取响应结束

status

返回当前请求的HTTP的状态码；就绪状态是4且状态码是200，表示正确完成；

状态码	说明
200	服务器正确返回响应
404	请求的资源不存在
500	服务器内部错误
403	没有访问权限
…	……

statusText

返回当前请求的响应状态

responseText

以文本形式得到响应的内容

responseXML

以XML形式获取响应值，而且解析成DOM对象返回；

四、 使用 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();" />&nbsp;<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 属性去获取服务器端返回的文本格式数；

五、使用 Ajax 发送 GET 请求及处理响应：见上面示例注释部分的红色字体；

六、GET请求和POST请求的区别：

步骤	请求方式	实现思路和代码
初始化组件（步骤三：初始化 XMLHttpRequest 对象）	GET	指定 XMLHttpRequest 对象的open( )方法中 method 参数为 "GET“；xmlHttpRequest.open( "GET", url, true );
初始化组件（步骤三：初始化 XMLHttpRequest 对象）	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()方法中指定传递的参数；

七、 使用 jQuery 实现 Ajax：

●传统方式实现Ajax的不足：

　　★步骤繁琐

　　★方法、属性、经常使用值较多很差记忆

　　★处理复杂结构的响应数据（如XML格式）比较烦琐

　　★浏览器兼容问题

●$.ajax()方法：能够经过发送 HTTP请求加载远程数据，是 jQuery 最底层的 Ajax 实现，具备较高灵活性；

　　 语法：$.ajax( [settings] ); //参数 settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合;

　　　　★经常使用配置参数表:

参数	类型	说明
url	String	发送请求的地址，默认为当前页地址
type	String	请求方式，默认为GET，1.9.01以后的版本可使用method代替type
data	PlainObject或 String或 Array	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
timeout	Number	设置请求超时时间
global	Boolean	表示是否触发全局Ajax事件，默认为true
beforeSend	Function ( jqXHR jqxhr, PlainObject settings )	发送请求前调用的函数,可用于设置请求头，返回false将终止请求；参数jqxhr：可选：jqXHR是XMLHttpRequest的超集；参数settings：可选：当前ajax()方法的settings对象；
success	Function( 任意类型 result, String textStatus, jqXHR jqxhr )	请求成功后调用的函数参数result：可选，由服务器返回的数据参数textStatus：可选，描述请求状态的字符串；参数jqxhr：可选
error	Function ( jqXHR jqxhr, String textStatus, String errorThrown )	请求失败时调用的函数参数：jqxhr：可选；参数textStatus：可选，错误信息；参数errorThroen：可选，文本描述的HTTP状态；
complete	Function ( jqXHR jqxhr, String textStatus )	请求完成后（不管成功仍是失败）调用的函数参数：jqxhr参数：可选；参数：textStatus：可选，描述请求状态的字符串；

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" />&nbsp;<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”)；// 恢复按钮可用

　　　　　　}// 若后面还有其余参数. 这里应加 ", “

八、 处理 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 } ];