前端進階（三）從0到1學AJAX，這篇就夠了！
什麼是ajax？
AJAX 就是瀏覽器提供的一套 API，可以透過 JavaScript 呼叫，從而實現透過程式碼控制請求與響應。實現
網路程式設計
1、使用 AJAX 的過程可以類比平常我們訪問網頁過程
// 1\. 建立一個 XMLHttpRequest 型別的物件 —— 相當於開啟了一個瀏覽器
var xhr = new XMLHttpRequest()
// 2\. 開啟與一個網址之間的連線 —— 相當於在位址列輸入訪問地址
xhr.open('GET', './time.php')
// 3\. 透過連線傳送一次請求 —— 相當於回車或者點選訪問傳送請求
xhr.send(null)
// 4\. 指定 xhr 狀態變化事件處理函式 —— 相當於處理網頁呈現後的操作
xhr.onreadystatechange = function () {
// 透過 xhr 的 readyState 判斷此次請求的響應是否接收完成
if (this.readyState === 4) {
// 透過 xhr 的 responseText 獲取到響應的響應體
console.log(this)
}
}
自己是個做了幾年開發的老碼農，希望本文對你有用！ 這裡推薦一下我的前端學習交流圈：767273102 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!
2、readyState
由於 readystatechange 事件是在 xhr 物件狀態變化時觸發（不單是在得到響應時），也就意味著這個事件會被
觸發多次，所以我們有必要了解每一個狀態值代表的含義：
[圖片上傳失敗...(image-62c2e1-1558359068841)]
時間軸：
[圖片上傳失敗...(image-6e1d8d-1558359068841)]
var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 請求代理物件
xhr.open('GET', 'time.php')
console.log(xhr.readyState)
// => 1
// open 方法已經呼叫，建立一個與服務端特定埠的連線
xhr.send()
xhr.addEventListener('readystatechange', function () {
switch (this.readyState) {
case 2:
// => 2
// 已經接受到了響應報文的響應頭
// 可以拿到頭
// console.log(this.getAllResponseHeaders())
console.log(this.getResponseHeader('server'))
// 但是還沒有拿到體
console.log(this.responseText)
break
case 3:
// => 3
// 正在下載響應報文的響應體，有可能響應體為空，也有可能不完整
// 在這裡處理響應體不保險（不可靠）
console.log(this.responseText)
break
case 4:
// => 4
// 一切 OK （整個響應報文已經完整下載下來了）
// 這裡處理響應體
console.log(this.responseText)
break
}
})
透過理解每一個狀態值的含義得出一個結論：一般我們都是在 readyState 值為 4 時，執行響應的後續邏輯。
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 後續邏輯......
}
}
3、遵循 HTTP
本質上 XMLHttpRequest 就是 JavaScript 在 Web 平臺中傳送 HTTP 請求的手段，所以我們傳送出去的請求任然是
HTTP 請求，同樣符合 HTTP 約定的格式：
// 設定請求報文的請求行
xhr.open('GET', './time.php')
// 設定請求頭
xhr.setRequestHeader('Accept', 'text/plain')
// 設定請求體
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 獲取響應狀態碼
console.log(this.status)
// 獲取響應狀態描述
console.log(this.statusText)
// 獲取響應頭資訊
console.log(this.getResponseHeader('Content‐Type')) // 指定響應頭
console.log(this.getAllResponseHeader()) // 全部響應頭
// 獲取響應體
console.log(this.responseText) // 文字形式
console.log(this.responseXML) // XML 形式，瞭解即可不用了
}
}
4、GET 請求
通常在一次 GET 請求過程中，引數傳遞都是透過 URL 地址中的 ? 引數傳遞。
var xhr = new XMLHttpRequest()
// GET 請求傳遞引數通常使用的是問號傳參
// 這裡可以在請求地址後面加上引數，從而傳遞資料到服務端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 請求時無需設定響應體，可以傳 null 或者乾脆不傳
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
// 一般情況下 URL 傳遞的都是引數性質的資料，而 POST 一般都是業務資料
5、POST 請求
POST 請求過程中，都是採用請求體承載需要提交的資料。
var xhr = new XMLHttpRequest()
// open 方法的第一個引數的作用就是設定請求的 method
xhr.open('POST', './add.php')
// 設定請求頭中的 Content‐Type 為 application/x‐www‐form‐urlencoded
// 標識此次請求的請求體格式為 urlencoded 以便於服務端接收資料
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服務端的資料可以透過 send 方法的引數傳遞
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
6、同步與非同步
同步：一個人在同一個時刻只能做一件事情，在執行一些耗時的操作（不需要看管）不去做別的事，只是等 待 非同步：在執行一些耗時的操作（不需要看管）去做別的事，而不是等待
xhr.open() 方法第三個引數要求傳入的是一個 bool 值，其作用就是設定此次請求是否採用非同步方式執行，預設
為 true ，如果需要同步執行可以透過傳遞 false 實現：
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 預設第三個引數為 true 意味著採用非同步方式執行
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 這裡的程式碼最後執行
console.log('request done')
}
}
console.log('after ajax')
如果採用同步方式執行，則程式碼會卡死在 xhr.send() 這一步：
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 執行需要 先註冊事件再呼叫 send，否則 readystatechange 無法觸發
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 這裡的程式碼最後執行
console.log('request done')
}
}
xhr.send(null)
console.log('after ajax')
演示同步非同步差異。
一定在傳送請求 send() 之前註冊 readystatechange （不管同步或者非同步）
為了讓這個事件可以更加可靠（一定觸發），一定是先註冊
瞭解同步模式即可，切記不要使用同步模式。
至此，我們已經大致瞭解了 AJAX 的基本 API 。
7、響應資料格式
提問：如果希望服務端返回一個複雜資料，該如何處理？
關心的問題就是服務端發出何種格式的資料，這種格式如何在客戶端用 JavaScript 解析。
XML
一種資料描述手段，基本現在的專案不用了，淘汰的原因：資料冗餘太多。
JSON
也是一種資料描述手段，類似於 JavaScript 字面量方式
服務端採用 JSON 格式返回資料，客戶端按照 JSON 格式解析資料。
不管是 JSON 也好，還是 XML，只是在 AJAX 請求過程中用到，並不代表它們之間有必然的聯絡，它們只是
資料協議罷了
相容方案
XMLHttpRequest 在老版本瀏覽器（IE5/6）中有相容問題，可以透過另外一種方式代替
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
8、封裝
AJAX 請求封裝
函式就可以理解為一個想要做的事情，函式體中約定了這件事情做的過程，直到呼叫時才開始工作。
將函式作為引數傳遞就像是將一個事情交給別人，這就是委託的概念
/**
* 傳送一個 AJAX 請求
* @param {String} method 請求方法
* @param {String} url 請求地址
* @param {Object} params 請求引數
* @param {Function} done 請求完成過後需要做的事情（委託/回撥）
*/
function ajax (method, url, params, done) {
// 統一轉換為大寫便於後續判斷
method = method.toUpperCase()
// 物件形式的引數轉換為 urlencoded 格式
var pairs = []
for (var key in params) {
pairs.push(key + '=' + params[key])
}
var querystring = pairs.join('&')
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new
ActiveXObject('Microsoft.XMLHTTP')
xhr.addEventListener('readystatechange', function () {
if (this.readyState !== 4) return
// 嘗試透過 JSON 格式解析響應體
try {
done(JSON.parse(this.responseText))
} catch (e) {
done(this.responseText)
}
})
// 如果是 GET 請求就設定 URL 地址 問號引數
if (method === 'GET') {
url += '?' + querystring
}
xhr.open(method, url)
// 如果是 POST 請求就設定請求體
var data = null
if (method === 'POST') {
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
data = querystring
}
xhr.send(data)
}
ajax('get', './get.php', { id: 123 }, function (data) {
console.log(data)
})
ajax('post', './post.php', { foo: 'posted data' }, function (data) {
console.log(data)
})
9、jQuery 中的 AJAX
$.ajax
$.ajax({
url: './get.php',
type: 'get',
dataType: 'json',
data: { id: 1 },
beforeSend: function (xhr) {
console.log('before send')
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
},
complete: function () {
console.log('request completed')
}
})
常用選項引數介紹：
url：請求地址
type：請求方法，預設為 get
dataType：服務端響應資料型別
ajax('get', './get.php', { id: 123 }, function (data) {
console.log(data)
})
ajax('post', './post.php', { foo: 'posted data' }, function (data) {
console.log(data)
})
$.ajax({
url: './get.php',
type: 'get',
dataType: 'json',
data: { id: 1 },
beforeSend: function (xhr) {
console.log('before send')
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
},
complete: function () {
console.log('request completed')
}
})
常用選項引數介紹：
url：請求地址
type：請求方法，預設為 get
dataType：服務端響應資料型別
contentType：請求體內容型別，預設 application/x-www-form-urlencoded
data：需要傳遞到服務端的資料，如果 GET 則透過 URL 傳遞，如果 POST 則透過請求體傳遞
timeout：請求超時時間
beforeSend：請求發起之前觸發
success：請求成功之後觸發（響應狀態碼 200）
error：請求失敗觸發
complete：請求完成觸發（不管成功與否）
10、跨域
相關概念
同源策略是瀏覽器的一種安全策略，所謂同源是指域名，協議，埠完全相同，只有同源的地址才可以相互透過
AJAX 的方式請求。
同源或者不同源說的是兩個地址之間的關係，不同源地址之間請求我們稱之為跨域請求
什麼是同源？例如：
與一下地址對比
JSONP
JSON with Padding，是一種藉助於 script 標籤傳送跨域請求的技巧。
其原理就是在客戶端藉助 script 標籤請求服務端的一個動態網頁（php 檔案），服務端的這個動態網頁返回一
段帶有函式呼叫的 JavaScript 全域性函式呼叫的指令碼，將原本需要返回給客戶端的資料傳遞進去。
以後絕大多數情況都是採用 JSONP 的手段完成不同源地址之間的跨域請求
<script src=" foo(['我', '是', '你', '原', '本', '需', '要', '的', '數', '據'])
總結一下：由於 XMLHttpRequest 無法傳送不同源地址之間的跨域請求，所以我們必須要另尋他法，script 這種方
案就是我們最終選擇的方式，我們把這種方式稱之為 JSONP，如果你不瞭解原理，先記住怎麼用，多用一段時間再
來看原理。
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2645126/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- AJAX入門這一篇就夠了
- 學Redis這篇就夠了Redis
- python語法進階這一篇就夠了Python
- 前端基礎進階（13）：透徹掌握Promise的使用，讀這篇就夠了前端Promise
- Ajax原理一篇就夠了
- 學Nginx,這一篇就夠了Nginx
- NGINX 從入門到精通，學會這些就夠了Nginx
- 前端er瞭解GraphQL，看這篇就夠了前端
- Redis主從複製看這篇就夠了Redis
- 學習JDBC這一篇就夠了JDBC
- 學習MySQL這一篇就夠了MySql
- 學習Jmeter，這一篇就夠了JMeter
- 學習git這一篇就夠了！！！Git
- 學習Less-看這篇就夠了
- [收藏]學習sed，看這篇就夠了
- mongoDB高階查詢這一篇就夠了MongoDB
- mongoDB看這篇就夠了MongoDB
- 前端linux基礎，這一篇就夠了前端Linux
- Git讓你從入門到精通，看這一篇就夠了！Git
- Javaer 進階必看的 RocketMQ ，就這篇了JavaMQ
- HTML教程（看完這篇就夠了）HTML
- 想熟悉PostgreSQL？這篇就夠了SQL
- Oracle索引，看這篇就夠了Oracle索引
- 學透 Redis HyperLogLog，看這篇就夠了Redis
- Java高階特性泛型看這一篇就夠了Java泛型
- Charles 從入門到精通，看這篇文章就夠了
- 入門Webpack，看這篇就夠了Web
- APP瘦身這一篇就夠了APP
- Android Fragment看這篇就夠了AndroidFragment
- OAuth授權|看這篇就夠了OAuth
- 深入Babel，這一篇就夠了Babel
- Zookeeper入門看這篇就夠了
- Git 看這一篇就夠了Git
- React入門看這篇就夠了React
- 翻譯 | 上手 Webpack ? 這篇就夠了！Web
- JavaScript正則，看這篇就夠了JavaScript
- 小程式分享，看這篇就夠了
- 學習Hibernate5這一篇就夠了