目錄

• 內容
• 一、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 對象封裝出來的。

思考：能否直接使用xhr對象發起Ajax請求？

2. 使用xhr發起GET請求

步驟：

創建 xhr 對象；

調用 xhr.open() 函數（創建請求）；

調用 xhr.send() 函數（發起Ajax請求）；

監聽 xhr.onreadystatechange 事件（拿到服務器響應回來的數據）。

代碼示例：

<script>// 1. 創建 XHR 對象var xhr = new XMLHttpRequest()// 2. 調用 open函數，指定 請求方式 與 URL地址xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')// 3. 調用 send 函數，發起 Ajax 請求xhr.send()// 4. 監聽 onreadystatechange 事件xhr.onreadystatechange = function() {// 4.1 監聽 xhr 對象的請求狀態 readyState ；與服務器響應的狀態 statusif (xhr.readyState === 4 && xhr.status === 200) {// 4.2 打印服務器響應回來的數據console.log(xhr.responseText)}}</script>

if(xhr.readyState === 4 && xhr.status === 200) ：判斷條件的固定寫法，要記住。如果條件成立，表示數據獲取成功。
注意：判斷條件里的status和響應回來的數據里的status屬性并不是同一個。

注意區分：

監聽狀態描述

readyState	請求狀態
status	服務器響應狀態

3. xhr對象的readyState屬性

XMLHttpRequest 對象的 readyState 屬性，用來表示當前 Ajax 請求所處的狀態。每個 Ajax 請求必然處于以下狀態中的一個：

值狀態描述

0	UNSENT	XMLHttpRequest 對象已被創建，但尚未調用 open方法。
1	OPENED	open()方法已經被調用
2	HEADERS_RECEIVED	send() 方法已經被調用，響應頭也已經被接收。
3	LOADING	數據接收中，此時 response 屬性中已經包含部分數據。
4	DONE	Ajax 請求完成，這意味著數據傳輸已經徹底完成或失敗。

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%98decodeURI('%E8%8F%9C%E9%B8%9F')// 輸出字符串 菜鳥

6.3 URL編碼的注意事項

由于瀏覽器會自動對 URL 地址進行編碼操作，因此，大多數情況下，程序員不需要關心 URL 地址的編碼與解碼操作。

更多關于 URL 編碼的知識，請參考如下博客：
https://blog.csdn.net/Lxd_0111/article/details/78028889

7. 使用xhr發起post請求

步驟：

創建 xhr 對象；

調用 xhr.open() 函數；

設置 Content-Type 屬性（固定寫法）；

調用 xhr.send()函數，同時指定要發送的數據；

監聽 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。

2.XML

2.1 什么是XML

XML 的英文全稱是 EXtensible Markup Language（即可擴展標記語言）。XML 和 HTML 類似，也是一種標記語言。

2.2 XML和HTML的區別

XML 和 HTML 雖然都是標記語言，但是，它們兩者之間沒有任何的關系。

• HTML 被設計用來描述網頁上的內容，是網頁內容的載體；
• XML 被設計用來傳輸和存儲數據，是數據的載體。

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的應用

示例代碼：

<script>var xhr = new XMLHttpRequest();xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText);console.log(typeof xhr.responseText);}}</script>

xhr.responseText得到的結果是JSON格式的字符串，并且用typyof檢查，也確實是字符串格式。如圖：

因為字符串不便于操作，就這需要用到JOSN.parse()將這個結果轉換為對象再進行操作。

// 將字符串轉換為對象 var result=JSON.parse(xhr.responseText); console.log(result);

轉換成了對象：

三. 封裝自己的Ajax函數

1.要實現的效果

<!-- 1. 導入自定義的ajax函數庫 --> <script src="./itheima.js"></script> <script>// 2. 調用自定義的 itheima 函數，發起 Ajax 數據請求itheima({method: '請求類型',url: '請求地址',data: { /* 請求參數對象 */ },success: function(res) { // 成功的回調函數console.log(res) // 打印數據}}) </script>

2. 定義options參數選項

itheima() 函數是自定義的 Ajax 函數，它接收一個配置對象作為參數，配置對象中可以配置如下屬性：

屬性描述

method	請求的類型
url	請求的 URL 地址
data	請求攜帶的數據
success	請求成功之后的回調函數

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函數完整代碼如下：

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: '張三瘋', age: 180 }) // console.log(res);function itheima(options) {var xhr = new XMLHttpRequest();// 把外界傳遞過來的參數對象，轉換為查詢字符串var qs = resolveData(options.data);// 把外界傳遞過來的參數對象，轉換為查詢字符串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請求// 如果`POST`要提交參數，不是在`url`后面去拼接查詢字符串，而是在`send()`期間去指定參數xhr.open(options.method, options.url);// 設置Content-Type屬性xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(qs)}xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// xhr.responseText是服務器響應回來的數據，但它是一個JSON格式的字符串，需要轉換為JS對象var result = JSON.parse(xhr.responseText);options.success(result)}} }

封裝itheima函數的調用

<script>// itheima({// method: 'GET',// url: 'http://www.liulongbin.top:3006/api/getbooks',// data: {// id: 1// },// success: function(res) {// console.log(res);// }// })itheima({method: 'post',url: 'http://www.liulongbin.top:3006/api/addbook',data: {bookname: '三國演義',author: '羅貫中',publisher: '四川人民出版社'},// 監聽success的回調success: function(res) {console.log(res);}})</script>

控制臺輸出：

四. 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 對象，不僅可以發送文本信息，還可以上傳文件。

實現步驟：

定義 UI 結構；

驗證是否選擇了文件；

向 FormData 中追加文件；

使用 xhr 發起上傳文件的請求；

監聽 onreadystatechange 事件

4.1 定義UI結構

代碼示例：

<!-- 1. 文件選擇框 --><input type="file" id="file1" /><!-- 2. 上傳按鈕 --><button id="btnUpload">上傳文件</button><br /><!-- 3. 顯示上傳到服務器上的圖片 --><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').filesif (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地址。其中，請求類型必須為 POSTxhr.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個重要屬性：

屬性描述

e.lengthComputable	布爾值，表示當前上傳的資源是否具有可計算的長度
e.loaded	已傳輸的字節
e.total	需傳輸的總字節

5.1 導入需要的庫

接下來，需要添加一個進度條，

在bootsrap官網找到“組件”→“進度條”）(地址：https://v3.bootcss.com/components/#progress)；

復制選中的進度條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標簽刪除(即只留下百分比)。

導入jQuery

代碼示例：

<link rel="stylesheet" href="./lib/bootstrap.css" /> <script src="./lib/jquery.js"></script>

接下來，需要將計算出來的百分比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結構

代碼示例：

<!-- 1. 文件選擇框 --> <input type="file" id="file1"> <!-- 2. 上傳文件按鈕 --> <button id="btnUpload">上傳</button> <!-- 3. img 標簽，顯示上傳成功以后的圖片 --> <img src="" alt="" id="img" width:300/>

1.2 驗證是否選擇文件

引入js文件：

<script src="./lib/jquery.js"></script>

驗證文件：

$('#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。

本案例完整代碼：網盤源碼（提取碼：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 案例-計算文件上傳進度

案例源碼：網盤下載（提取碼: 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.dataconsole.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.dataconsole.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)})

---

提示

總結

以上是生活随笔為你收集整理的前端_网页编程 Ajax加强的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。