前端_网页编程 Ajax加强

蔚落 2022-11-29 05:43 226阅读 0赞

### 目录 ###

*  内容
 *  一、XMLHttpRequest的基本使用
 *   *  1. 什么是XMLHttpRequest
     *  2. 使用xhr发起GET请求
     *  3. xhr对象的readyState属性
     *  4. 使用xhr发起带参数的GET请求
     *  5. 查询字符串
     *   *  5.1 什么是查询字符串
         *  5.2 get请求携带参数的本质
     *  6. URL编码与解码
     *   *  6.1 什么是URL编码
         *  6.2 如何对URL进行编码与解码
         *  6.3 URL编码的注意事项
     *  7. 使用xhr发起post请求
 *  二、数据交换格式
 *   *  1. 什么是数据交换格式
     *  2.XML
     *   *  2.1 什么是XML
         *  2.2 XML和HTML的区别
         *  2.3 XML的缺点
     *  3. JOSN
     *   *  3.1 什么是JOSN
         *  3.2 JSON的两种结构
         *  3.3 JOSN语法注意事项
         *  3.4 JSON和JS的关系
         *  3.5 JSON和JS的互转
         *  3.6 序列化和反序列化
         *  3.7 JSON.parse的应用
 *  三. 封装自己的Ajax函数
 *   *  1.要实现的效果
     *  2. 定义options参数选项
     *  3.处理data参数
     *  4. 定义itheima()函数
     *  5. 判断请求的类型
 *  四. XMLHttpRequest Level2的新特性
 *   *  1. 认识XMLHttpRequest Level2
     *   *  1.1 旧版XMLHttpRequest的缺点
         *  1.2 XMLHttpRequest Level2的新功能
     *  2. 设置HTTP请求时限
     *  3. FormData对象管理表单数据
     *  4. 上传文件
     *   *  4.1 定义UI结构
         *  4.2 验证是否选择文件
         *  4.3 向FormData中追加文件
         *  4.4 使用 xhr 发起上传文件的请求
         *  4.5 监听onreadystatechange事件
     *  5 显示文件上传进度
     *   *  5.1 导入需要的库
         *  5.2 基于Bootstrap渲染进度条
         *  5.3 监听上传进度的事件
         *  5.4 监听上传完成的事件
 *  五. jQuery高级用法
 *   *  1. jQuery实现文件上传
     *   *  1.1 定义UI结构
         *  1.2 验证是否选择文件
         *  1.3 向FormData中追加文件
         *  1.4 上传文件
     *  2. jQuery实现loading效果
     *   *  2.1 ajaxStart(callback)
         *  2.2 ajaxStop(callback)
         *  2.3 案例-计算文件上传进度
 *  六. axios
 *   *  1. 什么是axios
     *  2. axios发起GET请求
     *  3. axios发起POST请求
     *  4. 直接使用axios发起请求
     *   *  4.1 直接使用axios发起GET请求
         *  4.2 直接使用axios发起POST请求

--------------------

# 内容 #

*  `XMLHttpRequest`的基本使用；
 *  数据交换格式；
 *  封装自己的`Ajax`函数；
 *  `XMLHttpRequest Level2`的新特性；
 *  `jQuery`高级用法；
 *  `axios`；

--------------------

提示：以下是本篇文章正文内容，下面案例可供参考

# 一、XMLHttpRequest的基本使用 #

## 1. 什么是XMLHttpRequest ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]  
**思考**：能否直接使用`xhr`对象发起`Ajax`请求？

## 2. 使用xhr发起GET请求 ##

**步骤：**

1.  创建 `xhr` 对象；
2.  调用 `xhr.open()` 函数（创建请求）；
3.  调用 `xhr.send()` 函数（发起`Ajax`请求）；
4.  监听 `xhr.onreadystatechange` 事件（拿到服务器响应回来的数据）。

代码示例：

> `if(xhr.readyState === 4 && xhr.status === 200)` ：判断条件的固定写法，要记住。如果条件成立，表示数据获取成功。  
> **注意**：判断条件里的`status`和响应回来的数据里的`status`属性并不是同一个。

**注意区分：**

<table> 
 <thead> 
  <tr> 
   <th align="left">监听状态</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>readyState</code></td> 
   <td align="left">请求状态</td> 
  </tr> 
  <tr> 
   <td align="left"><code>status</code></td> 
   <td align="left">服务器响应状态</td> 
  </tr> 
 </tbody> 
</table>

## 3. xhr对象的readyState属性 ##

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

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

