摘要：一定在發(fā)送請求之前注冊不管同步或者異步為了讓這個事件可以更加可靠一定觸發(fā)，一定是先注冊了解同步模式即可，切記不要使用同步模式。至此，我們已經(jīng)大致了解了的基本。一種數(shù)據(jù)描述手段，基本現(xiàn)在的項目不用了，淘汰的原因數(shù)據(jù)冗余太多。

AJAX 就是瀏覽器提供的一套 API，可以通過 JavaScript 調(diào)用，從而實現(xiàn)通過代碼控制請求與響應。實現(xiàn)
網(wǎng)絡(luò)編程

// 1. 創(chuàng)建一個 XMLHttpRequest 類型的對象 —— 相當于打開了一個瀏覽器
var xhr = new XMLHttpRequest()
// 2. 打開與一個網(wǎng)址之間的連接 —— 相當于在地址欄輸入訪問地址
xhr.open("GET", "./time.php")
// 3. 通過連接發(fā)送一次請求 —— 相當于回車或者點擊訪問發(fā)送請求
xhr.send(null)
// 4. 指定 xhr 狀態(tài)變化事件處理函數(shù) —— 相當于處理網(wǎng)頁呈現(xiàn)后的操作
xhr.onreadystatechange = function () {
// 通過 xhr 的 readyState 判斷此次請求的響應是否接收完成
if (this.readyState === 4) {
// 通過 xhr 的 responseText 獲取到響應的響應體
console.log(this)
}
}

由于 readystatechange 事件是在 xhr 對象狀態(tài)變化時觸發(fā)（不單是在得到響應時），也就意味著這個事件會被
觸發(fā)多次，所以我們有必要了解每一個狀態(tài)值代表的含義：

時間軸：

var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 請求代理對象
xhr.open("GET", "time.php")
console.log(xhr.readyState)
// => 1
// open 方法已經(jīng)調(diào)用，建立一個與服務(wù)端特定端口的連接
xhr.send()
xhr.addEventListener("readystatechange", function () {
switch (this.readyState) {
case 2:
// => 2
// 已經(jīng)接受到了響應報文的響應頭
// 可以拿到頭
// 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 （整個響應報文已經(jīng)完整下載下來了）
// 這里處理響應體
console.log(this.responseText)
break
}
})

通過理解每一個狀態(tài)值的含義得出一個結(jié)論：一般我們都是在 readyState 值為 4 時，執(zhí)行響應的后續(xù)邏輯。

xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 后續(xù)邏輯......
}
}

本質(zhì)上 XMLHttpRequest 就是 JavaScript 在 Web 平臺中發(fā)送 HTTP 請求的手段，所以我們發(fā)送出去的請求任然是
HTTP 請求，同樣符合 HTTP 約定的格式：

// 設(shè)置請求報文的請求行
xhr.open("GET", "./time.php")
// 設(shè)置請求頭
xhr.setRequestHeader("Accept", "text/plain")
// 設(shè)置請求體
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 獲取響應狀態(tài)碼
console.log(this.status)
// 獲取響應狀態(tài)描述
console.log(this.statusText)
// 獲取響應頭信息
console.log(this.getResponseHeader("Content‐Type")) // 指定響應頭
console.log(this.getAllResponseHeader()) // 全部響應頭
// 獲取響應體
console.log(this.responseText) // 文本形式
console.log(this.responseXML) // XML 形式，了解即可不用了
}
}

通常在一次 GET 請求過程中，參數(shù)傳遞都是通過 URL 地址中的 ? 參數(shù)傳遞。

var xhr = new XMLHttpRequest()
// GET 請求傳遞參數(shù)通常使用的是問號傳參
// 這里可以在請求地址后面加上參數(shù)，從而傳遞數(shù)據(jù)到服務(wù)端
xhr.open("GET", "./delete.php?id=1")
// 一般在 GET 請求時無需設(shè)置響應體，可以傳 null 或者干脆不傳
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}
// 一般情況下 URL 傳遞的都是參數(shù)性質(zhì)的數(shù)據(jù)，而 POST 一般都是業(yè)務(wù)數(shù)據(jù)

POST 請求過程中，都是采用請求體承載需要提交的數(shù)據(jù)。

var xhr = new XMLHttpRequest()
// open 方法的第一個參數(shù)的作用就是設(shè)置請求的 method
xhr.open("POST", "./add.php")
// 設(shè)置請求頭中的 Content‐Type 為 application/x‐www‐form‐urlencoded
// 標識此次請求的請求體格式為 urlencoded 以便于服務(wù)端接收數(shù)據(jù)
xhr.setRequestHeader("Content‐Type", "application/x‐www‐form‐urlencoded")
// 需要提交到服務(wù)端的數(shù)據(jù)可以通過 send 方法的參數(shù)傳遞
// 格式：key1=value1&key2=value2
xhr.send("key1=value1&key2=value2")
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

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

xhr.open() 方法第三個參數(shù)要求傳入的是一個 bool 值，其作用就是設(shè)置此次請求是否采用異步方式執(zhí)行，默認
為 true ，如果需要同步執(zhí)行可以通過傳遞 false 實現(xiàn)：

