前端网络请求：从 XMLHttpRequest 到 Axios

前端青山

于 2024-11-26 13:53:25 发布

阅读量988

点赞数 14

分类专栏： Vue.js入门到实战文章标签： vue.js javascript 前端 ajax http 网络前端框架

前端青山

本文链接：https://blog.csdn.net/2302_76329106/article/details/144057102

版权

🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Vue篇专栏内容:前端网络请求：从 XMLHttpRequest 到 Axios

前言

在网络应用中，前后端的数据交互是必不可少的一部分。本文将带你从最基本的 XMLHttpRequest 开始，逐步了解并掌握 jQuery、fetch 和 Axios 这几种常用的前端网络请求方式。每种方式都有其特点和适用场景，希望通过本文的介绍，你能找到最适合项目的解决方案。

1.1 XMLHttpRequest

浏览器对XMLHttpRequest对象的支持度不足, 创建 XMLHttpRequest 对象时需要对IE浏览器做的兼

容解决。 - ActiveXObject

回顾：XHR

readyState
0-4，0表示未初始化，4表示请求已完成
status（HTTP响应状态码）
- 200：OK，成功
- 3XX【重定向系列的状态码】
  - 301：永久重定向
  - 302：临时重定向
  - 307：内部浏览器（缓存）重定向
- 4XX【错误系列】
  - 400：bad request，错误请求
  - 401：鉴权失败
  - 403：禁止访问
  - 404：找不到对应的资源
  - 405：方法不被允许
- 5XX【服务器错误，环境问题】
  - 500：服务器内部错误（代码、环境问题）
  - 502：bad Getway，错误网关
使用XHR请求全国高校数据接口

接口地址
- https://api.i-lynn.cn/college
- 只循环展示 list 信息即可
- 接口可以直接被跨域请求
案例效果

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
<script>
  // 1.生成XHR对象
  var xhr = new XMLHttpRequest()
  // 2.绑定回调函数 
  xhr.onreadystatechange = function () {
    // 3. 判断是否成功 
    if (xhr.readyState === 4 && xhr.status === 200) {
      const list = JSON.parse(xhr.responseText).data
      console.log(list)
    }
  }
  // 4. 打开请求
  xhr.open('GET', 'https://api.i-lynn.cn/college')
  // 5.发送请求
  xhr.send()
</script>
</html>

1.2 jQuery

jQuery类的引入解决自己写兼容的烦恼，但现在只是使用了jQuery库中的网络请求功能，而jQuery中大量的dom的方法都是无效引入了，有点大材小用的意思。

$.ajax({ 
  url, 
  type:get/post, 
  data, 
  dataType:json/text/xml/html/jsonp 
  success:function(res){}, 
  error:function(){} 
})
$.get(url,data,callback,dataType) 
$.post(url,data,callback,dataType)