## 4. 使用xhr发起带参数的GET请求 ##

使用 **xhr 对象**发起带参数的 GET 请求时，只需在调用 `xhr.open` 期间，为 URL 地址指定参数即可：

// ...此处省略
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
    // ...省略

这种在 **URL** 地址后面拼接的参数，叫做查询字符串。

## 5. 查询字符串 ##

### 5.1 什么是查询字符串 ###

**定义**：**查询字符串**（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（`变量`）。

**格式**：将英文的 `?` 放在URL 的末尾，然后再加上 `参数＝值` ，想加上多个参数的话，使用 `&` 符号进行分隔。以此形式，可将想要发给服务器的数据添加到 URL 中。

**代码示例**：

// 不带参数的 URL 地址
    http://www.liulongbin.top:3006/api/getbooks
    // 带一个参数的 URL 地址
    http://www.liulongbin.top:3006/api/getbooks?id=1
    // 带两个参数的 URL 地址
    http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

### 5.2 get请求携带参数的本质 ###

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

$.get('url', { name: '张三疯', age: 20}, function() { })
    // 等价于
    $.get('url?name=zs&age=20', function() { })
    
    $.ajax({  method: 'GET', url: 'url', data: { name: '张三疯', age: 20}, success: function() { } })
    // 等价于
    $.ajax({  method: 'GET', url: 'url?name=zs&age=20', success: function() { } })

## 6. URL编码与解码 ##

### 6.1 什么是URL编码 ###

URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。

如果 URL 中需要包含中文这样的字符，则必须对中文字符进行**编码**（转义）。

**URL编码的原则**：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

URL编码原则的**通俗理解**：使用英文字符去表示非英文字符。

**代码示例**：

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
    // 经过 URL 编码之后，URL地址变成了如下格式：
    http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0

编码中，用3组“`%XX`” 来表示一个中文字符

### 6.2 如何对URL进行编码与解码 ###

浏览器提供了 URL 编码与解码的 API，分别是：

*  `encodeURI()` 编码的函数；
 *  `decodeURI()` 解码的函数。

**代码示例**：

encodeURI('菜鸟程序员')
    	// 输出字符串 %E8%8F%9C%E9%B8%9F%E7%A8%8B%E5%BA%8F%E5%91%98
    	decodeURI('%E8%8F%9C%E9%B8%9F')
    	// 输出字符串 菜鸟

### 6.3 URL编码的注意事项 ###

由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。

更多关于 URL 编码的知识，请参考如下博客：  
[https://blog.csdn.net/Lxd\_0111/article/details/78028889][https_blog.csdn.net_Lxd_0111_article_details_78028889]

## 7. 使用xhr发起post请求 ##

步骤：

1.  创建 `xhr` 对象；
2.  调用 `xhr.open()` 函数；
3.  设置 `Content-Type` 属性（固定写法）；
4.  调用 `xhr.send()`函数，同时指定要发送的数据；
5.  监听 `xhr.onreadystatechange` 事件

**代码示例**：

// 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    
    // 2. 调用 open()
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    
    // 3. 设置 Content-Type 属性（固定写法）
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    
    // 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
    xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
    
    // 5. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function() { 
        if (xhr.readyState === 4 && xhr.status === 200) { 
            console.log(xhr.responseText)
        }
    }

# 二、数据交换格式 #

## 1. 什么是数据交换格式 ##

**数据交换格式**，就是 服务器端 与 客户端 之间进行数据传输与交换的格式。

前端领域，经常提及的**两种**数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少，**重点**学习的数据交换格式就是 JSON。

![在这里插入图片描述][20200819153442595.png_pic_center]

## 2.XML ##

### 2.1 什么是XML ###

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

### 2.2 XML和HTML的区别 ###

XML 和 HTML 虽然都是*标记语言*，但是，它们两者之间没有任何的关系。

*  HTML 被设计用来描述网页上的**内容**，是网页内容的载体；
 *  XML 被设计用来**传输和存储数据**，是数据的载体。

![在这里插入图片描述][20200819154228510.png_pic_center]

### 2.3 XML的缺点 ###

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

代码如下（示例）：

<note>
        <to>Jack</to>
        <from>David</from>
        <heading>通知</heading>
        <body>晚上KTV</body>
    </note>

## 3. JOSN ##

### 3.1 什么是JOSN ###

**概念**：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，**JSON 的本质是字符串**。

**作用**：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML *更小、更快、更易解析*。

**现状**：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了**主流**的数据交换格式。

### 3.2 JSON的两种结构 ###

