教練煌茬，我要學(xué) JavaScript英妓！我要當(dāng)前端！好霎肯，那你懂 Ajax 嗎趾痘？你知道為什么要學(xué) Ajax 嗎慢哈？如果你的頁(yè)面還停留在靜態(tài)頁(yè)面和不停刷新得到的動(dòng)態(tài)頁(yè)面，那么永票，是時(shí)候?qū)W習(xí) Ajax 了卵贱。作為一個(gè)前端必備技能，今天我們來(lái)對(duì) Ajax 一個(gè)面對(duì)面的交流侣集！
什么是 Ajax键俱？
Ajax 提供了一種方式，讓你無(wú)需刷新頁(yè)面就可以異步獲取數(shù)據(jù)世分，聽(tīng)起來(lái)是不是很吊编振，我再也不用每次提交表單刷新頁(yè)面了，再也不發(fā)送數(shù)據(jù)就刷新頁(yè)面了臭埋，直接把返回的數(shù)據(jù)插入 DOM 就可以在頁(yè)面顯示數(shù)據(jù)了踪央。通過(guò) Ajax 我們就可以做出更好的交互了臀玄。
如何使用 Ajax
第一步：創(chuàng)建 XHR 對(duì)象
Ajax 的核心就是 XHR(XMLHttpRequest) 對(duì)象，雖然名字里包含了 XML畅蹂，但是事實(shí)上镐牺，并不一定需要用 XML 作為數(shù)據(jù)格式，在 JSON 大行其道的時(shí)代魁莉，必然傳輸 JSON 會(huì)更加的愉悅了睬涧。
在 IE 已死的今天，不需要再考慮如何兼容 IE 舊版本的 XHR 對(duì)象了旗唁，所以我們只需要通過(guò)
var xhr = new XMLHttpRequest();
就可以獲得我們所需要的 XHR 對(duì)象了畦浓，沒(méi)錯(cuò)，就是這么簡(jiǎn)單检疫，不需要判斷瀏覽器的屬性讶请，不需要兼容 IE！
第二步：XHR的用法
有了這個(gè)對(duì)象之后屎媳，我們看看需要使用什么樣的動(dòng)作才能完成一次正常的傳輸夺溢？首先我們需要啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送，然后再發(fā)送烛谊，發(fā)送完之后對(duì)返回的數(shù)據(jù)進(jìn)行處理风响。用代碼怎么寫呢？
var xhr = new XMLHttpRequest();
xhr.open('get', 'example.php', false);
xhr.send(null);
if (xhr.status >= 200 && xhr.status < 300) || xhr.status(304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
上面這段代碼首先創(chuàng)造了 XHR 對(duì)象丹禀，然后用 open 方法去啟動(dòng)一個(gè)請(qǐng)求状勤，默認(rèn)接收三個(gè)參數(shù)，分別是要發(fā)送的請(qǐng)求的類型双泪，請(qǐng)求的 URL持搜，以及是否異步發(fā)送請(qǐng)求。再調(diào)用 get 方法發(fā)送數(shù)據(jù)焙矛，這里是 null葫盼，發(fā)送完之后對(duì)返回的狀態(tài)進(jìn)行檢測(cè)，通過(guò) xhr.status 返回相對(duì)應(yīng)的狀態(tài)碼村斟，200 表示成功贫导， 304 表示緩存，其他均表示返回失敗邓梅。
看完上面的代碼之后脱盲，有人會(huì)問(wèn)，那我想要異步發(fā)送怎么辦日缨？大多數(shù)情況下钱反， Ajax 請(qǐng)求都是異步發(fā)送的，這個(gè)時(shí)候我們需要用到另外一個(gè) XHR 對(duì)象的屬性 readtstatechange，通常當(dāng)它的值為 4 的時(shí)候面哥，表示所有數(shù)據(jù)已經(jīng)接受到了哎壳。因此，我們可以把上面的代碼更改為如下：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.status === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
}
};
xhr.open('get', 'example.txt', true);
xhr.send(null);
這樣我們一個(gè)完整的 Ajax 請(qǐng)求就已經(jīng)完成了尚卫，是不是很覺(jué)得很簡(jiǎn)單呢归榕？其實(shí)，很多時(shí)候我們不僅僅只是簡(jiǎn)單的獲取數(shù)據(jù)而已吱涉，往往我們需要請(qǐng)求不同的參數(shù)刹泄，或者需要把一些數(shù)據(jù)發(fā)送到服務(wù)器里，這個(gè)時(shí)候就需要進(jìn)一步的使用了怎爵。
再談 GET 和 POST
GET
GET 是最常見(jiàn)的請(qǐng)求類型特石，經(jīng)常用于向服務(wù)器查詢某些信息。我們可以將查詢的字符串追加到 URL 的末尾鳖链，發(fā)送給服務(wù)器姆蘸。例如下面：
xhr.open('get', 'example.php?name1=value1&name2=value2', true)
POST
另外一個(gè)常見(jiàn)的請(qǐng)求是 POST，用于向服務(wù)器發(fā)送應(yīng)該被保存的數(shù)據(jù)芙委。不同于 GET逞敷，POST 請(qǐng)求是把數(shù)據(jù)作為請(qǐng)求的主體去提交的，所以我們的數(shù)據(jù)一般是在 send 方法里面發(fā)出的灌侣⊥凭瑁可以見(jiàn)下面的例子：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.status === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful' + xhr.status);
}
}
};
xhr.open('post', 'example.php', true);
var form = document.getElementById('user-info');
xhr.send(serialize(form));
XMLHttpRequest 2 級(jí)
FormData
有的時(shí)候我們會(huì)經(jīng)常需要提交更多的數(shù)據(jù)，通過(guò)創(chuàng)建一個(gè) FormData 對(duì)象顶瞳，我們可以更加簡(jiǎn)單的創(chuàng)建于表單格式相同的數(shù)據(jù)玖姑。例如：
var data = new FormData();
data.append('name', 'Steven');
append 方法接受兩個(gè)參數(shù)愕秫，鍵和值慨菱，分別對(duì)應(yīng)表單字段的名字和表單字段的值。
創(chuàng)建了 FormData 的實(shí)例以后戴甩，可以之間傳給 XHR 的 send 方法符喝，如下：
// 省略創(chuàng)建 XHR 對(duì)象和對(duì)其狀態(tài)的監(jiān)測(cè)
xhr.open('post', 'postexample.php', true);
var form = document.getElementById('user-info');
xhr.send(new FormData(form));
有時(shí)候我們需要驗(yàn)證這個(gè)表單是否由特定的用戶或者是否有足夠的權(quán)限的時(shí)候，可以再提交表單前 append 對(duì)應(yīng)的 token甜孤，再對(duì)應(yīng)提交协饲。
progress
有時(shí)候我們想知道 Ajax 傳輸?shù)臓顟B(tài)怎么樣了怎么辦！通過(guò) progress 事件缴川，我們可以時(shí)刻知道傳輸?shù)臓顟B(tài)茉稠，它的使用必須放在啟動(dòng)請(qǐng)求 'open' 之前，例如：
xhr.onprogress = function(event) {
var divStatus = document.getElementById('status');
if (event.lengthComputable) {
divStatus.innerHTML = '接受到了' + event.position + event.totalSize + 'bytes';
}
};
xhr.open('get', 'example.php', true);
xhr.send(null);
跨域請(qǐng)求
然而 Ajax 并不是萬(wàn)能的把夸，有時(shí)候我們想要異步獲取其他網(wǎng)站的數(shù)據(jù)的時(shí)候而线，就會(huì)返回失敗，這是因?yàn)?XHR 對(duì)象只能訪問(wèn)與包含它頁(yè)面位于同一個(gè)域中的資源。那我們要怎么辦呢膀篮？
CORS
跨源資源共享標(biāo)準(zhǔn)通過(guò)新增一系列 HTTP 頭嘹狞，讓服務(wù)器能聲明哪些來(lái)源可以通過(guò)瀏覽器訪問(wèn)該服務(wù)器上的資源。主要有三種：
通過(guò)使用 Origin 和 Access-Control-Allow-Origin 就可以完成最簡(jiǎn)單的跨站請(qǐng)求誓竿。不過(guò) Access-Control-Allow-Origin 需要為 * 或者包含由 Origin 指明的站點(diǎn)磅网。
“預(yù)請(qǐng)求”要求必須先發(fā)送一個(gè) OPTIONS 請(qǐng)求給目的站點(diǎn)，來(lái)查明這個(gè)跨站請(qǐng)求對(duì)于目的站點(diǎn)是不是安全可接受的筷屡。這樣做涧偷，是因?yàn)榭缯菊?qǐng)求可能會(huì)對(duì)目的站點(diǎn)的數(shù)據(jù)造成破壞。
一般而言毙死，對(duì)于跨站請(qǐng)求嫂丙，瀏覽器是不會(huì)發(fā)送憑證信息的。但如果將XMLHttpRequest
的一個(gè)特殊標(biāo)志位設(shè)置為true规哲，瀏覽器就將允許該請(qǐng)求的發(fā)送跟啤。
圖片Ping
在使用圖片的時(shí)候，我們的 <img> 中的 src 屬性也可以使用任何網(wǎng)頁(yè)的鏈接唉锌，意味加載這一類請(qǐng)求無(wú)需擔(dān)心是否跨域隅肥。常常用于動(dòng)態(tài)創(chuàng)建圖像，或者跟蹤用戶點(diǎn)擊頁(yè)面袄简，動(dòng)態(tài)廣告曝光次數(shù)等腥放。
JSONP
JSONP 是 JSON with padding 的縮寫，意思是填充式的 JSON绿语，同圖片 Ping 一樣秃症，<script> 的 src 屬性也是可以跨域的，因此通過(guò)動(dòng)態(tài)創(chuàng)建一個(gè) <script> 元素獲取我們所需要的資源吕粹。
不同于圖像 Ping 只返回圖片种柑，JSONP 可以直接訪問(wèn)相應(yīng)文本。只需要在添加 URL 的時(shí)候添加查詢參數(shù)即可匹耕，看起來(lái)會(huì)像下面這個(gè)樣子：
http://freeeoip.net/json/?callback=handleResponse
// 或者 PHP 形式的
http://test.com/bookservice.php?callback=displayBooks
其中賦值給 callback 的表示指定的調(diào)用函數(shù)聚请，完整的 JSONP 如下：
// 處理返回?cái)?shù)據(jù)的請(qǐng)求
function handleResponse(data){
alert('Your city is in' + data.city + data.country);
}
// 動(dòng)態(tài)生成 JSPONP 請(qǐng)求
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
- 好處： 雙向通信，可以跨域
- 壞處：無(wú)法識(shí)別惡意代碼稳其，無(wú)法知道是否獲取失敗
