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 请求

html

<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");
}

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

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

open 方法有如下参数：

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

 xmlhttp.send();

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

html

<!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>

新建 Servlet

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

java

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);
    }
}

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

‍

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

局部刷新

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

html

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

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

‍

我们在输入框里随便输入个 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)
      }
  }

更新 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);
              }
          })
        }

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

html

<!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>

‍ 更新 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("出错了！")
      }
  })
}

‍ 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)
});

`$.post()`

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

参数说明：

url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型 ‍

$.post("/hello/ajaxServlet", {username: rose}, function (data){
    alert(data)
});

150.Java 中的 Ajax ​

Ajax 的概念 ​

Ajax 的实现方式 ​

JS 原生实现 Ajax ​

新建 Servlet ​

局部刷新 ​

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

JQuery 实现 Ajax ​

$.ajax() 的方式 ​

$.ajax() 其他配置项 ​

$.get() ​

$.post() ​

150.Java 中的 Ajax

Ajax 的概念

Ajax 的实现方式

JS 原生实现 Ajax

新建 Servlet

局部刷新

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

JQuery 实现 Ajax

`$.ajax()` 的方式

`$.ajax()` 其他配置项

`$.get()`

`$.post()`