手把手教你简单搞懂Ajax的3种常用请求

前言：

在前端开发过程当中，我们时常需要用到数据渲染网页，为了接受与处理这些数据而诞生了ajax。

简单理解AJAX：是一种客户端与服务器进行网络通信技术，AJAX通常使用XMLHttpRequest 对象来发送请求和接收响应

创建接口地址

虽然网络上的接口地址满天飞，但确实不如我们自己手把手搭建一个属于我们自己的接口地址。

安装 json-server

首先我们需要在全局目录下安装json-server(需要提前装好node环境)

npm install -g json-server

创建 JSON 文件

在如今开发的过程当中一般使用JSON格式来进行数据的传输，因此我们需要提前准备一个json文件。

如下所示我创建了一个json格式的文件，注意使用""将键名包裹起来。

{
  "users": [
    {
      "id": "1",
      "name": "张三"
    },
    {
      "id": "2",
      "name": "李四"
    },
    {
      "id": "3",
      "name": "王五"
    }
  ]
}

启动接口地址

首先不要忘记将我们写好的json文件进行保存！

在该文件的同级父文件下打开终端输入如下：

json-server --watch db.json --port 3001

这样我们就在3001端口处打开了接口，注意不要将终端关闭！

发送Ajax请求

方法一：XMLHttpRequest

创建 XHR 对象：

在大多数现代浏览器中，可以使用以下方式创建一个XMLHttpRequest对象：

javascript 代码解读复制代码

     let xhr = new XMLHttpRequest();

打开连接（open方法）：

需要指定请求方法（如GET、POST等）和请求的 URL。在这里就能用上我们在前面创建好的端口地址啦，例如：

     xhr.open('GET', 'http://localhost:3001/users', true);

这里的open方法有三个参数。第一个参数是请求方法，GET用于获取数据；第二个参数是请求的目标 URL；第三个参数是一个布尔值，表示是否异步执行请求，true为异步，这是最常用的方式，因为它允许浏览器在等待服务器响应的同时继续执行其他任务。

发送请求（send方法）：

对于GET请求，通常可以直接调用send方法而不需要传递参数，因为查询参数已经在URL中（如果有的话）。例如：

     xhr.send();

具体代码如下所示：

const xhr = new XMLHttpRequest()
    //设置请求方式与地址
    xhr.open('GET', 'http://localhost:3001/users', true)
    //发送请求
    xhr.send()
    //实时监测请求的每个阶段
    xhr.onreadystatechange = () => {
      //判断请求是否完成
      if (xhr.readyState === 4 && xhr.status === 200) {
        //获取响应数据
        console.log(JSON.parse(xhr.response));
      }
    }

方法二：fetch

fetch("http://localhost:3001/users")
      .then(response => response.json())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));

首先，fetch函数接受一个URL作为参数，这个URL就是请求的目标地址。它返回一个Promise，当请求成功发起后，这个Promise会被resolve，并将响应对象（response）传递给第一个then方法中的回调函数。

在第一个then方法中，response.json()也是一个异步操作，它用于将响应体（通常是JSON格式的数据）解析为 JavaScript 对象或数组，这个操作会返回一个新的Promise。当解析成功后，解析后的结果会被传递给第二个then方法中的回调函数，这里就是将数据打印到控制台（console.log(data)）。

如果在fetch请求的任何阶段出现错误，例如网络问题或者服务器返回错误状态码（如 404、500 等），Promise会被reject，并将错误信息传递给catch方法中的回调函数进行处理。

方法三：axios

注意，由于axios是封装了XMLHttpRequest的方法，使得代码更加简洁有效，因此需要调用axios的官网资源，所以不要忘记导入src。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://localhost:3001/users'
    })
      .then((res) => {
        console.log(res.data);
      })

总结：

语法风格与使用便捷性

XMLHttpRequest：

-   语法较为复杂。它是比较传统的 API，需要手动设置许多细节。例如，要发送一个`GET`请求，需要先创建`XHR`对象，然后使用`open`方法来设置请求方法和`URL`，再通过`send`方法发送请求。并且，处理请求状态变化时，需要监听`readystatechange`事件或者`load`事件来获取响应数据。

fetch：

语法简洁明了，基于Promise。发起请求的方式很直观，如fetch('https://example.com/api').then(response => response.json()).then(data => console.log(data))。它将请求和响应处理都通过Promise链的方式串联起来，使得代码结构更清晰，符合现代 JavaScript 的异步编程风格。

axios：

语法也比较简洁，同样基于Promise。它提供了简洁的请求方法，如axios.get('https://example.com/api').then(response => console.log(response.data))。并且，Axios 对请求和响应的处理更加智能，例如自动将 JSON 数据解析并存储在response.data中，方便开发者获取。

跨域处理

XMLHttpRequest：

受浏览器的同源策略限制。如果要进行跨域请求，需要服务器端配置跨域资源共享（CORS）。它本身没有提供太多跨域相关的额外功能，只是遵循浏览器的安全策略来执行请求。

fetch：

同样受同源策略限制。在跨域请求时，也需要服务器配置 CORS 支持。不过，fetch提供了credentials属性来控制是否发送cookies等凭证信息，这在处理跨域认证等场景时比较有用，如fetch('https://example.com/api', {credentials: 'include'})。

axios：

遵循浏览器的同源策略。在跨域方面，它可以方便地与后端的 CORS 配置协同工作。而且 Axios 在一些复杂的跨域场景下可能更容易配置和管理，因为它的请求拦截器等功能可以用于添加自定义的跨域相关头信息等操作。

响应处理

XMLHttpRequest：

响应数据存储在responseText（文本数据）或者responseXML（XML 数据）等属性中。需要手动进行 JSON 解析等操作来处理数据。并且，在处理请求状态方面，通过readyState属性来判断请求的不同阶段，比较繁琐。

fetch：

响应对象提供了多种方法来处理不同类型的数据，如response.json()用于处理 JSON 数据，response.text()用于处理文本数据，response.blob()用于处理二进制数据。它把数据处理的操作明确地放在Promise链中，需要开发者自己合理安排处理步骤。

axios：

对响应数据的处理更加友好。它自动将 JSON 数据解析并存储在response.data中，对于其他类型的数据也提供了方便的获取方式。并且，Axios 的响应对象还包含了状态码（response.status）等更多有用信息，方便开发者进行全面的响应判断。

作者：Kousi

链接：https://juejin.cn

+友情链接