前言

我们在平台写的文章到哪里去了？其实存在于服务器上。前端要看到内容就需要向后端发送请求，通过ajax进行访问。在以前，前端被称作是切图仔，但ajax的存在给了前端改变的可能，他构建了前后端的桥梁，我们可以借助这个桥梁向后端发送请求，这个请求叫做HTTP请求。在我们学习软件的过程中，数据结构，计算机组成原理的知识的相当重要的。

当我们搜索内容时，会往后端服务器发送一个请求。请求是通过什么传播的？以前是信号塔，现在是光纤，信号在光纤的信号管里传输，基本以毫秒级的速度传播。我们输入的数据会以二进制的数据包把他转换成电磁波进行了传输。这就是HTTP请求。比如我们在浏览百度页面时，百度的服务器接收到请求后会解析并且返回你需要的数据。以数据报文的形式返回给你。那么前端怎么发送请求将是我们今天要学习的内容

HTTP状态码

首先我们要知道什么是http状态码，作为腾讯的常考题，前后端交互的约定熟成，在请求数据时我们可以轻松通过返回的状态码来判断是什么地方出现了问题。在日后的职场工作时，前后端工程师也通常通过返回的状态码判断是前端还是后端出现了问题

HTTP状态码分类

HTTP状态码的分类主要包括：

• 1xx（信息性状态码） ：表示接收到请求，继续处理。
• 2xx（成功状态码） ：表示请求已成功被服务器接收、理解、并接受。
• 3xx（重定向状态码） ：表示需要客户端采取进一步的操作才能完成请求。
• 4xx（客户端错误状态码） ：表示请求包含语法错误或无法完成请求。
• 5xx（服务器错误状态码） ：表示服务器在处理请求的过程中遇到了错误。

常见状态码及其含义

1xx（信息性状态码）

• 100 Continue：客户端应继续发送请求。这个状态码表示服务器已经接收到请求的头部，并且客户端应继续发送请求的主体部分。
• 101 Switching Protocols：服务器已经理解并接受了客户端的请求，将通过协议升级的方式切换到新的协议。

2xx（成功状态码）

• 200 OK：请求成功。服务器已成功处理了请求，并返回了请求的资源。
• 201 Created：请求已成功并创建了新的资源。
• 204 No Content：请求成功，但服务器没有返回任何内容。

3xx（重定向状态码）

• 301 Moved Permanently：资源的URL已永久更改，需要更新链接。
• 302 Found：资源的URL临时性更改。
• 304 Not Modified：客户端发送的请求资源在服务器上没有修改，可以直接使用本地缓存的副本。

4xx（客户端错误状态码）

• 400 Bad Request：服务器无法理解请求的语法。
• 401 Unauthorized：客户端需要进行身份验证才能获取请求的资源。
• 403 Forbidden：服务器拒绝了客户端的请求，通常因为客户端没有访问特定资源的权限。
• 404 Not Found：请求的资源不存在。

5xx（服务器错误状态码）

• 500 Internal Server Error：服务器在处理请求时发生了未知的内部错误。
• 502 Bad Gateway：服务器作为网关或代理，从上游服务器接收到无效的响应。
• 503 Service Unavailable：服务器暂时无法处理请求，通常是由于服务器过载或维护。

一，通过XMLHttpRequest()请求数据

XMLHttpRequest() 是一个在 Web 开发中广泛使用的 JavaScript 对象，用于在浏览器与服务器之间交换数据。这个对象允许网页在不影响当前页面显示或用户交互的情况下，向服务器发送请求，并接收响应。它支持异步通信，这意味着浏览器可以在等待服务器响应的同时继续执行其他任务。

基本准备

我们首先需要设置一个按钮为这个按钮添加点击事件

<button id="btn">发送请求，获取数据</button>

之后我们需要监听这个点击事件,当点击事件触发时执行发送请求和监听请求最终拿到数据的操作

 let btn = document.getElementById('btn')
  btn.addEventListener('click', () => { .... })

发送请求

在XMLHttpRequest()中，内置了open()和send()方法。

• 配置请求： 通过调用 open() 方法来配置请求。这个方法接受三个必需的参数：请求方法（如 GET、POST）、请求的 URL 以及是否异步处理这个请求（默认为 true）。

• 发送请求： 配置好请求后，调用 send() 方法来发送请求。对于 GET 请求，通常不需要传递数据给 send() 方法（或者可以传递 null）。对于 POST 请求，可以传递需要发送的数据。

所以为了发送请求我们首先需要创建好XMLHttpRequest()的实例，在用他原型上的一些方法。

 let xhr = new XMLHttpRequest(); //创建一个ajax实例   //配置发送的参数，
            xhr.open('GET', 'http请求地址', true)
            xhr.send();//发射这个请求

