12.4 Ajax的基础操作

最新推荐文章于 2025-09-25 18:37:36 发布

原创最新推荐文章于 2025-09-25 18:37:36 发布 · 1.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#okhttp

程序猿之JavaWeb网页设计专栏收录该内容

96 篇文章

订阅专栏

12.4 Ajax的基础操作

在jQuery中，向服务器请求数据的方法有很多。其中，基本的方法是$.ajax()，它可以精确地控制Ajax请求。例如，在请求出错时执行某些操作，设置请求字符集和超时时间等。

$.ajax()方法是jQuery中底层的Ajax方法，前面讲解的$.get()方法、$.post()方法就是对$.ajax()方法进一步的封装。$.get()方法、$.post()方法的实际封装代码如下：

jQuery.each(["get", "post"], function(i, method) {
  jQuery[method] = function(url, data, callback, type) {
    // 为了使用方便，如果没有输入data参数，变量会位移
    if (jQuery.isFunction(data)) {
      type = type || callback;
      callback = data;
      data = undefined;
    }
    return jQuery.ajax({
      url: url,
      type: method,
      dataType: type,
      data: data,
      success: callback
    });
  };
});

从第9~15行代码可以看出，$.get()方法和$.post()方法在底层都是调用$.ajax()实现相应功能的。

$.ajax()方法可以实现所有关于Ajax的操作，其语法格式如下：

$.ajax(options) // 语法格式1
$.ajax(url, options) // 语法格式2

在语法格式1中，将所有请求的参数以key-value的形式包装在options参数中。$.ajax()方法可设置的参数如下表12-4所示。

表12-4 `$.ajax()`方法可设置的参数

参数	描述
url	请求地址，默认为当前页面
data	发送至服务器的数据
xhr	用于创建XMLHttpRequest对象的函数
beforeSend(xhr)	发送请求前执行的函数
success(result, status, xhr)	请求成功时执行的函数
error(xhr, status, error)	请求失败时执行的函数
complete(xhr, status)	请求完成时执行的函数（无论请求成功或失败都会调用）
dataType	预期的服务器响应的数据类型
type	请求方式（GET或POST）
cache	是否允许浏览器缓存被请求的页面，默认为true
timeout	设置本地的请求超时时间（以毫秒计）
async	是否使用异步请求，默认为true
username	在HTTP访问认证请求中使用的用户名
password	在HTTP访问认证请求中使用的密码
contentType	发送数据到服务器时所使用的内容类型，默认为`application/x-www-form-urlencoded`
processData	是否将请求发送的数据转换为查询字符串，默认为true
context	为所有Ajax相关的回调函数指定`this`值
dataFilter(data, type)	用于处理XMLHttpRequest原始响应数据
global	是否为请求触发全局Ajax事件处理程序，默认为true
ifModified	是否仅在最后一次请求后响应发生改变时才请求成功，默认为false
traditional	是否使用传统方式序列化数据，默认为false
scriptCharset	请求的字符集

为了让读者更清晰地掌握$.ajax()方法的使用，下面通过一个案例分步演示Ajax的基本操作。

1. 在JSP页面实现`$.ajax()`方法

在项目chapter12的web目录中创建名为ajax.jsp的JSP文件，用于实现Ajax异步登录。ajax.jsp的实现如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("button").click(function() {
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/chapter12/AJAXServlet",
                    data: {
                        userName: $("#userName").val(),
                        password: $("#password").val()  // data中的内容会自动添加到url后面
                    },
                    dataType: "text",  // 返回数据的格式
                    success: function(a) {  // 请求成功时执行的函数
                        if (a == "true") {
                            $('#suss').html("登录成功!");
                        } else {
                            $('#suss').html("登录失败!");
                        }
                    },
                    error: function() {  // 请求失败时执行的函数
                        alert("请求失败");
                    }
                });
            });
        });
    </script>
</head>
<body>
<div>
    <div>
        <ul>
            <li>用户名：</li>
            <li><input id="userName" name="userName" type="text"/></li>
        </ul>
    </div>
    <div>
        <ul>
            <li>密码：</li>
            <li><input id="password" name="password" type="password"/></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><button>登录</button></li>
        </ul>
    </div>
    <div id="suss"></div>
</div>
</body>
</html>

在文件12-10中，第7行到第31行代码就是$.ajax()方法的实现。其中，第8行中$(document).ready()是jQuery中的方法，在页面加载后优先执行ready()方法内的代码；第12行代码的url属性后的值是请求的Servlet地址；第17行的dataType属性用于设置返回的数据格式，常用的有text 、json 、script 、html、xml和string，此处使用text格式。

2. 编写Servlet代码

在chapter12项目的src目录下创建名为AJAXServlet的Servlet类，用于判断用户输入的账号和密码是否正确。AJAXServlet类的实现如下：

@WebServlet(name = "AJAXServlet", urlPatterns = "/AJAXServlet")
public class AJAXServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        boolean flag = false;
        if ("itcast".equals(request.getParameter("userName")) && "123".equals(request.getParameter("password"))) {
            flag = true;  // 登录成功标志
        }
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(flag);
        out.flush();
        out.close();
    }

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

上面代码中，第22行设置了输出较方便的方式，返回登录的结果。