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()">

‍

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

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

‍

创建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方法有如下参数：

第一个参数：请求方式，例如GET和POST
第二个参数：请求的路径
第三个参数：配置同步（false）还是异步（true）

‍

然后就可以发送Ajax请求了：

 xmlhttp.send();

‍

如果使用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请求：

$.ajax()
$.get()
$.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])