`JSON` 就是用字符串来表示 `Javascript` 的 **对象** 和 **数组**。所以，JSON 中包含对象和数组两种结构，通过这两种结构的 **相互嵌套**，可以表示各种复杂的数据结构。

**对象结构**：对象结构在 JSON 中表示为 \{ \} 括起来的内容。数据结构为 \{ key: value, key: value, … \} 的键值对结构。其中，key 必须使用英文的**双引号**包裹字符串，value 的数据类型**必须**是数字、字符串、布尔值、null、数组、对象6种类型。

**数组结构**：数组结构在 JSON 中表示为 \[ \] 括起来的内容。数据结构为 \[ “java”, “javascript”, 30, true … \] 。数组中数据的类型**必须**是数字、字符串、布尔值、null、数组、对象6种类型。

**代码示例**：

[ "java", "python", "php" ]
    [ 100, 200, 300.5 ]
    [ true, false, null ]
    [ {  "name": "Jack", "age": 20}, {  "name": "David", "age": 30} ]
    [ [ "苹果", "香蕉", "桔子" ], [ 4, 50, 5 ] ]

### 3.3 JOSN语法注意事项 ###

*  属性名必须使用双引号包裹；
 *  字符串类型的值必须使用双引号包裹；
 *  JSON 中不允许使用单引号表示字符串；
 *  JSON 中不能写注释；
 *  JSON 的最外层必须是对象或数组格式；
 *  不能使用 `undefined` 或函数作为 JSON 的值。

JSON 的作用：在计算机与网络之间存储和传输数据。  
JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

### 3.4 JSON和JS的关系 ###

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

//这是对象
    var obj = { a: 'Hello', b: 'World'}
    
    //这是 JSON 字符串，本质是一个字符串
    var json = '{"a": "Hello", "b": "World"}'

### 3.5 JSON和JS的互转 ###

JSON 字符串 转 JS 对象，用 `JSON.parse()` 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}')
    //结果是 {a: 'Hello', b: 'World'}

JS 对象 转 JSON 字符串，用 `JSON.stringify()` 方法：

var json = JSON.stringify({ a: 'Hello', b: 'World'})
    //结果是 '{"a": "Hello", "b": "World"}'

### 3.6 序列化和反序列化 ###

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

### 3.7 JSON.parse的应用 ###

示例代码：

`xhr.responseText`得到的结果是JSON格式的字符串，并且用`typyof`检查，也确实是字符串格式。如图：

![在这里插入图片描述][20200820233339378.png_pic_center]  
因为字符串不便于操作，就这需要用到`JOSN.parse()`将这个结果转换为对象再进行操作。

// 将字符串转换为对象
    var result=JSON.parse(xhr.responseText);
    console.log(result);

转换成了对象：  
![在这里插入图片描述][20200820234024621.png_pic_left]

# 三. 封装自己的Ajax函数 #

## 1.要实现的效果 ##

<script src="./itheima.js"></script>
    <script>
        // 2. 调用自定义的 itheima 函数，发起 Ajax 数据请求
        itheima({ 
            method: '请求类型',
            url: '请求地址',
            data: {  /* 请求参数对象 */ },
            success: function(res) {  // 成功的回调函数
                console.log(res)     // 打印数据
            }
        })
    </script>

## 2. 定义options参数选项 ##

`itheima()` 函数是自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>method</code></td> 
   <td align="left">请求的类型</td> 
  </tr> 
  <tr> 
   <td align="left"><code>url</code></td> 
   <td align="left">请求的 URL 地址</td> 
  </tr> 
  <tr> 
   <td align="left"><code>data</code></td> 
   <td align="left">请求携带的数据</td> 
  </tr> 
  <tr> 
   <td align="left"><code>success</code></td> 
   <td align="left">请求成功之后的回调函数</td> 
  </tr> 
 </tbody> 
</table>

## 3.处理data参数 ##

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

/** * 处理 data 参数 * @param {data} 需要发送到服务器的数据 * @returns {string} 返回拼接好的查询字符串 name=zs&age=10 */
    function resolveData(data) { 
      var arr = []
      for (var k in data) { 
        arr.push(k + '=' + data[k])
      }
      return arr.join('&')
    }

## 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 result = JSON.parse(xhr.responseText)
              options.success(result)
            }
          }
    }

**解释：**  
1） `resolveData(options.data)`：把外界传递过来的参数对象，转换为查询字符串  
2）`xhr.responseText`是服务器响应回来的数据，但它是一个`JSON`格式的字符串，我们需要用`JSON.parse()`函数将它转换为JS对象。再执行success回调函数（响应成功后的一些操作都在回调函数里）。

