提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.同步请求与异步请求
- 1.1 同步请求
- 1.2 异步请求
2. Ajax发送异步请求
- 2.1 Ajax概述
- 2.2 原生JS实现AJAX详解
- 2.3 代码码演示
3. axios框架
- 3.1 axios概述
- 3.2 安装方式
- 3.3 快速入门
- 3.4 请求相关配置config
- 3.5 响应结果信息
- 3.6 请求方法的别名
- 3.7 案例

1.同步请求与异步请求

浏览器发送请求给服务器，其有同步请求和异步请求两种方式。

1.1 同步请求

概述 : 就是在发送一个请求之后，需要等待服务器响应返回，才能够发送下一个请求。之前学的请求是通过浏览器地址栏发送请求，这种方式就是属于同步请求。

在这里插入图片描述

同步请求的执行过程 :

用户向服务器发送请求；
服务器处理后实时动态生成Html，以response数据形式发回给客户端；
客户端强制刷新页面（浏览器重新运行资源）；
在此期间，用户只能等待服务器的执行结。

以登录为例：

第一次向服务器发送请求，tomcat会把login.html发送给servlet，并执行services方法。生成登录页面并返回给浏览器。
第二次像服务器发送请求，tomcat把信息提交给servlet，执行登录业务方法。然后根据跳转结果生成新的页面，返回给浏览器。注意的是即使用户名密码错误也要重新渲染页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P80HQmNd-1664550998505)(2.png)]

同步请求的缺陷:

①请求必须要等待响应

如果遇到请求阻塞，网络延迟，用户需要等待，这样用户体验效果不好。

②请求时会携带所有的信息

例如一个表单处理，表单中有很多信息，若这时候表单中某个信息是错误的，当请求servlet时，会重新刷新页面。表单中的数据又要从新填写，造成一定的困难。

1.2 异步请求

概述 : 和同步请求相对，异步不需要等待响应，随时可以发送下一次请求。

在这里插入图片描述

异步请求执行过程:

用户向服务器发送请求；
服务器处理后发回response数据(一般是JSON格式)；
客户端收到数据，实时生成部分html并渲染显示；
在此期间，不影响用户使用浏览器（并行）。

还是以上述登录为例：

第一次向服务器发送请求，tomcat会把login.html发送给servlet，并执行services方法。生成登录页面并返回给浏览器。
第二发向服务器发送请求：若输入有误时，步骤⑤将跳转回原页面。此时服务器仅需发回出错提示信息(JSON数据)。客户端浏览器根据这些数据动态渲染界面(局部更新)，可提升客户端体验。

这是使用异步请求，就弥补了同步请求的一些缺陷。

2. Ajax发送异步请求

2.1 Ajax概述

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
一般的网页如果需要更新内容，必需重新加载个页面。而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。
也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新。

2.2 原生JS实现AJAX详解

核心对象：XMLHttpRequest
- 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
打开链接：open(method,url,async) method：
- 请求的类型 GET 或 POST。
- url：请求资源的路径。
- async：true(异步) 或 false(同步)。
发送请求：send(String params) params： 请求的参数(POST 专用)。
处理响应：onreadystatechange readyState：
- 0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。
- status：200-响应已全部 OK。
获得响应数据形式 responseText： 获得字符串形式的响应数据。
responseXML： 获得 XML 形式的响应数据。

2.3 代码码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<button onclick="fn1()">异步请求</button>
</body>
<script>
    function fn1() {
        //1.创建异步请求对象
        var xhr = new XMLHttpRequest();

        //2.设置监听异步请求对象状态改变的函数
        xhr.onreadystatechange = function () {
            if (xhr.status == 200 && xhr.readyState == 4) {
                //异步请求成功 , 获取响应正文
                var data = xhr.responseText;
                console.log(data);
            }
        }
        //3.打开链接(设置参数)

        xhr.open("get", "/day20/demo01", true);

        //4.发送请求
        xhr.send();
    }
