前言

之前在参加蓝桥杯的时候，有一道题目需要使用原生的Ajax来发送请求，但是由于我们经常在项目中使用的都是axios或者第三库进行请求数据，导致原生请求数据的方式忘记了，今天来复习一下如何原生的发送Ajax请求

前端会造成发送请求的方式

• 首先就是img的src可以发送请求，打开浏览器的时候，打开控制台网络部分就能看到img发送的请求
• a标签的href，script中的src以及link的href这些
• ajax发送请求

当然我们今天学习的就是通过原生ajax发送请求

重新认识一下AJAX🏊‍♀🏊‍♀

学习到现在在，发现很多东西都是空中楼阁，在写项目的时候我们习惯上去使用各种第三方的库，当然在开发项目的时候这样做并没有错，但是我认为虽然我们实际写项目的时候不会直接的使用Ajax，但是我们还是要巩固一下基础，最起码如果面试官问起来，我们能答出来一部分，那么接下来我就来重新的认识一下Ajax

简介：

AJAX英文全称 Asynchronous Javascript And XML（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互，主要用在前端像服务端请求数据。

注意点：

• 它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据
• AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
• AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后端交互）;
• AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。

进行Ajax请求数据的步骤🌱🌱

• 首先我们要创建XMLHttpRequest的实例对象

  const xhr = new XMLHttpRequest();
   console.log(xhr.readyState);// 初始的时候这个值是0

• 接着我们需要监听XMLHttpRequest对象状态的变化

使用onreadystatechange方法来进行监听

 xhr.onreadystatechange = function () {
      if (xhr.readyState == XMLHttpRequest.DONE&&xhr.status) {
        console.log(xhr.response);
      }
    };

• 然后我们就需要配置网络请求

配置我们请求的方式以及请求的路径

  xhr.open("get", "./data.json");
    console.log(xhr.readyState); //此时的值就为1

• 在请求前在进行一个配置，是后端返回的数据转成json格式

 // 希望后端返回的是json数据，不做这个配置后端会返回字符串
    xhr.responseType = "json";

这个配置也比较重要，因为很容易被漏掉，这样就导致返回的数据是一个字符串，得不到我们想要的结果。

• 最后我们就差临门一脚了，进行网络请求

    xhr.send();

这里需要注意一下，因为我们进行的是get请求，所以我们不需要传递请求体，如果进行的是post请求的话，那么从如果需要传递参数的话，我们还需要传递一个请求体，这里直接请求即可。

完成过以上步骤我们就成功地进行了Ajax请求

我就对一些点进行一下讲解

首先是XMLHttpRequest.readyState这个一共有0，1，2，3，4这个5个值

• 0: UNSENT（未打开） - XMLHttpRequest对象已被创建，但尚未调用open()方法。
• 1: OPENED（已打开） - open()方法已被调用。在这个状态下，可以使用setRequestHeader()方法设置请求头，也可以通过send()方法发送请求。
• 2: HEADERS_RECEIVED（已接收响应头） - send()方法已被调用，并且响应头已经被接收到。在这个状态下，可以通过getResponseHeader()方法获取特定的响应头信息。
• 3: LOADING（正在接收响应体） - 响应体正在下载中。在这个状态下，可以通过responseText或responseXML属性获取部分响应数据。
• 4: DONE（完成） - 响应体已经完全接收。在这个状态下，可以通过responseText或responseXML属性获取完整的响应数据。

虽然这里看着非常的多，但是我们在一般情况下其实不用使用这么多。只用指导在调用open方法之前readyState的值为0，调用之后之就变成了1，在值为4的时候这个时候表明响应体已经完全的接收。

而这个xhr.status属性用于获取最后一次请求的HTTP状态代码。

• 需要注意的是，在发送请求之后，需要等待服务器响应完成，xhr.status才会被设置为具体的值。 可以通过监视xhr对象的readystatechange事件来获取xhr.status的值。

最后我们可以通过xhr.response来获取返回的值

测试请求

  <button onclick="handleClick()">点击进行请求数据</button> 
function handleClick() {
    const xhr = new XMLHttpRequest();
    // 初始的时候这个值是0
    console.log("初始的时候", xhr.readyState);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        console.log(xhr.response);
        console.log("获取到数据之后", xhr.readyState);
      }
    };
    // 希望后端返回的是json数据，不做这个配置后端会返回字符串
    xhr.responseType = "json";
    xhr.open("get", "./data.json");
    console.log("进行完open之后", xhr.readyState); //此时的值就为1
    xhr.send();
  }

这里简单的进行了一个数据的请求操作，并且记录了在点击按钮请求之后xhr中的readyState的变化，这就验证了上面所说的，我们可以查看控制台的打印顺序，也可以查看对应的事件处理的各个时间段所对应的值

通过控制台的打印值的先后就可以一目了然的查看到各个阶段的对应值。更加醒目和清晰

总结🚀🚀

经过这次蓝桥杯考试，我才明白基础是有多么的重要，所以，在我们使用各种库去开发的同时吗，不要忽略去掌握最基础的原理，从根本上去理解问题才是最重要的。