**注：**  
如果`POST`要提交参数，不是在`url`后面去拼接查询字符串，而是在`send()`期间去指定参数

## 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)
        }

根据`options.method`的类型（`get`或`post`），

*  如果是**GET**请求，就将要提交的参数直接放到`url`地址的后面，然后发起请求`xhr.send()`；
 *  如果是**POST**请求，就将用户提交的参数在send期间发送到服务器。

> `toUpperCase()`：转换成大写

封装的Ajax `itheima`函数完整代码如下：

封装`itheima`函数的调用

控制台输出：  
![在这里插入图片描述][20200822001010344.png_pic_left]

# 四. XMLHttpRequest Level2的新特性 #

## 1. 认识XMLHttpRequest Level2 ##

### 1.1 旧版XMLHttpRequest的缺点 ###

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

### 1.2 XMLHttpRequest Level2的新功能 ###

*  可以设置 `HTTP` 请求的时限；
 *  提供新的 **js** 对象 `FormData` 管理表单数据（旧版只能使用`form`标签）；
 *  可以上传文件；
 *  可以获得数据传输的进度信息；

## 2. 设置HTTP请求时限 ##

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

**代码示例**：

// 设置超时时间
    xhr.timeout = 3000;
    // 超时后的处理函数
    xhr.ontimeout = function() { 
    	console.log('请求超时！');
    }

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

本案例完整代码：

<!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>
        <script> var xhr = new XMLHttpRequest(); // 设置超时时间 xhr.timeout = 3000; // 超时后的处理函数 xhr.ontimeout = function() { console.log('请求超时！'); } xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks'); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // responseText获得字符串形式的的响应数据 console.log(xhr.responseText); } } </script>
    </body>
    
    </html>

1）`readyState` 属性返回一个 `XMLHttpRequest` 代表当前所处的状态（UNSENT、 OPENED、HEADERS\_RECEIVED、 LOADING、DONE）；  
2）`responseText`：获得字符串形式的的响应数据。也可以写作如下格式：

document.getElementById("myDiv").innerHTML=xhr.responseText;

## 3. FormData对象管理表单数据 ##

**主要功能**：

*  提交表单数据；
 *  获取网页表单的值。

Ajax 操作常用来提交表单数据。为了方便表单处理，HTML5 新增了 `FormData` 对象，可以模拟表单操作：

// 1. 新建 FormData 对象
          var fd = new FormData()
          
          // 2. 为 FormData 添加表单项
          fd.append('uname', 'zs')
          fd.append('upwd', '123456')
          
          // 3. 创建 XHR 对象
          var xhr = new XMLHttpRequest()
          
          // 4. 指定请求类型与URL地址
          xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
          
          // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
          xhr.send(fd)

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

// 获取网页表单元素
    var  form  =  document.querySelector('#form1')
    
    	// 监听表单元素的 submit 事件
    form.addEventListener('submit',  function(e)  { 
    	e.preventDefault()
    		// 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
    	var  fd  =  new  FormData(form)
    	var  xhr  =  new  XMLHttpRequest()
    	xhr.open('POST',  'http://www.liulongbin.top:3006/api/formdata')
    	xhr.send(fd)
    	xhr.onreadystatechange  =   function()  { }
    })

还可以在创建一个包含Form表单数据的FormData对象之后，并且在发送请求之前，附加额外的数据到FormData对象里。例如：

var formElement = document.querySelector("form");
    var formData = new FormData(formElement);
    var request = new XMLHttpRequest();
    request.open("POST", "submitform.php");
    formData.append("serialnumber", serialNumber++);
    request.send(formData);

这样就可以在发送请求之前，自由地附加不一定是用户编辑的字段到表单数据里。

**注意**：如果`FormData`对象是通过表单创建的，则表单中指定的请求方式会被应用到方法`open()`中 。

## 4. 上传文件 ##

新版 `XMLHttpRequest` 对象，不仅可以发送文本信息，还可以上传文件。

**实现步骤**：

1.  定义 UI 结构；
2.  验证是否选择了文件；
3.  向 `FormData` 中追加文件；
4.  使用 xhr 发起上传文件的请求；
5.  监听 `onreadystatechange` 事件

### 4.1 定义UI结构 ###

**代码示例**：

<input type="file" id="file1" />
        
    
        <button id="btnUpload">上传文件</button>
        <br />
        
        <img src="" alt="" id="img" width="800" />