console.log("before ajax")
var xhr = new XMLHttpRequest()
// 默認第三個參數(shù)為 true 意味著采用異步方式執(zhí)行
xhr.open("GET", "./time.php", true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 這里的代碼最后執(zhí)行
console.log("request done")
}
}
console.log("after ajax")

如果采用同步方式執(zhí)行，則代碼會卡死在 xhr.send() 這一步：

console.log("before ajax")
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open("GET", "./time.php", false)
// 同步方式 執(zhí)行需要 先注冊事件再調(diào)用 send，否則 readystatechange 無法觸發(fā)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 這里的代碼最后執(zhí)行
console.log("request done")
}
}
xhr.send(null)
console.log("after ajax")

演示同步異步差異。
一定在發(fā)送請求 send() 之前注冊 readystatechange （不管同步或者異步）
為了讓這個事件可以更加可靠（一定觸發(fā)），一定是先注冊
了解同步模式即可，切記不要使用同步模式。
至此，我們已經(jīng)大致了解了 AJAX 的基本 API 。

提問：如果希望服務(wù)端返回一個復雜數(shù)據(jù)，該如何處理？
關(guān)心的問題就是服務(wù)端發(fā)出何種格式的數(shù)據(jù)，這種格式如何在客戶端用 JavaScript 解析。

一種數(shù)據(jù)描述手段，基本現(xiàn)在的項目不用了，淘汰的原因：數(shù)據(jù)冗余太多。

也是一種數(shù)據(jù)描述手段，類似于 JavaScript 字面量方式
服務(wù)端采用 JSON 格式返回數(shù)據(jù)，客戶端按照 JSON 格式解析數(shù)據(jù)。
不管是 JSON 也好，還是 XML，只是在 AJAX 請求過程中用到，并不代表它們之間有必然的聯(lián)系，它們只是
數(shù)據(jù)協(xié)議罷了

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

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

函數(shù)就可以理解為一個想要做的事情，函數(shù)體中約定了這件事情做的過程，直到調(diào)用時才開始工作。
將函數(shù)作為參數(shù)傳遞就像是將一個事情交給別人，這就是委托的概念

/**
* 發(fā)送一個 AJAX 請求
* @param {String} method 請求方法
* @param {String} url 請求地址
* @param {Object} params 請求參數(shù)
* @param {Function} done 請求完成過后需要做的事情（委托/回調(diào)）
*/
function ajax (method, url, params, done) {
// 統(tǒng)一轉(zhuǎn)換為大寫便于后續(xù)判斷
method = method.toUpperCase()
// 對象形式的參數(shù)轉(zhuǎn)換為 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 請求就設(shè)置 URL 地址 問號參數(shù)
if (method === "GET") {
url += "?" + querystring
}
xhr.open(method, url)
// 如果是 POST 請求就設(shè)置請求體
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)
})

$.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")
}
})

常用選項參數(shù)介紹：
url：請求地址
type：請求方法，默認為 get
dataType：服務(wù)端響應數(shù)據(jù)類型
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")
}
})
常用選項參數(shù)介紹：
url：請求地址
type：請求方法，默認為 get
dataType：服務(wù)端響應數(shù)據(jù)類型
contentType：請求體內(nèi)容類型，默認 application/x-www-form-urlencoded
data：需要傳遞到服務(wù)端的數(shù)據(jù)，如果 GET 則通過 URL 傳遞，如果 POST 則通過請求體傳遞
timeout：請求超時時間
beforeSend：請求發(fā)起之前觸發(fā)
success：請求成功之后觸發(fā)（響應狀態(tài)碼 200）
error：請求失敗觸發(fā)
complete：請求完成觸發(fā)（不管成功與否）

相關(guān)概念
同源策略是瀏覽器的一種安全策略，所謂同源是指域名，協(xié)議，端口完全相同，只有同源的地址才可以相互通過
AJAX 的方式請求。
同源或者不同源說的是兩個地址之間的關(guān)系，不同源地址之間請求我們稱之為跨域請求
什么是同源？例如：http://www.example.com/detail... 與一下地址對比

JSON with Padding，是一種借助于 script 標簽發(fā)送跨域請求的技巧。
其原理就是在客戶端借助 script 標簽請求服務(wù)端的一個動態(tài)網(wǎng)頁（php 文件），服務(wù)端的這個動態(tài)網(wǎng)頁返回一
段帶有函數(shù)調(diào)用的 JavaScript 全局函數(shù)調(diào)用的腳本，將原本需要返回給客戶端的數(shù)據(jù)傳遞進去。
以后絕大多數(shù)情況都是采用 JSONP 的手段完成不同源地址之間的跨域請求

foo(["我", "是", "你", "原", "本", "需", "要", "的", "數(shù)", "據(jù)"])

總結(jié)一下：由于 XMLHttpRequest 無法發(fā)送不同源地址之間的跨域請求，所以我們必須要另尋他法，script 這種方
案就是我們最終選擇的方式，我們把這種方式稱之為 JSONP，如果你不了解原理，先記住怎么用，多用一段時間再
來看原理。