【Web前端】Ajax超详解

编程语言 2023-12-17 10:10:53 阅读次数: 0

文章目录

1. AJAX简介

AJAX：全称是Asynchronous JavaScript And XML，即异步的JavaScript和XML。AJAX是用于前后端交互的工具，也就是说通过AJAX作为桥梁，客户端可以给服务端发送消息，也可以接收服务端的响应消息。

AJAX的两种实现方式：

  • XHR：使用XMLHttpRequest对象来实现AJAX
  • Fetch：使用Fetch API来实现AJAX

XHR 和 Fetch 的区别：

功能点 XHR Fetch
基本的请求能力 ✅ ✅
基本的获取响应能力 ✅ ✅
监控请求进度 ✅ ❌
监控响应进度 ✅ ✅
Service Worker中是否可用 ❌ ✅
控制cookie的携带 ❌ ✅
控制重定向 ❌ ✅
请求取消 ✅ ✅
自定义referrer ❌ ✅
流 ❌ ✅
API风格 Event Promise
活跃度 停止更新 不断更新

2. 前后端交互

由于AJAX是用于前后端交互的工具，为了更方便并深入的理解AJAX以及后续对它的实现，需要补充一下前后端交互的相关知识。

前后端交互使用的协议是HTTP协议，该协议规定了两个方面的内容：

  • 传递消息的模式
  • 传递消息的格式

1.传递消息的模式为「请求-响应」模式

  • 发起请求的称之为客户端，接收请求并完成响应的称之为服务器。
  • 「请求-响应」完成后，一次交互结束。

在这里插入图片描述

2.传递消息的格式是纯文本格式，分为以下三部分

请求行
请求头

请求体

在这里插入图片描述

3. XHR

为了节省学习的成本，本文专注于讲解前端的内容，对于后端的部分，使用模拟的数据以及现有的工具来完成对后端的实现。

通过以下三种方式，来模拟后端，由浅入深的展开Ajax：

  • 使用JSON文件模拟后端返回的数据
  • 调用网络接口来获取后端返回的数据
  • 使用json-server模拟服务器来实现各种请求方式

3.1 XMLHttpRequest对象

1.XMLHttpRequest 对象的方法

方法 描述
abort() 中止当前请求
getAllResponseHeaders() 返回所有的响应头
getResponseHeader() 返回特定的响应头
open() 规定请求的方式
send() 发送请求到服务器
setRequestHeader() 设置请求头

2.XMLHttpRequest 对象的属性

属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号
statusText 返回状态文本

3.2 获取模拟的后端数据

现在前后端交互的文本数据，常用的是json格式的文本数据，因此这里使用json文件，来模拟后端返回的数据。

在当前页面同级目录下，新建一个test.json，模拟后端返回的数据，内容如下

{
    
    
  "name": "Bill",
  "age": 18
}

1.向服务器发送请求

open(method, url, async)：初始化一个新创建的请求，或重新初始化一个请求

  • method：请求的方式，如 GET、POST等
  • url：服务器文件的位置
  • async：是否异步执行操作，异步为true
var xhr = new XMLHttpRequest();
xhr.open("GET", "test.json", true); // 创建请求，以GET请求的方式，请求服务器的test.json
xhr.send(); // 发送请求

按F12，再刷新页面，点击Network，再选中Fetch/XHR，可以看到有一个test.json文件

在这里插入图片描述

双击test.json，再选中Response，可以看到响应的数据内容就是test.json中的内容

在这里插入图片描述

2.根据 XMLHttpRequest 和 HTTP 的状态，判断请求是否成功，并获取响应数据

  • onreadystatechange：定义当 readyState 属性发生变化时被调用的函数（触发readystatechange事件）
  • readyState：XMLHttpRequest 的状态
    • 0：请求未初始化
    • 1：服务器连接已建立
    • 2：请求已接收
    • 3：正在处理请求
    • 4：请求已完成且响应已就绪
  • status： HTTP 的状态码，200-299表示请求成功，具体状态码含义可参考 常见的HTTP状态码汇总
    • 200：OK
    • 403：Forbidden
    • 404：Not Found
  • responseText：以字符串形式返回的响应数据

注：通过以上可以得出，当readyState === 4且status范围在 [200,300)时，表示本次请求正常完成。

var xhr = new XMLHttpRequest();
xhr.open("GET", "test.json", true);
xhr.send();