### 4.2 验证是否选择文件 ###

**代码示例**：

// 1. 获取上传文件的按钮
     var btnUpload = document.querySelector('#btnUpload')
     // 2. 为按钮添加 click 事件监听
     btnUpload.addEventListener('click', function() { 
         // 3. 获取到选择的文件列表
         var files = document.querySelector('#file1').files
         if (files.length <= 0) { 
             return alert('请选择要上传的文件！')
         }
         // ...后面的业务逻辑
     })

### 4.3 向FormData中追加文件 ###

**代码示例**：

// 1. 创建 FormData 对象
     var fd = new FormData()
     
     // 2. 向 FormData 中追加文件
     fd.append('avatar', files[0])

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

**代码示例**：

// 1. 创建 xhr 对象
     var xhr = new XMLHttpRequest()
     // 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
     xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
     // 3. 发起请求
     xhr.send(fd)

上传文件必须用`POST`请求。

### 4.5 监听onreadystatechange事件 ###

**代码示例**：

xhr.onreadystatechange = function() { 
                    if (xhr.readyState == 4 && xhr.status === 200) { 
                        var data = JSON.parse(xhr.responseText);
                        if (data.status === 200) { 
                            // 上传成功
                            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                        } else { 
                            // 上传失败
                            alert('图片上传失败' + data.message);
                        }
                    }
    	 }

## 5 显示文件上传进度 ##

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

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

`Math.ceil` 是上取整。在`xhr.upload.onprogress` 事件中，事件对象有3个重要属性：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>e.lengthComputable</code></td> 
   <td align="left">布尔值，表示当前上传的资源是否具有可计算的长度</td> 
  </tr> 
  <tr> 
   <td align="left"><code>e.loaded</code></td> 
   <td align="left">已传输的字节</td> 
  </tr> 
  <tr> 
   <td align="left"><code>e.total</code></td> 
   <td align="left">需传输的总字节</td> 
  </tr> 
 </tbody> 
</table>

### 5.1 导入需要的库 ###

接下来，需要添加一个进度条，