这里的http请求地址在已经为大家准备好了： mock.mengxuegu.com/mock/65a915…

大家打开后台，在浏览器的网络中可以判断自己是否成功发送请求拿到列表

此处的 movieList 就是我为大家准备的列表

监听请求，获取后端返回的数据

在请求发送出去后后端将会给我们返回我们请求的数据，在这时我们需要监听返回的数据是否正确，判断数据的状态，打印出获取到的数据。我们可以通过onreadystatechange监听 ajax的状态码————readyState 和 http状态码status去判断请求到的数据的状态

onreadystatechange是 JavaScript 中用于处理 XMLHttpRequest 对象状态变化的一个事件处理器，通过监听 onreadystatechange 事件，我们可以在请求的不同阶段执行相应的操作。

ajax的状态码————readyState

• 0 -- xhr刚被创建
• 1 -- open执行的时候，配置生效
• 2 -- 请求发送出去，响应头被接收
• 3 -- 响应体正在解析
• 4 -- 解析完成

  xhr.onreadystatechange = () => {//监听请求的过程

    if (xhr.readyState == 4 && xhr.status == 200) {//拿到了后端返回的数据
                    console.log(readyState);//得到状态码
                }
            }

请求成功后得到的数据：

实例化我们请求到的数据

在请求数据成功后我们需要将我们请求到的数据转化为实例，导入我们的列表中。但是后端返回的数据往往是杂乱无章的JSON格式，我们首先需要将一个JSON格式的字符串转换成JavaScript对象

JSON.parse()

JSON.parse(xhr.responseText) 将这个杂乱无章的字符串转化为对象。

实例化

实例化你需要导入的列表，将拿到的数据中的movieList赋值给实例movieList，之后循环遍历movieList，将你需要实例化的部分创建出来。

主要步骤：

• 拿到ul的dom结构，准备为ul中循环添加新的li
• 将你拿到的JSON数据对象化，实例化这个对象，便于后续操作
• 循环遍历实例化的对象，通过 document.createElement('li')创造新的li列表
• 选择你需要在页面上展示的文本。在这里我选择的是 movieList[i].nm + '--' + movieList[i].star，即在众多的movieList列表中的每一个对象 [i] 中的电影名称nm和演员名称star

    // 获取ul的DOM结构
  let ul = document.getElementById('list');
    // 将后端返回的数据转化为对象形式，并实例化
  const movieList = JSON.parse(xhr.responseText).movieList;
     // 循环遍历返回的实例化数据
     for (let i = 0; i < movieList.length; i++) {
         // 创造li
         let li = document.createElement('li');
         // 创造可输入文本，将内容放进li文本中
         li.innerText = movieList[i].nm + '--' + movieList[i].star;
         // 将li显示在页面上
         document.getElementById('list').appendChild(li);
   }

最终获取到的数据显示在文本中的效果如下：

二，jQuery

jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。他使得Ajax交互对于网页开发变得更加简单，但是现在基本已经被废弃，这里我们做一个基本的了解即可。

对于传统请求来说他只有短短的三步：

        btn.addEventListener("click", () => {
            $.ajax({
                url:'http请求地址',
                method: 'GET', // 获取方式
                success: function (res) {
                    console.log(res)    // 检查，成功获取到了数据
                }
            })
        })

他还允许前端向后端传递参数，将我们需要传递的参数放进$.ajax中，用 data 包裹。后端会根据你传递的参数返回对应的参数详情

           // 向后端传数据，将参数传给后端
                data: {
                    username: '绵绵冰',
                    age: 18,
                },

当点击事件触发时查看我们向后端传递的参数

三，fetch

fetch是一个现代、基于Promise的API，用于网络请求。他允许我们使用更简便的.then(()=>{})的方式发送接口请求。

• 通过fetch直接向http地址请求数据，还直接在http地址后接 ?+你想向后端传入的参数 。
• 通过.then((res)=>{}) 可以拿到一个响应体，但是我们需要将这个响应体json化，再传入data，data会处理这些数据，最后通过 console.log(data);返回我们需要的对象格式。

 btn.addEventListener('click', () => {
           fetch("http请求地址?username='绵绵冰'&age=18")
            
          .then((res) => {
          // console.log(res);//打印出来的是整个响应体
           return res.json()//格式化响应体
                })
          .then((data) => {
                    console.log(data);
                })
     })

总结

无论是jQuery还是fetch其实都是对通过XMLHttpRequest()请求数据的封装。在以后的学习中我们还会学习请求数据的其他方法，在使用这些简便方法时我们需要明白其中的基本原理，万变不离其宗，理解js的底层工作原理才能在一众切图仔中脱颖而出，拔筹大厂。