// readyState属性发生变化时调用的函数
xhr.onreadystatechange = function () {
    
    
  if (xhr.readyState === 4) {
    
     // 请求已完成且响应已就绪
    if (xhr.status === 200) {
    
     // 请求成功
      console.log(JSON.parse(xhr.responseText)); // 打印服务器的响应文本
    } else {
    
    
      console.log(xhr.status, xhr.statusText); // 打印响应状态码和响应状态文本
      console.log(xhr.responseText);
    }
  }
};

刷新页面，运行结果如下：

在这里插入图片描述

通过修改以上代码中的test.json为test1.json，构造请求服务器中不存在的文件，运行结果如下：

在这里插入图片描述

3.可以使用onload属性代替onreadystatechange且readyState === 4的情况

注：onload属性表示当一个XMLHttpRequest请求完成的时候会触发load事件

var xhr = new XMLHttpRequest();
xhr.open("GET", "test.json", true);
xhr.send();

// XMLHttpRequest请求完成的时候会触发load事件
xhr.onload = function () {
    
    
  // 使用正则表达式，判断xhr.status范围是否在[200,300)
  if (/^2\d{2}$/.test(xhr.status)) {
    
    
    console.log(JSON.parse(xhr.responseText));
  } else {
    
    
    console.log(xhr.status, xhr.statusText);
    console.log(xhr.responseText);
  }
};

3.3 获取网络数据

调用网络接口，将模拟的数据，改为网络的真实数据。

将上面代码中的test.json改为以下网络地址即可：

http://www.xiongmaoyouxuan.com/api/tabs

1.向网络服务器请求

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.xiongmaoyouxuan.com/api/tabs", true); 
xhr.send();

// XMLHttpRequest请求完成的时候会触发load事件
xhr.onload = function () {
    
    
  if (/^2\d{2}$/.test(xhr.status)) {
    
    
    console.log(JSON.parse(xhr.responseText));
  } else {
    
    
    console.log(xhr.status, xhr.statusText);
    console.log(xhr.responseText);
  }
};

运行结果如下：

在这里插入图片描述

由于json数据过长，在此处贴出部分数据作为参照：

{
    
    
  "code": 200,
  "data": {
    
    
    "list": [
      {
    
    
        "commoditiesBoardId": 0,
        "id": 1,
        "name": "今日推荐",
        "imageUrl": "http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg",
        "extraData": "{\"need_banner\": 1, \"category_id\": 13, \"need_grid\": 1}",
        "flowBoardId": 89,
        "note": "小编精选，全场特惠 (ง •̀_•́)ง",
        "gridsBoardId": 3,
        "bannerBoardId": 2,
        "feedsBoardId": 0,
        "categoryId": 0
      },
      {
    
    
        "commoditiesBoardId": 157,
        "id": 2,
        "name": "女装",
        "imageUrl": "http://img1.lukou.com/static/p/fb/tab/2/20190220-155007.png",
        "extraData": "{\"category_id\": 1, \"fe_category_id\": 1689}",
        "flowBoardId": 75,
        "note": "",
        "gridsBoardId": 4,
        "bannerBoardId": 0,
        "feedsBoardId": 5,
        "categoryId": 1689
      }
    ]
  }
}

2.对服务器返回的数据进行处理，并渲染到页面上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击查询商品</button>
    <ul>
      <li>
        <p>今日推荐</p>
        <img src="http://img1.lukou.com/static/p/fb/tab/1/20181211-151644.jpeg" />
      </li>
    </ul>
    <script>
      var btn = document.querySelector("button");
      var ul = document.querySelector("ul");

      // 注册点击事件
      btn.onclick = function () {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://www.xiongmaoyouxuan.com/api/tabs", true);
        xhr.send();

        // XMLHttpRequest请求完成的时候会触发load事件
        xhr.onload = function () {
      
      
          if (/^2\d{2}$/.test(xhr.status)) {
      
      
            var responseData = JSON.parse(xhr.responseText); // 响应数据
            console.log(responseData);
            render(responseData); // 渲染数据
          } else {
      
      
            console.log(xhr.status, xhr.statusText);
            console.log(xhr.responseText);
          }
        };
      };

      // 处理获取的响应数据，并将其渲染到页面上
      function render(responseData) {
      
      
        var commodityList = responseData.data.list.map(function (commodity) {
      
      
          return `<li>
            <p>${ 
        commodity.name}</p>
            <img src="${ 
        commodity.imageUrl}" />
          </li>`;
        });
        console.log(commodityList);
        ul.innerHTML = commodityList.join("");
      }
    </script>
  </body>
