如往常一樣我們先來(lái)了解一下什么是AJAX邪意？
AJAX##
AJAX 是一種創(chuàng)建交互式網(wǎng)站網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)摹量， 可以訪(fǎng)問(wèn)服務(wù)器數(shù)據(jù)的局部刷新的技術(shù)屠升。
AJAX能干什么呢恬惯？
1.可以做搜索中的自動(dòng)提示
2.郵箱注冊(cè) 用戶(hù)名檢測(cè)
3.圖片的無(wú)刷新加載
Ajax技術(shù)的核心是[XMLHttpRequest]對(duì)象（簡(jiǎn)稱(chēng)XHR）蜻牢，可以通過(guò)使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)烤咧，然后再通過(guò)DOM將數(shù)據(jù)插入到頁(yè)面中呈現(xiàn)。雖然名字中包含XML抢呆，但Ajax通訊與數(shù)據(jù)格式無(wú)關(guān)煮嫌，所以我們的數(shù)據(jù)格式可以是XML或JSON等格式。
JSON##
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式镀娶。 通過(guò)JavaScript中的一些模式來(lái)表示結(jié)構(gòu)化數(shù)據(jù), JSON 并不是 JavaScript 獨(dú)有的數(shù)據(jù)格式立膛，其他很多語(yǔ)言都可以對(duì) JSON 進(jìn)行解析和序列化,
JSON 的語(yǔ)法可以表示三種類(lèi)型的值：
- 對(duì)象表示法
- 數(shù)組表示法
- 對(duì)象和數(shù)組的結(jié)合的表示法
除了JSON外, 還有XML也是一種數(shù)據(jù)表示方式;
XML##
XML是擴(kuò)展標(biāo)記語(yǔ)言 (Extensible Markup Language, XML) ，用于標(biāo)記電子文件使其具有結(jié)構(gòu)性的標(biāo)記語(yǔ)言梯码，可以用來(lái)標(biāo)記數(shù)據(jù)宝泵、定義數(shù)據(jù)類(lèi)型，是一種允許用戶(hù)對(duì)自己的標(biāo)記語(yǔ)言進(jìn)行定義的源語(yǔ)言轩娶。
XHR 的出現(xiàn)儿奶，提供了向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)流暢的接口。能夠以異步方式從服務(wù)器獲取更多的信息鳄抒，這就意味著闯捎，用戶(hù)只要觸發(fā)某一事件，在不刷新網(wǎng)頁(yè)的情況下许溅，更新服務(wù)器最新的數(shù)據(jù)瓤鼻。
雖然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和數(shù)據(jù)格式有關(guān)贤重，也就是說(shuō)這種技術(shù)不一定使用 XML茬祷。相反目前常用的數(shù)據(jù)格式是JSON.
XHR對(duì)象支持IE7+、Firefox并蝗、Opera祭犯、Chrome 和 Safari 等瀏覽器, 但是不支持IE6。
創(chuàng)建 XHR 對(duì)象可以直接實(shí)例化 XMLHttpRequest 滚停。
var xhr = new XMLHttpRequest();
alert(xhr); //XMLHttpRequest
如果是 IE6 及以下沃粗，那么我們必須還需要使用 ActiveX 對(duì)象通過(guò) 傳入?yún)?shù)Microsoft.XMLHTTP來(lái)實(shí)現(xiàn)。
xhr = new ActiveXObject("Microsoft.XMLHTTP");
open()方法:
它接受三個(gè)參數(shù)：要發(fā)送的請(qǐng)求類(lèi)型(get键畴、post)最盅、請(qǐng)求的 URL 和表示是否異步
xhr.open('get', 'demo.json', false); //對(duì)于demo.json 的 get 請(qǐng)求，false表示同步
send()方法:
向服務(wù)器發(fā)送請(qǐng)求
open()方法并不會(huì)真正發(fā)送請(qǐng)求，而是準(zhǔn)備好需要發(fā)送給服務(wù)器的內(nèi)容檩禾。我們需要通過(guò)send()方法向服務(wù)器發(fā)送請(qǐng)求
send()方法接受一個(gè)參數(shù)挂签，作為請(qǐng)求體發(fā)送的數(shù)據(jù)。如果是get方式請(qǐng)求則填 null盼产。
xhr.send(null);
abort()方法
取消異步請(qǐng)求, 如果需要取消某異步請(qǐng)求, 則在send()之后再調(diào)用, 寫(xiě)在send()之前調(diào)用會(huì)報(bào)錯(cuò)
//取消異步請(qǐng)求
xhr.abort();
XHR 對(duì)象的屬性:
當(dāng)請(qǐng)求發(fā)送到服務(wù)器端饵婆，收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充 XHR 對(duì)象的屬性戏售。一共有四個(gè)屬性：
status: 響應(yīng)的 HTTP 狀態(tài) (重要)
statusText: HTTP 狀態(tài)的說(shuō)明 (重要)
responseText: 作為響應(yīng)主體被返回的文本 (重要)
responseXML: 如果響應(yīng)主體內(nèi)容類(lèi)型是"text/xml"或"application/xml"侨核，則返回包含響應(yīng)數(shù)據(jù)的 XML文檔,否則是null
readyState 屬性
0: 沒(méi)有發(fā)送
1: 已經(jīng)發(fā)送了，但服務(wù)器還沒(méi)有接收到
2: 服務(wù)器已經(jīng)接收到了灌灾，但還沒(méi)有處理完數(shù)據(jù)
3: 服務(wù)器已經(jīng)處理完數(shù)據(jù)搓译，并已經(jīng)返回
4: 客戶(hù)端已經(jīng)正常接收到服務(wù)器返回的數(shù)據(jù)
status 屬性:
HTTP請(qǐng)求狀態(tài)碼, 一般 HTTP 狀態(tài)代碼為 200 則表示請(qǐng)求服務(wù)器成功
//所以我們一般在寫(xiě)的時(shí)候都會(huì)加上一個(gè)判斷
if (xhr.readyState == 4 && xhr.status == 200) {
}
HTTP 協(xié)議中的狀態(tài)碼
404: 找不到服務(wù)器中的資源
403: 服務(wù)器緩存
500： 服務(wù)器故障
200: 【正常】返回
400: 語(yǔ)法錯(cuò)誤導(dǎo)致服務(wù)器不識(shí)別
503: 由于服務(wù)器過(guò)載或維護(hù)導(dǎo)致無(wú)法完成請(qǐng)求
//這些狀態(tài)碼能夠快速的讓我們知道錯(cuò)誤的內(nèi)容
那么在書(shū)寫(xiě)的時(shí)候要注意有四步驟：
// 1. 創(chuàng)建對(duì)象
var req = new XMLHttpRequest();
// 2. 準(zhǔn)備
// 參數(shù)1： 獲取數(shù)據(jù)的方式锋喜， GET些己、POST
// 參數(shù)2： 向服務(wù)器請(qǐng)求數(shù)據(jù)的地址 格式： 例如： http://ip:8080/ajax/ajaxtest
// 參數(shù)3： false 代表同步的方式請(qǐng)求數(shù)據(jù)，true 代表異步
// req.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);
req.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);
// 3. 發(fā)送請(qǐng)求
req.send();
// 4. 獲取數(shù)據(jù)
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
// 200 說(shuō)明返回的數(shù)據(jù)是正常的
var str = req.responseText;
}
}
}
然而這還沒(méi)有完嘿般，怎么辦呢段标？要鎖門(mén)了！
青山不改炉奴，綠水長(zhǎng)流逼庞，我們江湖再見(jiàn)！
