Ajax加强

别再心勭

已于 2023-06-15 19:41:09 修改

阅读量105

点赞数

文章标签： ajax javascript ecmascript

于 2023-06-12 20:03:26 首次发布

本文链接：https://blog.csdn.net/qiu221024/article/details/131175288

版权

一、XMLHttpRequest的基本使用

1.1什么 XMLHttpRequest

XMLHttpRequest(简称xhr）是浏览器提供的Javascript对象，通过它可以请求服务器上的数据资源。之前所学的jQuery 中的 Ajax函数，就是基于xhr对象封装出来的。

1.2使用xhr发起GET请求

步骤：
- 创建xhr对象
- 调用xhr.open()函数
- 调用xhr.send()函数
- 监听 xhr.onreadystatechange 事件
示例代码如下：

<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>
    <script>
      //1.创建xhr对象
      var xhr = new XMLHttpRequest()
      //2.调用open函数
      xhr.open('GET', 'https://ajax-base-api-t.itheima.net/api/getbooks')
      //3.调用send函数
      xhr.send()
      //4.监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          //获取服务器响应的数据
          console.log(xhr.responseText)
        }
      }
    </script>
  </body>
</html>

1.3了解xhr对象的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态。每个 Ajax请求必然处于以下状态中的一个:

值	状态	描述
0	UNSENT	XMLHttpRequest对象已被创建，但尚未调用open方法。
1	OPENED	open()方法已经被调用。
2	HEADERS_RECEIVED	send()方法已经被调用，响应头也已经被接收。
3	LOADING	数据接收中，此时response属性中已经包含部分数据。
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败。

1.4使用xhr发起带参数的GET请求

使用xhr对象发起带参数的GET请求，只需在调用xhr.open期间，为URL地址指定参数即可。
这种在URL地址后面拼接的参数，叫做查询字符串。
示例代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1.创建xhr对象
      var xhr = new XMLHttpRequest()
      //2.调用open函数
      xhr.open('GET', 'https://ajax-base-api-t.itheima.net/api/getbooks?id=1')
      //3.调用send函数
      xhr.send()
      //4.监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          //获取服务器响应的数据
          console.log(xhr.responseText)
        }
      }
    </script>
  </body>
</html>

1.5查询字符串

1.5.1 什么是查询字符串

定义：查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）
格式：将英文的 ? 放在URL的末尾，然后加上 参数=值 ，想加上多个参数的话，使用 & 符号进行分割，以这个形式，可以将想要发送给服务器的数据添加到URL中。

1.5.2 GET请求携带参数的本质

无论使用$.ajax()，还是使用$.get)，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的。
示例代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/jquery-3.7.0.js"></script>
  </head>
  <body>
    <script>
      $.get('https://ajax-base-api-t.itheima.net/api/getbooks', { id: 1, bookname: '西游记' }, function (res) {
        console.log(res)
      })

      
      $.ajax({
        method: 'GET',
        url: 'https://ajax-base-api-t.itheima.net/api/getbooks',
        data: {
          id: 1,
          bookname: '西游记'
        },
        success: function (res) {
          console.log(res)
        }
      })
    </script>
  </body>
</html>

1.6 URL编码与解码

1.6.1 什么是URL编码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。
如果URL中需要包含中文这样的字符，则必须对中文字符进行编码（转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
URL编码原则的通俗理解:使用英文字符去表示非英文字符。

1.6.2 如何对URL进行编码与解码

浏览器提供了URL编码与解码的API，分别是：
- encodeURI() 编码的函数
- decodeURI() 解码的函数
- 示例代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var str = '黑马程序员'
      //编码的函数
      var str2 = encodeURI(str)
      console.log(str2)
      //解码的函数
      var str3 = decodeURI('%E9%BB%91%E9%A9%AC')
      console.log(str3)
    </script>
  </body>
</html>

1.6.3 URL编码的注意事项