</html>

点击按钮，运行结果如下：

在这里插入图片描述

3.4 使用json-server模拟服务器

json-server可以模拟服务器：下载node.js，并安装json-server，再新建一个json文件，通过json-server来运行这个json文件，此时该json文件就具备了基本的后端服务器的能力，可以完成一些基本的增删改查。

3.4.1 安装node.js

1.下载并安装node.js，进入node官网，选择LTS版本点击下载安装包

node官网地址：https://nodejs.org/en

在这里插入图片描述

2.双击安装包，一直点击Next，完成安装

在这里插入图片描述

3.打开cmd，输入node -v 和 npm -v，出现版本号则表示安装成功

在这里插入图片描述

4.切换镜像源至国内淘宝镜像源，提高npm下载速度

# 设置镜像源
npm config set registry https://registry.npm.taobao.org 
# 查看镜像源
npm config get registry

在这里插入图片描述

3.4.2 安装并使用json-server

1.输入以下命令，安装json-server

npm install -g json-server

在这里插入图片描述

2.安装完成json-server以后，再新建一个test.json文件，内容如下

{
    
    
  "users": [
    {
    
    
      "id": 1,
      "name": "Bill"
    },
    {
    
    
      "id": 2,
      "name": "Jackson"
    }
  ],
  "shopcar": ["女装", "男装", "配饰", "零食", "母婴用品", "箱包"]
}

3.打开cmd，切换路径到test.json所在路径，输入命令 json-server test.json运行服务器，得到服务器地址如下

http://localhost:3000/users
http://localhost:3000/shopcar

在这里插入图片描述

4.当前页面index.html，输入以下内容

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/users", true); // 向json-server服务器发送请求
xhr.send();

xhr.onload = function () {
    
    
  if (/^2\d{2}$/.test(xhr.status)) {
    
    
    console.log(JSON.parse(xhr.responseText));
  } else {
    
    
    console.log(xhr.status, xhr.statusText);
    console.log(xhr.responseText);
  }
};

5.由于json-server会和Live Server冲突，所以不能使用Live Server打开浏览器，可以下载插件Preview on Web Server，使用该插件打开浏览器。

右键点击vscode-preview-server：Launch on browser，打开页面。

在这里插入图片描述

打开控制台，运行结果如下，说明获取到了服务器返回的数据：

在这里插入图片描述

3.5 常见的请求方式

请求方式 描述
GET 获取数据
POST 提交数据
PUT 更新全部数据
PATCH 更新部分数据
DELETE 删除数据
HEAD 获取服务器头信息
OPTIONS 获取服务器设备信息
CONNECT 保留请求方式

在3.4节使用json-server模拟服务器的基础之上，来模拟如下5种常见的请求方式。

test.json的内容为3.4.2节中的内容，在test.json所在路径下，输入以下命令启动json-server：

json-server test.json --watch

3.5.1 GET请求

GET请求：用于获取服务器的数据。

GET请求的方式有两种：

  • 不带参数的GET请求，获取服务器地址的全部数据
  • 带参数的GET请求，获取服务器地址的特定数据

