從0到1學AJAX，這篇就夠了！（進階三）

什麼是ajax？

AJAX 就是瀏覽器提供的一套 API，能夠經過 JavaScript 調用，從而實現經過代碼控制請求與響應。實現
網絡編程

一、使用 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)
}
}

---

二、readyState

因爲 readystatechange 事件是在 xhr 對象狀態變化時觸發（不單是在獲得響應時），也就意味着這個事件會被
觸發屢次，因此咱們有必要了解每個狀態值表明的含義：

時間軸：

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) {
// 後續邏輯......
}
}

---

三、遵循 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 形式，瞭解便可不用了
}
}

---

四、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 通常都是業務數據

---

五、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)
}
}

---

六、同步與異步

同步：一我的在同一個時刻只能作一件事情，在執行一些耗時的操做（不須要看管）不去作別的事，只是等
待
異步：在執行一些耗時的操做（不須要看管）去作別的事，而不是等待

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 。

---

七、響應數據格式

提問：若是但願服務端返回一個複雜數據，該如何處理？
關心的問題就是服務端發出何種格式的數據，這種格式如何在客戶端用 JavaScript 解析。

---

XML

一種數據描述手段，基本如今的項目不用了，淘汰的緣由：數據冗餘太多。

JSON

也是一種數據描述手段，相似於 JavaScript 字面量方式
服務端採用 JSON 格式返回數據，客戶端按照 JSON 格式解析數據。
不論是 JSON 也好，仍是 XML，只是在 AJAX 請求過程當中用到，並不表明它們之間有必然的聯繫，它們只是
數據協議罷了

兼容方案

XMLHttpRequest 在老版本瀏覽器（IE5/6）中有兼容問題，能夠經過另一種方式代替

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

---

八、封裝

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

---

九、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：請求完成觸發（無論成功與否）

十、跨域

相關概念
同源策略是瀏覽器的一種安全策略，所謂同源是指域名，協議，端口徹底相同，只有同源的地址才能夠相互經過
AJAX 的方式請求。
同源或者不一樣源說的是兩個地址之間的關係，不一樣源地址之間請求咱們稱之爲跨域請求
什麼是同源？例如：http://www.example.com/detail... 與一下地址對比

JSONP

JSON with Padding，是一種藉助於 script 標籤發送跨域請求的技巧。
其原理就是在客戶端藉助 script 標籤請求服務端的一個動態網頁（php 文件），服務端的這個動態網頁返回一
段帶有函數調用的 JavaScript 全局函數調用的腳本，將本來須要返回給客戶端的數據傳遞進去。
之後絕大多數狀況都是採用 JSONP 的手段完成不一樣源地址之間的跨域請求

<script src="http://api.zce.me/users.php?callback=foo"></script>
foo(['我', '是', '你', '原', '本', '需', '要', '的', '數', '據'])

總結一下：因爲 XMLHttpRequest 沒法發送不一樣源地址之間的跨域請求，因此咱們必需要另尋他法，script 這種方案就是咱們最終選擇的方式，咱們把這種方式稱之爲 JSONP，若是你不瞭解原理，先記住怎麼用，多用一段時間再來看原理。