从 01 开始
2023-04-17
目录

Java 中的 Ajax

# 150.Java 中的 Ajax

Ajax 是 Web 开发中非常重要的概念

# Ajax 的概念

Ajax，全称 ASynchronous JavaScript And XML，异步的 JavaScript 和 XML，这里涉及到 3 个词：异步，JS 和 XML，其中 JS 和 XML 我们都学过了，关键是异步怎么理解。讲解异步的概念，又不得不提及到同步： ‍ 什么是异步和同步：的基础上

  • 同步：客户端和服务器端通信时，客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作
  • 异步：客户端和服务器端通信时，客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。因此使用 Ajax 能极大提升用户的体验 ‍ 示意图：

# Ajax 的实现方式

JS 自带支持 Ajax，除此之外，很多 JS 框架也对 Ajax 做了封装，例如 JQuery。

JS 原生实现方式我们了解即可，主要是看看 JQuery 如何封装的。

我们在 web 目录下新建 JS 文件，然后导入 JQuery 的依赖：

jquery-3.3.1.js
jquery-3.3.1.min.js

# JS 原生实现 Ajax

我们在 web 目录下新建一个目录 Ajax，然后创建 01.JS 原生实现 Ajax.html ‍ 我们新建一个按钮，用来触发 Ajax 请求

<input type="button" value="发送异步请求" onclick="fun()">
1

使用 Ajax 发送请求的步骤如下：

  1. 创建 XMLHttpRequest 对象，该对象用来发送请求
  2. 配置连接，例如使用什么方式（get 还是 post），要请求的路径，是同步还是异步
  3. 发送请求
  4. 接收并处理服务器返回的结果

创建 XMLHttpRequest 对象：

var xmlhttp;
if (window.XMLHttpRequest) {
	xmlhttp = new XMLHttpRequest();
}else {
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
1
2
3
4
5
6

我们通过 window 对象的 XMLHttpRequest 属性来创建对象。由于 IE6 及以下没有 XMLHttpRequest 对象，因此创建方式也不同，。 ‍ 然后就是配置发送的参数了，也叫建立连接

 // 2. 建立连接
xmlhttp.open("GET", "/hello/ajaxServlet?username=peter", true);
1
2

open 方法有如下参数：

  1. 第一个参数：请求方式，例如 GET 和 POST
  2. 第二个参数：请求的路径
  3. 第三个参数：配置同步（false）还是异步（true） ‍ 然后就可以发送 Ajax 请求了：
 xmlhttp.send();
1

如果使用 get，请求参数在 URL 后面拼接；而如果使用 POST 方式，则请求参数在 send 方法中定义，此时，代码基本就写完了：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <script>
        function fun(){
          // 发送异步请求

          // 1. 创建核心对象
          var xmlhttp;
          if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
          }else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }

          // 2. 建立连接
          xmlhttp.open("GET", "/hello/ajaxServlet?username=peter", true);

          // 3.发送请求
          xmlhttp.send();

          // 4. 接收并处理服务器返回的结果

        }
      </script>
    </head>
    <body>
      <input type="button" value="发送异步请求" onclick="fun()">
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 新建 Servlet

我们新建一个 Servlet 来接受请求，并返回数据：

package com.peterjxl.ajax;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 获取请求参数
        String username = req.getParameter("username");
        System.out.println(username);
        resp.getWriter().write("Hello, " + username);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

‍ 然后我们重启 Tomcat，打开浏览器和控制台，访问 http://localhost: 8080/hello/Ajax/01.JS 原生实现 Ajax.html：

‍

可以看到发送了请求，并且处理器返回了结果

# 局部刷新

接下来我们就体会下什么是局部刷新。我们添加一个输入框：

      <input type="button" value="发送异步请求" onclick="fun()"> <br/>
      <input type="text">
1
2

‍ 然后页面上就有输入框了

‍

我们在输入框里随便输入个 123. 如果我们点击右上角的刷新按钮，浏览器会刷新，此时输入框的内容会不见；

而如果我们在输入框里随便输入个 123，点击 “发送异步请求”的按钮，浏览器是不会刷新的！此时输入框里的内容还在。也就是我们发送了网络请求，但是页面没刷新

如果是同步的方式，在服务器处理请求的期间，用户在页面上是什么都干不了的，例如输入框也获取不了焦点，也不能滚动浏览器，查看其他内容，客户体验不好。而异步可以。 ‍

# 接收并处理服务器返回的结果

