22、jquery实现异步操作

最新推荐文章于 2021-05-28 19:53:37 发布

原创最新推荐文章于 2021-05-28 19:53:37 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

中级阶段2-常用框架学习专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨JQuery对Ajax的封装，展示如何简化异步请求处理，解析JSON数据交互，及利用JQuery进行JSON数据的高效遍历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标：

1、了解Jquery对Ajax的封装

2、熟练使用JQuery的异步方法

3、Jquery对json的解析

学习过程：

大家可以看到，在上一节中我们实现一个ajax非常麻烦，所以现在很多框架都对ajax进行了封装，jquery是其中的一员，jquery是一个非常轻量级的框架，实用它实现ajax变得非常简单。

一、AJax方法介绍

jquery封装的ajax方法比较多，底层实现是jQuery.ajax([options])，这个方法可以实现ajax大部分的底层，这个方法涉及了大部分的Ajax的功能，实例代码如下：

        $.ajax({
             type: "GET",
             url: "/api/register",
             data: {username:$("#username").val(), password:$("#password").val()},
             dataType: "json",
             async:true,
             beforeSend: function() {
              //请求前的处理操作
             },
             success: function(data){
                 //请求成功时处理操作
             },
             error: function(XMLHttpRequest, textStatus, errorThrown) {
                  //请求出错处理操作
                  alert(XMLHttpRequest.status);
                  alert(XMLHttpRequest.readyState);
                  alert(textStatus);
             },
             complete: function(XMLHttpRequest, textStatus) {
                  this; // 调用本次AJAX请求时传递的options参数
             }
         });

二、示例

还有两个比较简单的的ajax方法有jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])两个方法，这两个方法的参数是一样，只不过一个是使用get方法提交，一个使用post方法提交，这里我们就以get方法介绍，post方法使用是一样的。方法参数说明如下：

url String 待载入页面的URL地址。

data (可选)Map 待发送 Key/value 参数。

callback (可选)Function 载入成功时回调函数。

type (可选)String 返回内容格式，xml, html, script, json, text, _default。

下面我们使用jquery改写上一节课的登录示例。后台servlet都不需要修改，页面实现代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ajax2.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $("#loginsubmit").click( function () {       
        var username1=$("#username").val();
        var password1=$("#password").val();
         $("#loginmessage").html("登陆中....");
        //异步登陆
        $.post("login", { username: username1, password: password1 },
          function(data){         
               if(data=="1"){        
                      $("#loginmessage").html("登陆成功");
                      $("#loginform").hide();                
                 }else{               
                     $("#loginmessage").html("登陆失败");
                     $("#password").val("");                
           }
         });
     });
});
 
</script>

</head>
<body>
    <span id="loginmessage"></span>
    <form id="loginform">
        用户名： <input name="username" id="username" /> <br /> 密 &nbsp;码：<input
            name="password" id="password" type="password" /> <br /> <input
            type="button" id="loginsubmit" value="提交">
    </form>
</body>
</html>

对比上一节课，代码简洁了很多。

三、服务器端生成json

ajax标准是使用xml定义数据格式，作为客户端与服务器端的数据通讯格式，但是我们更常用的应该是json，因为json比xml更加轻量级，而且js解析json也更加简单，上一节中我们只是简单的使用字符串作为通讯格式，这节我们使用json实现更加复杂的通讯。我们主要分为两个步骤。1、服务器端生成生成json。2、客户端解析json。

服务器端通常会把对象转换为json格式，这种转换比较简单，我们可以通过字符串的拼接来实现，不过我们也可以使用第三方的技术实现自动转换，比较常用的有json-lib-2.4-jdk15包和gson包两种方式，相比之下gson更加简单一点，在android中我们已经介绍过了，所以这里我们讲讲使用json-lib的方式json-lib的下载地址如下：

http://sourceforge.net/projects/json-lib/files/

把这些包都导入项目中，我们首先把登录模块修改一下。登录成功后显示登录用户的员工姓名，所以用户登录成功后返回的是Login对象生成的json格式，代码修改如下：

public class LoginServlet extends HttpServlet {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        System.out.println("进入了后台服务器");
        PrintWriter out = response.getWriter();
        //模拟网络延迟
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        //获得用户的信息
        String username=request.getParameter("username");
        String password=request.getParameter("password");

        LoginBiz loginBiz=new LoginBiz();
        Login login=loginBiz.login(username, password);
        //把login发给页面   以json的格式
        JSONObject jsonObject=JSONObject.fromObject(login);
        if(login==null){
            out.print(jsonObject.toString());
        }else{         
            //保存在session
            request.getSession().setAttribute("login", login);
            out.print(jsonObject.toString());
        }
        out.flush();
        out.close();
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

四、客户端解析json

服务器生成之后解析json就非常简单了。而且这里也只有一个对象不涉及到循环。修改页面端代码如下即可:

 $("#loginmessage").html("欢迎"+data.employee.employeeName);

五、示例，使用jquery遍历json

上面的页面端解析比较简单，下面我们讲解一下使用jquery实现对json的遍历。新建一个EmployeeServlet类，实现查询全部员工的操作，最后生成json输出，代码如下：

public class EmployeeServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("进入");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        EmployeeBiz employeeBiz=new EmployeeBiz();
        List<Employee> employees=employeeBiz.getAll();
        //JSONObject jObject=JSONObject.fromObject(employees);
        JSONArray array=JSONArray.fromObject(employees);
        out.print(array.toString());
        System.out.println(array.toString());
        out.flush();
        out.close();
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

你可以直接访问这个servlet查看是否能够正常输出，在浏览器中输入访问路径：

http://localhost:8080/ajax01/employee，得到一下信息。

[{"addr":"北京","birthday":null,"card":"","employeeId":0,"employeeName":"张三","picture":"","salary":0},{"addr":"上海","birthday":null,"card":"","employeeId":0,"employeeName":"李四","picture":"","salary":0}]

页面端解析使用jqery的jQuery.each(object, [callback])方法，这个方法通用例遍方法，可用于例遍对象和数组。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

遍历数组示例如下：

$.each( [0,1,2], function(i, n){

alert( "Item #" + i + ": " + n );

});

也可遍历对象，示例如下：

$.each( { name: "John", lang: "JS" }, function(i, n){

alert( "Name: " + i + ", Value: " + n );

});

我们这里需要用户点击按钮后异步加载员工列表信息，html代码如下：

<input value="查询用户" type="button" id="employee"/>
<table id="emptable">
   <tr><td>用户名</td> <td>地址</td></tr>
</table>

js代码如下：

$("#employee").click(function (){
         //清空
          $("#emptable").html("<tr><td>用户名</td> <td>地址</td></tr>");
          //异步加载list 
          $.get("employee", function(data){
              $.each( data, function(i, n){
                   //alert( "Name: " + i + ", Value: " + n.employeeName );
                   $("#emptable").append("<tr><td>"+n.employeeName+"</td><td>"+n.addr+"</td></tr>");
              });
           },"json");
    });