由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作。
更多关于URL编码的知识，请参考如下博客:
- https://blog.csdn.net/Lxd_0111/article/details/78028889

1.7 使用xhr发起POST请求

步骤：
- 创建xhr 对象
- 调用xhr.open)函数
- 设置Content-Type属性(固定写法)
- 调用xhr.send(函数,同时指定要发送的数据
- 监听xhr.onreadystatechange事件
- 示例代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1.创建xhr对象
      var xhr = new XMLHttpRequest()
      //2.调用open
      xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/addbook')
      //3.设置Content-Type属性(固定写法)
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      //4.调用send函数，同时将数据以查询字符串的形式，提交给服务器
      xhr.send('bookname=孙子兵法&author=高齐强&publisher=河北图书出版社')
      //5.监听xhr.onreadystatechange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText)
        }
      }
    </script>
  </body>
</html>

二、数据交换格式

2.1什么是数据交换格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域，经常提及的两种数据交换格式分别是 XML 和 JSON 。其中 XML用的非常少，所以，我们重点要学习的数据交换格式就是JSON。

2.2 XML

2.2.1 什么是XML

XML的英文全称是EXtensible Markup Language，即可扩展标记语言。因此，XML和HTML类似，也是一种标记语言。

2.2.2 XML和HTML的区别

XML和HTML虽然都是标记语言，但是，它们两者之间没有任何的关系。
HTML被设计用来描述网页上的内容，是网页内容的载体
XML被设计用来传输和存储数据,是数据的载体

2.2.3 XML的缺点

XML格式臃肿，和数据无关的代码多，体积大，传输效率低
在Javascript中解析XML比较麻烦

2.3 JSON

2.3.1 什么是JSON

概念:JSON的英文全称是JavaScript Object Notation，即“JavaScript对象表示法”。简单来讲，JSON就是Javascript对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，因此,JSON的本质是字符串。
作用:JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析。
现状:JSON是在2001年开始被推广和使用的数据格式，到现今为止，JSON已经成为了主流的数据交换格式。

2.3.2 JSON的两种结构

JSON就是用字符串来表示Javascript的对象和数组。所以，JSON中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
对象结构:对象结构在JSON中表示为{}括起来的内容。数据结构为{key.: value, key: valle,...}的键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
数组结构:数组结构在JSON中表示为[]括起来的内容。数据结构为[ "java", "javascript" ,30, true ...] .数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

2.3.3 JSON语法注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON的最外层必须是对象或数组格式
不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据。
JSON的本质:用字符串来表示Javascript对象数据或数组数据

2.3.4 JSON和JS对象的关系

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。
例如：

2.3.5 JSON和JS对象的互转

要实现从JSON字符串转换为JS对象，使用JSON.parse()方法

要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法

2.3.6 序列化和反序列化

把数据对象转换为字符串的过程，叫做序列化，例如:调用JSON.stringify()函数的操作，叫做JSON序列化。
把字符串转换为数据对象的过程，叫做反序列化，例如:调用JSON.parse()函数的操作，叫做JSON反序列化。

三、封装自己的Ajax函数

3.1要实现的效果

3.2 定义options参数选项

itheima()函数是我们自定义的Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性:
- method 请求的类型
- url 请求的URL地址
- data 请求携带的数据
- success 请求成功之后的回调函数

3.3 处理data函数

需要把 data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下:
代码如下：

function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }
  return arr.join('&')
}
var res = resolveData({ name: 'lyy', age: 19 })
console.log(res)

3.4 定义itheima函数

在itheima()函数中，需要创建xhr对象，并监听onreadystatechange事件：
代码如下：

function itheima(options){
  var xhr = new XMLHttpRequest()
  //把外界传递过来的参数对象，转换为查询字符串
  var qs = resolveData(options.data)
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
      var res = JSON.parse(xhr.responseText)
      options.sucess(res)
    }
  }
}

3.5判断请求的类型