接下来我们演示如何获取服务器返回的结果。当 xmlhttp 对象的状态转变的时候，会触发事件 onreadystatechange；而什么会影响 xmlhttp 对象的状态转变呢？有如下几种情况：

  • 0：请求未初始化
  • 1：服务器连接已建立
  • 2：请求已收到
  • 3：正在处理请求
  • 4：请求已完成且响应已就绪 ‍ 也就是说，当服务器返回数据的时候，会触发 onreadystatechange 事件，并且状态会变为 4. 因此我们可以这样写代码：
xmlhttp.onreadystatechange = function (){

      if (xmlhttp.readyState === 4 && xmlhttp.status === 200 ){
          // 获取响应结果
          var text = xmlhttp.responseText;
          alert(text)
      }
  }
1
2
3
4
5
6
7
8

更新 Tomcat 资源，点击按钮，可以看到过了一段时间后，有弹框。

# JQuery 实现 Ajax

JQuery 中有如下 3 种方法实现了发送 Ajax 请求：

  1. $.ajax()
  2. $.get()
  3. $.post()

# $.ajax() 的方式

我们复制一份“01.JS 原生实现 Ajax.html”， 并重命名为“02.JQuery 实现 Ajax 方式 1.html”，并修改 fun 方法里的内容如下：

function fun(){
          // 使用`$.ajax()`发送异步请求
          $.ajax({
              url: '/hello/ajaxServlet', //请求的路径
              type: "POST", //请求方式，默认GET
              // data: "username=jack&age=23", //请求参数写法一
              data: {   //请求参数写法二，JSON的形式，推荐使用
                  "username": "jack",
                  "age": 23
              },
              success: function (data){ //定义响应成功后的回调函数，data就是服务器返回的值
                  alert(data);
              }
          })
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完整代码：（注意引入 JQuery）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
      <script>
        function fun(){
          // 使用`$.ajax()`发送异步请求
          $.ajax({
              url: '/hello/ajaxServlet', //请求的路径
              type: "POST", //请求方式，默认GET
              // data: "username=jack&age=23", //请求参数写法一
              data: {   //请求参数写法二，JSON的形式，推荐使用
                  "username": "jack",
                  "age": 23
              },
              success: function (data){ //定义响应成功后的回调函数，data就是服务器返回的值
                  alert(data);
              }
          })
        }
      </script>
    </head>
    <body>
      <input type="button" value="发送异步请求" onclick="fun()"> <br/>
      <input type="text">
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

‍ 更新 Tomcat 并访问，可以得到和 JS 原生实现 Ajax 的结果，但是用 JQuery 更简单一点 ‍

# $.ajax() 其他配置项

$.ajax() 还有不少配置项：

  • error：定义处理错误的回调函数
  • dataType：指定服务器响应的数据的类型。如果不指定，则以 HTTP 响应的 MIME 类型判断 ‍ 我们可以测试下，访问一个不存在的路径：访问 ajaxServlet111 的时候，由于该资源路径不存在，会返回一个 404，然后 error 里定义的方法会被执行。
function fun(){
  // 使用`$.ajax()`发送异步请求
  $.ajax({
      url: '/hello/ajaxServlet111', //请求的路径
      type: "POST", //请求方式，默认GET
      // data: "username=jack&age=23", //请求参数写法一
      data: {   //请求参数写法二，JSON的形式，推荐使用
          "username": "jack",
          "age": 23
      },
      success: function (data){ //定义响应成功后的回调函数，data就是服务器返回的值
          alert(data);
      },
      error: function (){   //
        alert("出错了！")
      }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

‍ dataType 有如下取值：

  • XML
  • HTML
  • script
  • JSON
  • JSONP
  • text

# $.get()

用来发送 get 请求，比 $.ajax() 语法更简单：$.get(url, [data], [callback], [type])。

参数说明：

  • url：请求路径

    ‍

  • data：请求参数

  • callback：回调函数

  • type：响应结果的类型

第一个参数必需，其他参数可选。例如：

$.get("/hello/ajaxServlet", {username: rose}, function (data){
  alert(data)
});
1
2
3

# $.post()

和 $.get() 语法类似：$.post(url, [data], [callback], [type])

参数说明：

  • url：请求路径
  • data：请求参数
  • callback：回调函数
  • type：响应结果的类型 ‍
$.post("/hello/ajaxServlet", {username: rose}, function (data){
    alert(data)
});
1
2
3
上次更新: 2025/6/3 09:31:54
Listener 学习
Java 中的 JSON

← Java 中的 JSON→

最近更新
01
新闻合订本 2025-10
10-31
02
2025 年 10 月记
10-30
03
用 AI 批量优化思源笔记排版
10-15
更多文章>
Theme by Vdoing | Copyright © 2022-2025 | 粤 ICP 备 2022067627 号 -1 | 粤公网安备 44011302003646 号 | 点击查看十年之约