1.不带参数的GET请求，获取服务器全部数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>GET</button>
    <script>
      var btn = document.querySelector("button");
      btn.onclick = function () {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost:3000/users", true); // 创建一个GET请求
        xhr.send();

        xhr.onload = function () {
      
      
          if (/^2\d{2}$/.test(xhr.status)) {
      
      
            console.log(JSON.parse(xhr.responseText));
          } else {
      
      
            console.log(xhr.status, xhr.statusText);
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>

右键点击vscode-preview-server：Launch on browser，打开页面并点击GET按钮，运行结果如下：

在这里插入图片描述

2.带参数的GET请求，获取服务器地址的特定数据

如需获取特定数据，在原地址上加上key=value格式的数据即可。

  • key=value：获取单个特定数据
  • key=value&key=value：获取多个特定数据

key=value：比如向服务器请求获取id=1的数据，可以修改http://localhost:3000/users为http://localhost:3000/users?id=1，运行结果如下：

在这里插入图片描述
key=value&key=value：比如向服务器请求获取id=1以及id=2的数据，可以修改http://localhost:3000/users为http://localhost:3000/users?id=1&id=2，运行结果如下：

在这里插入图片描述

3.5.2 POST请求

POST请求：用于向服务器提交数据。

POST提交文本数据有两种格式：

  • form格式：也就是key=value格式的字符串，设置content-type为application/x-www-form-urlencoded
  • json格式：也就是json格式的字符串，设置content-type为application/json

1.使用form编码格式的字符串，向服务器提交数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>POST</button>
    <script>
      var btn = document.querySelector("button");
      btn.onclick = function () {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost:3000/users", true); // 创建一个POST请求
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 设置请求头的content-type属性值为form编码
        data = "name=Michael&age=18"; // form编码格式的数据
        xhr.send(data); // 发送数据

        xhr.onload = function () {
      
      
          if (/^2\d{2}$/.test(xhr.status)) {
      
      
            console.log(JSON.parse(xhr.responseText)); 
          } else {
      
      
            console.log(xhr.status, xhr.statusText);
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>

打开页面并点击POST按钮，运行结束后，发现test.json文件新增了刚刚提交的数据

在这里插入图片描述

2.使用json格式的字符串，向服务器提交数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>POST</button>
    <script>
      var btn = document.querySelector("button");
      btn.onclick = function () {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://localhost:3000/users", true); // 创建一个POST请求
        xhr.setRequestHeader("content-type", "application/json"); // 设置请求头的content-type属性值为json格式
        data = JSON.stringify({
      
       name: "Ada", age: 18 }); // json格式的字符串
        xhr.send(data); // 发送数据

        xhr.onload = function () {
      
      
          if (/^2\d{2}$/.test(xhr.status)) {
      
      
            console.log(JSON.parse(xhr.responseText));
          } else {
      
      
            console.log(xhr.status, xhr.statusText);
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>

打开页面并点击POST按钮，运行结束后，发现test.json文件新增了刚刚提交的数据

在这里插入图片描述

3.5.3 PUT请求

PUT请求：用于更新服务器的数据，覆盖式地更新数据，也就是更新全部数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>PUT</button>
    <script>
      var btn = document.querySelector("button");
      btn.onclick = function () {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open("PUT", "http://localhost:3000/users/4", true); // 创建一个PUT请求，请求更新id为4的数据
        xhr.setRequestHeader("content-type", "application/json"); // 设置请求头的content-type属性值为json格式
        data = JSON.stringify({
      
       age: 28 }); // 更新age
        xhr.send(data); // 发送数据

        xhr.onload = function () {
      
      
          if (/^2\d{2}$/.test(xhr.status)) {
      
      
            console.log(JSON.parse(xhr.responseText));
          } else {
      
      
            console.log(xhr.status, xhr.statusText);
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>

注：更新的路径要写准确指定，http://localhost:3000/users/4中的/4表示id为4的数据

打开页面并点击PUT按钮，运行结束后，发现test.json文件更新了刚刚发送的age数据，而且是覆盖式更新，以前的name属性数据被覆盖不见了。

在这里插入图片描述

3.5.4 PATCH请求

PATCH请求：用于更新服务器的数据，补丁式地更新数据，也就是更新部分数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>PATCH</button>
    <script>
      var btn = document.querySelector("button");
      btn.onclick = function () {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open("PATCH", "http://localhost:3000/users/3", true); // 创建一个PATCH请求，请求更新id为3的数据
        xhr.setRequestHeader("content-type", "application/json"); // 设置请求头的content-type属性值为json格式
        data = JSON.stringify({
      
       age: 28 }); // 更新age
        xhr.send(data); // 发送数据

        xhr.onload = function () {
      
      
          if (/^2\d{2}$/.test(xhr.status)) {
      
      
            console.log(JSON.parse(xhr.responseText));
          } else {
      
      
            console.log(xhr.status, xhr.statusText);
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>

打开页面并点击PATCH按钮，运行结束后，发现test.json文件更新了刚刚发送的age数据，而且是补丁式更新，以前的name属性数据不会被覆盖，依然保持原样。

在这里插入图片描述

3.5.5 DELETE请求

DELETE请求：用于删除服务器的数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>DELETE</button>
    <script>
      var btn = document.querySelector("button");
      btn.onclick = function () {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open("DELETE", "http://localhost:3000/users/4", true); // 创建一个DELETE请求，请求删除id为4的数据
        xhr.send(); // 发送请求

        xhr.onload = function () {
      
      
          if (/^2\d{2}$/.test(xhr.status)) {
      
      
            console.log(JSON.parse(xhr.responseText));
          } else {
      
      
            console.log(xhr.status, xhr.statusText);
            console.log(xhr.responseText);
          }
        };
      };
    </script>
  </body>
</html>

打开页面并点击DELETE按钮，运行结束后，发现test.json文件中id为4的数据已被删除。

在这里插入图片描述

4. Fetch

注：要学习Fetch，需要先学习ES6中的Promise以及async和await.

使用Fetch进行前后端交互，是通过fetch() 方法发起获取资源的请求，它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

4.1 Fetch API

Fetch API包括以下部分：

  • Headers接口：表示请求头或响应头的信息，允许对 HTTP 请求和响应头执行各种操作。
  • Request接口：表示资源请求
  • Response接口：表示请求的响应数据
  • fetch()方法：用于发起获取资源的请求

Headers对象的方法：

方法 描述
Headers.append() 给现有的header添加一个值
Headers.set() 替换现有的header的值
Headers.get() 获取指定header的全部值
Headers.delete() 删除指定header

Request对象的属性：

属性 描述
Request.method 请求方式
Request.url 请求的 URL
Request.headers 请求相关的Headers对象
Request.credentials 请求的证书
Request.mode 请求的模式
Request.cache 请求的缓存模式

Response对象的属性：

属性 描述
Response.headers Response所关联的Headers对象
Response.status Response的状态码
Response.statusText 与该Response状态码一致的状态信息
Response.url Response的URL

Response对象实例的方法：

方法 描述
Response.json() 将响应体解析为json对象
Response.text() 将响应体解析为字符串
Response.formData() 将响应体解析为fromData表单对象
Response.blob() 将响应体解析为二进制blob对象
Response.arrayBuffer() 将响应体解析为二进制arrayBuffer对象

fetch()方法：

Promise<Response> fetch(input[, init]);

  • input：定义要获取的资源，这可能是：
    • 一个字符串，包含要获取资源的 URL
    • 一个request对象
  • init：一个配置项对象，包括所有对请求的设置。可选的参数有：
    • method: 请求方式
    • headers: 请求头信息
    • body: 请求体信息
    • mode: 请求的模式
    • credentials: 请求的证书
    • cache: 请求的缓存模式
    • redirect: 如何处理重定向模式

4.2 使用Fetch完成请求

依然是使用json-server模拟服务器的情况下，来模拟GET、POST、PUT、PATCH、DELETE，这5种常见的请求方式。

test.json的内容为3.4.2节中的内容，在test.json所在路径下，打开cmd输入以下命令启动json-server：

json-server test.json --watch

在这里插入图片描述

4.2.1 GET请求

由于请求是异步的，所以此处使用async和await。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>GET</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        const resp = await fetch("http://localhost:3000/users"); // 等待拿到响应头，拿到响应头promise就完成了
        const data = await resp.json(); // 等待解析响应体，使用json格式解析响应体
        console.log(resp); // 响应头
        console.log(data); // 响应体
      };
    </script>
  </body>
</html>

右键点击vscode-preview-server：Launch on browser，打开页面并点击GET按钮，运行结果如下：

在这里插入图片描述

以下两行代码，还可以精简为一行：

const resp = await fetch("http://localhost:3000/users"); // 等待拿到响应头，拿到响应头promise就完成了
const data = await resp.json(); // 等待解析响应体，使用json格式解析响应体

精简后：

const data = await fetch("http://localhost:3000/users").then(resp => resp.json());

4.2.2 POST请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>POST</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        // 请求的信息
        init = {
      
      
          method: "POST",
          headers: {
      
       "content-type": "application/json" },
          body: JSON.stringify({
      
       name: "Ada", age: 18 })
        };

        // 发送请求
        const data = await fetch("http://localhost:3000/users", init).then(resp => resp.json());
        console.log(data);
      };
    </script>
  </body>
</html>

打开页面并点击POST按钮，运行结果如下：

在这里插入图片描述

4.2.3 PUT请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>PUT</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        // 请求的信息
        init = {
      
      
          method: "PUT",
          headers: {
      
       "content-type": "application/json" },
          body: JSON.stringify({
      
       age: 28 })
        };

        // 发送请求
        const data = await fetch("http://localhost:3000/users/3", init).then(resp => resp.json());
        console.log(data);
      };
    </script>
  </body>
</html>

打开页面并点击PUT按钮，运行结果如下：

在这里插入图片描述

4.2.4 PATCH请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>PATCH</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        // 请求的信息
        init = {
      
      
          method: "PATCH",
          headers: {
      
       "content-type": "application/json" },
          body: JSON.stringify({
      
       age: 28 })
        };

        // 发送请求
        const data = await fetch("http://localhost:3000/users/2", init).then(resp => resp.json());
        console.log(data);
      };
    </script>
  </body>
</html>

打开页面并点击PATCH按钮，运行结果如下：

在这里插入图片描述

4.2.5 DELETE请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>DELETE</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        // 请求的信息
        init = {
      
       method: "DELETE" };

        // 发送请求
        const data = await fetch("http://localhost:3000/users/3", init).then(resp => resp.json());
        console.log(data);
      };
    </script>
  </body>
</html>

打开页面并点击DELETE按钮，运行结果如下：

在这里插入图片描述

5. Axios

Axios：是一个基于promise封装的第三方HTTP库，可以用在浏览器和node.js中。

5.1 Axios API

Axios网址：https://www.npmjs.com/package/axios

打开Axios网址，可以看到有一个目录，目录中包含了Axios的安装教程、API使用教程以及例子等等。

在这里插入图片描述

1.安装：安装方法有很多种，这里我们通过引用外部js文件的方式，引入axios库。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

2.API使用方法

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]])

其中config配置可参考以下内容：

// Send a POST request
axios({
    
    
  method: 'post',
  url: '/user/12345',
  data: {
    
    
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

5.2 使用Axios完成请求

依然是使用json-server模拟服务器的情况下，来模拟GET、POST、PUT、PATCH、DELETE，这5种常见的请求方式。

test.json的内容为3.4.2节中的内容，在test.json所在路径下，打开cmd输入以下命令启动json-server：

json-server test.json --watch

1.GET请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
  </head>
  <body>
    <button>GET</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        await axios
          .get("http://localhost:3000/users") // 发送GET请求
          .then(res => {
      
      
            console.log(res); // 响应的全部内容
            console.log(res.data); // 响应的数据内容
          })
          .catch(err => {
      
      
            console.log(err);
          });
      };
    </script>
  </body>
</html>

右键点击vscode-preview-server：Launch on browser，打开页面并点击GET按钮，运行结果如下：

在这里插入图片描述
如果要发送带参数的GET请求，可以修改axios.get()为以下内容：

// 获取id=1的数据
axios.get("http://localhost:3000/users", {
    
    
  params: {
    
    
    id: 1 
  }
});

2.POST请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
  </head>
  <body>
    <button>POST</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        await axios
          .post("http://localhost:3000/users", {
      
       name: "Ada", age: 18 }) // 发送POST请求
          .then(res => {
      
      
            console.log(res.data);
          })
          .catch(err => {
      
      
            console.log(err);
          });
      };
    </script>
  </body>
</html>

如果要使用form编码的格式，可以修改axios.post()为以下内容：

axios.post("http://localhost:3000/users", "name=Michael&age=18")

3.PUT请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
  </head>
  <body>
    <button>PUT</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        await axios
          .put("http://localhost:3000/users/3", {
      
       age: 28 }) // 发送PUT请求
          .then(res => {
      
      
            console.log(res.data);
          })
          .catch(err => {
      
      
            console.log(err);
          });
      };
    </script>
  </body>
</html>

4.PATCH请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
  </head>
  <body>
    <button>PATCH</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        await axios
          .patch("http://localhost:3000/users/2", {
      
       age: 28 }) // 发送PATCH请求
          .then(res => {
      
      
            console.log(res.data);
          })
          .catch(err => {
      
      
            console.log(err);
          });
      };
    </script>
  </body>
</html>

5.DELETE请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
  </head>
  <body>
    <button>DELETE</button>
    <script>
      const btn = document.querySelector("button");
      btn.onclick = async function () {
      
      
        await axios
          .delete("http://localhost:3000/users/3") // 发送DELETE请求
          .then(res => {
      
      
            console.log(res.data);
          })
          .catch(err => {
      
      
            console.log(err);
          });
      };
    </script>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/aidijava/article/details/129504429
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022