不同的请求类型，对应xhr对象的不用操作，因此需要对请求类型进行if...else...的判断：
代码如下：

if (options.method.toUpperCase() === 'GET') {
    //发起GET请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    //发起POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

完整代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="./itheima.js"></script>
  <body>
    <script>
      // itheima({
      //   method: 'GET',
      //   url: 'https://ajax-base-api-t.itheima.net/api/getbooks',
      //   data: {
      //     id: 1
      //   },
      //   success: function (res) {
      //     console.log(res)
      //   }
      // })

      itheima({
        method: 'POST',
        url: 'https://ajax-base-api-t.itheima.net/api/addbook',
        data: {
          bookname: '日日日',
          author: '呀呀呀',
          publisher: '天天图书出版社'
        },
        success: function (res) {
          console.log(res)
        }
      })
    </script>
  </body>
</html>


function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }
  return arr.join('&')
}
// var res = resolveData({ name: 'lyy', age: 19 })
// console.log(res)

function itheima(options) {
  var xhr = new XMLHttpRequest()
  //把外界传递过来的参数对象，转换为查询字符串
  var qs = resolveData(options.data)

  if (options.method.toUpperCase() === 'GET') {
    //发起GET请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    //发起POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var res = JSON.parse(xhr.responseText)
      options.success(res)
    }
  }
}

四、XHMLHttpResquest Level2的新特性

4.1 认识 XHMLHttpResquest Level2

4.1.1 旧版 XHMLHttpResquest 的缺点

只支持文本数据的传输，无法用来读取喝上传文件
传送和接收数据时，没有进度信息，只能提示数据传输有没有完成

4.1.2 XHMLHttpResquest Level2 的新功能

可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

4.2 设置HTTP 请求时限

有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout 属性，可以设置HTTP请求的时限:

上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个timeout事件，用来指定回调函数:

示例代码如下:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var xhr = new XMLHttpRequest()
      //设置超时时限
      xhr.timeout = 3000
      //设置超时以后的处理函数
      xhr.ontimeout = function () {
        console.log('请求超时了')
      }
      xhr.open('GET', 'https://ajax-base-api-t.itheima.net/api/getbooks')
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText)
        }
      }
    </script>
  </body>
</html>

4.3 FormData对象管理表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象,可以模拟表单操作:
代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1.创建 FormData 实例
      var fd = new FormData()
      //2.调用append函数，向fd中追加数据
      fd.append('uname', 'zs')
      fd.append('upwd', '123456')
      //3.创建xhr对象
      var xhr = new XMLHttpRequest()
      //4.指定请求类型与URL地址
      xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/formdata')
      //5.直接提交FormData对象，这与提交网页表单的数据，完全一样
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    </script>
  </body>
</html>

FormData对象也可以用来获取网页表单的值，示例代码如下:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="form1">
      <input type="text" name="uname" autocapitalize="off" />
      <input type="password" name="upwd" />
      <button type="submit">提交</button>
    </form>
    <script>
      //1.通过DOM操作，获取到form表单元素
      var form = document.querySelector('#form1')
      form.addEventListener('submit', function (e) {
        //阻止表单的默认提交行为
        e.preventDefault()
        //创建FormData快速获取到form表单中的数据
        var fd = new FormData(form)
        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/formdata')
        xhr.send(fd)
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText))
          }
        }
      })
    </script>
  </body>
</html>

4.4 上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。
实现步骤
- 定义UI结构
- 验证是否选择了文件
- 向 FormData 中追加文件
- 使用 xhr 发起上传文件的请求
- 监听 onreadystatechange 事件

4.4.1 定义 UI 结构

<!-- 1.文件选择框 -->
<input type="file" id="file1" />
<!-- 2.上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3.img标签，显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />

4.4.2 验证是否选择了文件

 <script>
      //1.获取上传文件的按钮
      var btnUpload = document.querySelector('#btnUpload')
      //2.为按钮绑定单击事件处理函数
      btnUpload.addEventListener('click', function () {
        //3.获取到用户选择的文件列表
        var files = document.querySelector('#file1').files
        if (files.length <= 0) {
          return alert('请选择要上传的文件')
        }
        console.log('用户上传了待上传的文件')
      })
 </script>

4.4.3 向FormData中追加文件

//创建FormData对象
var fd = new FormData()
//将用户选择的文件，添加到FormData中
fd.append('avatar',files[0])

4.4.4 使用xhr发起上传文件的请求

 //创建xhr对象
 var xhr = new XMLHttpRequest()
 //调用open函数，指定请求类型与URL地址，其中，请求类型必须为POST
 xhr.open('POST','https://ajax-base-api-t.itheima.net/api/upload/avatar')
 //发起请求
 xhr.send(fd)

4.4.5 监听 onreadysatechange 事件

 //创建xhr对象
 var xhr = new XMLHttpRequest()
 //调用open函数，指定请求类型与URL地址，其中，请求类型必须为POST
 xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/upload/avatar')
 //发起请求
 xhr.send(fd)
 xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText)
   if (data.status === 200) {
      //上传成功
      document.querySelector('#img').src = 'https://ajax-base-api-t.itheima.net' + data.url
   } else {
      //上传失败
      console.log('图片上传失败' + data.message)
      }
     }
    }

完整代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签，显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />
    <script>
      //1.获取上传文件的按钮
      var btnUpload = document.querySelector('#btnUpload')
      //2.为按钮绑定单击事件处理函数
      btnUpload.addEventListener('click', function () {
        //3.获取到用户选择的文件列表
        var files = document.querySelector('#file1').files
        if (files.length <= 0) {
          return alert('请选择要上传的文件')
        }
        //创建FormData对象
        var fd = new FormData()
        //将用户选择的文件，添加到FormData中
        fd.append('avatar', files[0])
        //创建xhr对象
        var xhr = new XMLHttpRequest()
        //调用open函数，指定请求类型与URL地址，其中，请求类型必须为POST
        xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/upload/avatar')
        //发起请求
        xhr.send(fd)
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText)
            if (data.status === 200) {
              //上传成功
              document.querySelector('#img').src = 'https://ajax-base-api-t.itheima.net' + data.url
            } else {
              //上传失败
              console.log('图片上传失败' + data.message)
            }
          }
        }
      })
    </script>
  </body>
</html>

4.5 显示文件上传进度

新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。语法格式如下:
示例代码如下：

//创建xhr对象
  var xhr = new XMLHttpRequest()
  //监听文件上传的进度
  xhr.upload.onprogress = function (e) {
  //e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度
  if (e.lengthComputable) {
    //计算出上传的速度
    //e- loaded已传输的字节
    //e.total需传输的总字节
    var procentComplete = Math.ceil((e.loaded / e.total) * 100)
    console.log(procentComplete)
      }
  }

4.5.1 导入需要的库

4.5.2 绘制进度条

4.5.3 监听上传进度的事件

  xhr.upload.onprogress = function (e) {
          //e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度
          if (e.lengthComputable) {
            //计算出上传的速度
            //e- loaded已传输的字节
            //e.total需传输的总字节
            var procentComplete = Math.ceil((e.loaded / e.total) * 100)
            console.log(procentComplete)
            //动态设置进度条
            $('#percent')
              .attr('style', 'width:' + procentComplete + '%')
              .html(procentComplete + '%')
          }
        }

4.5.4 监听上传完成的事件

//监听上传成功之后的事件
xhr.upload.loaded = function () {
  //removeClass() 移除上传中的类样式 addClass() 添加上传完成的类样式
  $('#percent').removeClass().addClass('progress-bar progress-bar-success')
}

五、Jquery高级用法

5.1 jQuery实现文件上传

5.1.1 定义UI结构

<body>
    <input type="file" id="file1">
    <button id="btnUpload">上传文件</button>
  </body>