1.  在bootsrap官网找到“组件”→“进度条”）(地址：[https://v3.bootcss.com/components/\#progress][https_v3.bootcss.com_components_progress])；  
    ![在这里插入图片描述][20200824000320110.png_pic_left]
2.  复制选中的进度条UI结构；

<div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        //<span class="sr-only">45% Complete</span>
        45%
      </div>
    </div>

上面进度条的UI结构里，要将45% 外面包裹的p标签删除(即只留下百分比)。

1.  导入jQuery

**代码示例**：

接下来，需要将计算出来的百分比`percentComplete = Math.ceil((e.loaded / e.total) * 100)`，设置到进度条上，此时就进行jQuery的DOM操作。

### 5.2 基于Bootstrap渲染进度条 ###

1）重置UI结构中的进度为 0%  
**代码示例**：

<div class="progress" style="width: 500px; margin: 10px 0;">   
        <div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">
            0%
        </div>
    </div>

### 5.3 监听上传进度的事件 ###

**代码示例**：

xhr.upload.onprogress  =   function(e)  { 
    	if  (e.lengthComputable)  { 
    		// 1. 计算出当前上传进度的百分比
    		var  percentComplete  =  Math.ceil((e.loaded  /  e.total)  *  100)
    		$('#percent')
    			// 2. 设置进度条的宽度
    			.attr('style',  'width:'  +  percentComplete  +  '%')
    			// 3. 显示当前的上传进度百分比
    			html(percentComplete  +  '%')
    	}
    }

### 5.4 监听上传完成的事件 ###

**代码示例**：

xhr.upload.onload  =   function()  { 
    	$('#percent')
    		// 移除上传中的类样式
    		removeClass()
    		// 添加上传完成的类样式
    		addClass('progress-bar progress-bar-success')
    }

# 五. jQuery高级用法 #

## 1. jQuery实现文件上传 ##

### 1.1 定义UI结构 ###

代码示例：

<input type="file" id="file1">
    
    <button id="btnUpload">上传</button>
    
    <img src="" alt="" id="img" width:300/>

### 1.2 验证是否选择文件 ###

引入js文件：

验证文件：

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

> **jQuery对象**后面跟上`[0]`，即可转换为**DOM对象**

### 1.3 向FormData中追加文件 ###

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

### 1.4 上传文件 ###

$.ajax({ 
         method: 'POST',
         url: 'http://www.liulongbin.top:3006/api/upload/avatar',
         data: fd,
         // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
         contentType: false,
         // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
         processData: false,
         success: function(res) { 
             console.log(res)
         }
     })

**注：** 上传文件必须用 ajax， 设置`contentType: false` 和 `processData: false`。

本案例完整代码：[网盘源码][Link 1]（提取码：7j6v）

## 2. jQuery实现loading效果 ##

### 2.1 ajaxStart(callback) ###

Ajax 请求**开始** 时，执行 `ajaxStart` 函数。可以在 ajaxStart 的 `callback` 中显示 `loading` 效果。

语法格式如下：

// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
    	$(document).ajaxStart(function()  { 
    		$('#loading').show()
    	})

**注意**：`$(document).ajaxStart()` 函数会监听当前文档内所有的 `Ajax` 请求。

### 2.2 ajaxStop(callback) ###

Ajax 请求**结束**时，执行 `ajaxStop` 函数。可以在 ajaxStop 的 `callback` 中隐藏 `loading` 效果。

语法格式如下：

// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
    	$(document).ajaxStop(function()  { 
    		$('#loading').hide()
    	})

### 2.3 案例-计算文件上传进度 ###

案例源码：[网盘下载][Link 2]（提取码: sxqf）

# 六. axios #

## 1. 什么是axios ##

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

## 2. axios发起GET请求 ##

axios发起**get**请求的语法：

axios.get('url', {  params: {  /*参数*/ } }).then(callback)

具体的**GET请求**示例如下：

// 请求的 URL 地址
    var url = 'http://www.liulongbin.top:3006/api/get'
    // 请求的参数对象
    var paramsObj = {  name: '张三疯', age: 180 }
    // 调用 axios.get() 发起 GET 请求
    axios.get(url, {  params: paramsObj }).then(function(res) { 
    	// res.data 是服务器返回的数据
    	var result = res.data
    	console.log(res)
    })

## 3. axios发起POST请求 ##

axios发起POST请求的语法：

axios.post('url', {  /*参数*/ }).then(callback)

具体的**POST请求**示例如下：

// 请求的 URL 地址
    var url = 'http://www.liulongbin.top:3006/api/post'
    // 要提交到服务器的数据
    var dataObj = {  location: '北京', address: '顺义' }
    // 调用 axios.post() 发起 POST 请求
    axios.post(url, dataObj).then(function(res) { 
    	// res.data 是服务器返回的数据
    	var result = res.data
    	console.log(result)
    })

## 4. 直接使用axios发起请求 ##

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

axios({ 
         method: '请求类型',
         url: '请求的URL地址',
         data: {  /* POST数据 */ },
         params: {  /* GET参数 */ }
     }) .then(callback)

### 4.1 直接使用axios发起GET请求 ###

axios({ 
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/get',
            params: {  // GET 参数要通过 params 属性提供
                name: 'zs',
                age: 20
            }
    	}).then(function(res) { 
    		console.log(res.data)
    	})

### 4.2 直接使用axios发起POST请求 ###

axios({ 
         method: 'POST',
         url: 'http://www.liulongbin.top:3006/api/post',
         data: {  // POST 数据要通过 data 属性提供
             bookname: 'JavaScript从入门到放弃',
             price: 168
         }
     }).then(function(res) { 
         console.log(res.data)
     })

--------------------

提示

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/0236b8a8060b419f93cea0f3bc47e382.png
[https_blog.csdn.net_Lxd_0111_article_details_78028889]: https://blog.csdn.net/Lxd_0111/article/details/78028889
[20200819153442595.png_pic_center]: /images/20221124/c8674b4fa9c04f2d8fb03a0b65d927e8.png
[20200819154228510.png_pic_center]: /images/20221124/63f66f04af824865b7d4e66493230499.png
[20200820233339378.png_pic_center]: /images/20221124/d850c71f92dd48239758e7f3770ae372.png
[20200820234024621.png_pic_left]: /images/20221124/79c3ba6671af4bc988b9689f27227ea0.png
[20200822001010344.png_pic_left]: /images/20221124/ecdd2396c610463f98f08e11e81c2b05.png
[https_v3.bootcss.com_components_progress]: https://v3.bootcss.com/components/#progress
[20200824000320110.png_pic_left]: /images/20221124/16508989369d4b4e93d11089a4acf5fd.png
[Link 1]: https://pan.baidu.com/s/1A_-Pu8QT2V0voPKJdmWmQw
[Link 2]: https://pan.baidu.com/s/1dQe8ZJcW4nbdPz3ESsUy4g