</script>
</html>

3. axios框架

3.1 axios概述

概述 : Axios，是一个基于promise 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

特点:

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

3.2 安装方式

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.3 快速入门

开发步骤:

导入axios.jsb包
发送请求

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios入门案例</title>
</head>
<body>
<button onclick="fn1()">异步请求</button>
</body>
<!--导入axios包-->
<script src="/day20/js/axios.js"></script>
<script>
    function fn1() {
        // 发送请求
        axios({
            url:"/day20/demo01", // 请求路径
            method:"get", // 请求方式
        }).then(function (res) {
            // 请求成功
            console.log(res);
        }).catch(function (res) {
            // 请求失败
            console.log(res);
        });
    }
</script>
</html>

3.4 请求相关配置config

{
   // url是用于请求的服务器 URL
  url: '/服务器请求路径',

  // method 是创建请求时使用的方法
  method: '请求方式', // get、post、put、delete....

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // transformRequest 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // transformResponse 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // headers 是即将被发送的自定义请求头
  headers: {'请求头名称': '请求头值'},

  // params是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    参数1: 值1,
        ...
    参数n: 值n
  },

  // data 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
     参数1: 值1,
        ...
     参数n: 值n
  },

  // timeout 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 毫秒数,

   // withCredentials 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

   // responseType 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

   // maxContentLength 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,

  // maxRedirects 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default


  // proxy 定义代理服务器的主机名称和端口
  // auth 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 Proxy-Authorization 头，覆写掉已有的通过使用 header设置的自定义 Proxy-Authorization 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
}

3.5 响应结果信息

{
  // data 由服务器提供的响应
  data: {},

  // status 来自服务器响应的 HTTP 状态码
  status: 200,

  // statusText 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // headers 服务器响应的头
  headers: {},

   // config 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

3.6 请求方法的别名

为了使用方便，将每一种请求方式都设置了请求别名。直接使用该方法，就可可以直接调用相关的请求方式

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

3.7 案例

案例描述 :

输入员工编号，使用异步的方式来请求数据。渲染到页面中

在这里插入图片描述

代码码演示

前端代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>axios入门案例</title>
    </head>
    <body>
        <div id="app">
            <input id="inp" v-model="userId">
            <button id="btn" @click="sendData()">查询</button>
            <br>
            查询结构:<br>
            <div v-if="flag">
                编号<span v-text="data.userId"></span><br>
                姓名<span v-text="data.name"></span><br>
                年龄<span v-text="data.age"></span><br>
            </div>
            <div v-else>
                查无此人
            </div>
        </div>
    </body>
    <!--导入axios包-->
    <script src="/day20/js/axios.js"></script>
    <script src="/day20/js/vue.js"></script>
    <script>
        var vue = new Vue({
            el:"#app",
            data:{
                userId:"",
                flag:true,
                data:{}
            },
            methods:{
                sendData(){
                    // 发送请求
                    _this=this;
                    axios.get("/day20/demo01?userId=" + this.userId).then(function (res) {
                        _this.userId = res.data.userId;
                        _this.flag = res.data.flag;
                        _this.data = res.data.data;
                    })
                }
            }
        });
    </script>
</html>

后台代码

@WebServlet("/demo01")
public class ServletDemo01 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String userId = req.getParameter("userId");
        User user = null;
        if ("1".equals(userId)){
            user = new User(1,"张三",11);
        }else if ("2".equals(userId)){
            user = new User(2,"李四",12);
        }else if ("3".equals(userId)){
            user = new User(3,"王五",16);
        }else {
            user = null;
        }

        HashMap<String, Object> map = new HashMap<>();
        if (user != null){
            map.put("msg","数据查询成功");
            map.put("flag",true);
            map.put("data",user);
        }else {
            map.put("msg","数据查询失败");
            map.put("flag",false);
        }

        String mapStr = new ObjectMapper().writeValueAsString(map);

        resp.getWriter().write(mapStr);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}