5.1.2 验证是否选择了文件

<script>
      $(function () {
        $('#btnUpload').on('click', function () {
          //将jQuery对象转化为DOM对象，并获取选中的文件列表
          var files = $('#file1')[0].files
          //判断是否选择了文件
          if (files.length <= 0) {
            return alert('请选择文件之后再上传')
          }
          console.log('ok')
        })
      })
</script>

5.1.3 向FormData中追加文件

 //向FormData中追加文件
 var fd = new FormData()
 fd.append('avatar',files[0])

5.1.4 使用jQuery发起上传文件的请求

 //发起jQuery的Ajax请求，上传文件
 $.ajax({
     method: 'POST',
     url: 'https://ajax-base-api-t.itheima.net/api/upload/avatar',
     data: fd,
     //不修改content-Type属性，使用FormData 默认的content-Type值
     processData: false,
     //不对FormData中的数据进行url 编码，而是将FormData数据原样发送到服务器
     contentType: false,
     success: function (res) {
         console.log(res)
    }
  })

5.2 jQuery实现loading效果

5.2.1 ajaxStart(callback)

Ajax请求开始时，执行 ajaxStart函数。可以在 ajaxStart的callback中显示loading效果。
注意: $(document).ajaxStart)函数会监听当前文档内所有的Ajax请求。
示例代码如下：

//监听到ajax请求被发起了
$(document).ajaxStart(function(){
   $('#loading').show()
})

5.2.2 ajaxStop(callback)

Ajax请求结束时，执行ajaxStop 函数。可以在ajaxStop 的callback中隐藏loading效果
示例代码如下：

 //监听到ajax完成的事件
 $(document).ajaxStop(function () {
    $('#loading').hide()
 })

六、axios

6.1 什么是axios

Axios是专注于网络数据请求的库。
相比于原生的XMLHttpRequest 对象，axios简单易用。
相比于jQuery,axios更加轻量化，只专注于网络数据请求。

6.2 axios发起GET请求

axios发起get请求的语法:

示例代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/axios.js"></script>
  </head>
  <body>
    <button id="btn1">发起GET请求</button>
    <script>
      document.querySelector('#btn1').addEventListener('click', function () {
        //请求的URL地址
        var url = 'https://ajax-base-api-t.itheima.net/api/get'
        //请求的参数对象
        var paramsObj = { name: 'lyy', age: 19 }
        //调用axios.get()发起GET请求
        axios.get(url, { params: paramsObj }).then(function (res) {
          //res.data是服务器返回的数据
          console.log(res.data)
        })
      })
    </script>
  </body>
</html>

6.3 axios发起POST请求

axios 发起post请求的语法:

示例代码如下：

document.querySelector('#btn2').addEventListener('click', function () {
  //请求的URL地址
  var url = 'https://ajax-base-api-t.itheima.net/api/post'
  //请求的参数对象
  var dataObj = { address: '河北', location: '邯郸市' }
  axios.post(url, dataObj).then(function (res) {
      console.log(res.data)
   })
})

6.4 直接使用axios发起请求

axios 也提供了类似于jQuery 中 $.ajax()的函数，语法如下:

6.4.1 直接使用axios发起GET请求

示例代码如下：

 document.querySelector('#btn3').addEventListener('click', function () {
    var url = 'https://ajax-base-api-t.itheima.net/api/get'
    var paramsData = { name: 'njx', age: 19 }
    axios({
       method: 'GET',
       url: 'url',
       params: paramsData
     }).then(function (res) {
          console.log(res.data)
    })
 })

6.4.2 直接使用axios发起POST请求

示例代码如下：

 document.querySelector('#btn4').addEventListener('click', function () {
        axios({
          method: 'POST',
          url: 'https://ajax-base-api-t.itheima.net/api/post',
          data: {
            name: 'xxx',
            age: 19,
            gender: '女'
          }
        }).then(function (res) {
          console.log(res.data)
        })
   })