摘要： 最近在學(xué)習(xí)AJAX異步交互，有一個(gè)生活中很常見的例子。很多網(wǎng)頁都有登錄注冊(cè)頁面，在很久以前，傳統(tǒng)的數(shù)據(jù)驗(yàn)證是需要等用戶把要填的每一項(xiàng)都填好之后，點(diǎn)擊提交按鈕，數(shù)據(jù)傳輸?shù)胶笈_(tái)。如果你的運(yùn)氣很不好，那么不好意思，頁面給你提示數(shù)據(jù)格式有誤。之前花費(fèi)很多時(shí)間填寫的數(shù)據(jù)在頁面刷新之后都給你清空了，那么你就需要重新一步一步的來填寫數(shù)據(jù)。很明顯，這種用戶體驗(yàn)非常不好。因此就誕生了一個(gè)異步交互的理念，用戶每填
最近在學(xué)習(xí)AJAX異步交互，有一個(gè)生活中很常見的例子。很多網(wǎng)頁都有登錄注冊(cè)頁面，在很久以前，傳統(tǒng)的數(shù)據(jù)驗(yàn)證是需要等用戶把要填的每一項(xiàng)都填好之后，點(diǎn)擊提交按鈕，數(shù)據(jù)傳輸?shù)胶笈_(tái)。如果你的運(yùn)氣很不好，那么不好意思，頁面給你提示數(shù)據(jù)格式有誤。之前花費(fèi)很多時(shí)間填寫的數(shù)據(jù)在頁面刷新之后都給你清空了，那么你就需要重新一步一步的來填寫數(shù)據(jù)。很明顯，這種用戶體驗(yàn)非常不好。因此就誕生了一個(gè)異步交互的理念，用戶每填寫一項(xiàng)數(shù)據(jù)就自動(dòng)向后臺(tái)進(jìn)行驗(yàn)證，同時(shí)要注意的是當(dāng)前頁面并沒有刷新，只是會(huì)局部刷新。
先來了解下AJAX的定義：AJAX 全稱為 Asynchronous Javascript And XML。它不是一門的新的語言，而是對(duì)現(xiàn)有技術(shù)的綜合利用。本質(zhì)是在HTTP協(xié)議的基礎(chǔ)上以異步的方式與服務(wù)器進(jìn)行通信。異步是指某段程序執(zhí)行時(shí)不會(huì)阻塞其它程序執(zhí)行，其表現(xiàn)形式為程序的執(zhí)行順序不依賴程序本身的書寫順序，相反則為同步。其優(yōu)勢(shì)在于不阻塞程序的執(zhí)行，從而提升整體執(zhí)行效率。要實(shí)現(xiàn)異步交互的目的，我們需要借助異步對(duì)象XMLHttpRequest來實(shí)現(xiàn)。XMLHttpRequest是瀏覽器內(nèi)建對(duì)象，用于在后臺(tái)與服務(wù)器通信(交換數(shù)據(jù)) ，由此我們便可實(shí)現(xiàn)對(duì)網(wǎng)頁的部分更新，而不是刷新整個(gè)頁面。
簡(jiǎn)單的理解前后臺(tái)的交互，說白了就是六個(gè)字，請(qǐng)求、處理、響應(yīng)。瀏覽器與服務(wù)器之間的通信是需要遵守一定的規(guī)則的，也就是通信協(xié)議。常見的通信協(xié)議有：
a) HTTP、HTTPS 超文本傳輸協(xié)議
b) FTP 文件傳輸協(xié)議
c) SMTP 簡(jiǎn)單郵件傳輸協(xié)議
通信協(xié)議不是這里的重點(diǎn)，我們需要了解的是HTTP 協(xié)議。HTTP 協(xié)議即超文本傳輸協(xié)議，網(wǎng)站是基于HTTP協(xié)議的，例如網(wǎng)站的圖片、CSS、JS等都是基于HTTP協(xié)議進(jìn)行傳輸?shù)摹TTP協(xié)議是由從客戶機(jī)到服務(wù)器的請(qǐng)求(Request)和從服務(wù)器到客戶機(jī)的響應(yīng)(Response)進(jìn)行了約束和規(guī)范。HTTP 協(xié)議中常見的兩種請(qǐng)求方式是POST、GET，還有幾個(gè)不常見的比如PUT、DELETE。
客戶端給服務(wù)器發(fā)送請(qǐng)求，也就是請(qǐng)求報(bào)文。請(qǐng)求報(bào)文的規(guī)范格式為請(qǐng)求行、請(qǐng)求頭、請(qǐng)求主體。如：
請(qǐng)求報(bào)文行由請(qǐng)求方式，請(qǐng)求的URL和協(xié)議版本組成，如上面第一個(gè)標(biāo)記處。
請(qǐng)求報(bào)文頭包括：
Host：localhost請(qǐng)求的主機(jī)
Cache-Control：max-age=0控制緩存(no-cache| no-store)
Accept：*/* 接受的文檔MIME類型
User-Agent：向訪問網(wǎng)站提供你所使用的瀏覽器類型、操作系統(tǒng)及版本、CPU 類型、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等信息的標(biāo)識(shí). 瀏覽器UA 字串的標(biāo)準(zhǔn)格式為： 瀏覽器標(biāo)識(shí) (操作系統(tǒng)標(biāo)識(shí); 加密等級(jí)標(biāo)識(shí); 瀏覽器語言) 渲染引擎標(biāo)識(shí) 版本信息
Referer：從哪個(gè)URL跳轉(zhuǎn)過來的
Accept-Encoding：可接受的壓縮格式
請(qǐng)求報(bào)文體即傳遞給服務(wù)端的數(shù)據(jù)。
相應(yīng)的，服務(wù)器響應(yīng)也有響應(yīng)報(bào)文。其規(guī)范格式為：狀態(tài)行、響應(yīng)頭、響應(yīng)主體。
狀態(tài)行由協(xié)議版本號(hào)、狀態(tài)碼和狀態(tài)信息構(gòu)成。
響應(yīng)頭包括：
Date：響應(yīng)時(shí)間
Server：服務(wù)器信息
Content-Length：響應(yīng)主體長度
Content-Type：響應(yīng)資源的MIME類型
響應(yīng)主體：即服務(wù)端返回給客戶端的內(nèi)容。
常見的服務(wù)器響應(yīng)狀態(tài)碼有：200代表成功、304文檔未修改、403沒有權(quán)限、404未找到，500 服務(wù)器錯(cuò)誤
客戶端與服務(wù)器在進(jìn)行數(shù)據(jù)傳輸?shù)臅r(shí)候都是以字節(jié)形式進(jìn)行的，可以理解成是以文本形式傳輸，這時(shí)瀏覽器就需要明確知道該怎么樣來解析這些文本形式的數(shù)據(jù)，MIME（Content-Type）就是明確告知瀏覽器該如何來處理。
在了解了客戶端與服務(wù)器的通信協(xié)議之后，我們就可以著手我們的異步數(shù)據(jù)交互實(shí)現(xiàn)了。要去和后臺(tái)進(jìn)行數(shù)據(jù)驗(yàn)證，我們可以指揮XMLHttpRequest這個(gè)異步對(duì)象去幫助我們來實(shí)現(xiàn)。
1、首先是創(chuàng)建異步對(duì)象。
在高版本的瀏覽器中，可以通過new XMLHttpRequest()來創(chuàng)建，但是在IE低版本(5、6)中則要通過 new ActiveXObject("Microsoft.XMLHTTP") 來創(chuàng)建。兼容性的寫法為：
2、異步對(duì)象成功創(chuàng)建之后，就是請(qǐng)求的發(fā)送。
請(qǐng)求發(fā)送需要設(shè)置三部分內(nèi)容，有設(shè)置請(qǐng)求行、設(shè)置請(qǐng)求頭、設(shè)置請(qǐng)求主體這三個(gè)部分。首先是請(qǐng)求行的設(shè)置，前面已經(jīng)提到過了，設(shè)置請(qǐng)求行主要是設(shè)置請(qǐng)求的方式(默認(rèn)為get請(qǐng)求)，請(qǐng)求的url，還有async(是同步還是異步，默認(rèn)值為true也就是異步方式)；請(qǐng)求頭的設(shè)置需要判斷請(qǐng)求方式是什么，如果請(qǐng)求方式是get，那么不需要設(shè)置請(qǐng)求頭，如果請(qǐng)求方式為post，那么需要設(shè)置請(qǐng)求頭；請(qǐng)求主體設(shè)置就是需要傳遞的參數(shù)，在get方式中參數(shù)傳遞是加在請(qǐng)求行的url中的，post方式才寫在請(qǐng)求主體中。下面是一個(gè)post方式的請(qǐng)求發(fā)送過程：
3、下一步就是監(jiān)測(cè)服務(wù)器的響應(yīng)狀態(tài)以及異步對(duì)象的狀態(tài)?！?/p>
我們可以借助onreadystatechange，onreadystatechange是Javascript的事件的一種，其意義在于監(jiān)聽XMLHttpRequest的狀態(tài)。在這里，readyState是指響應(yīng)狀態(tài)，返回XMLHTTP請(qǐng)求的當(dāng)前狀態(tài)，當(dāng)取值為4時(shí)表示請(qǐng)求成功。
監(jiān)測(cè)服務(wù)器的的狀態(tài)是通過status，取值為200表示服務(wù)器響應(yīng)成功。過程如下：
4、在獲取到服務(wù)器的響應(yīng)數(shù)據(jù)之后，不同的數(shù)據(jù)通過不同的方式來解析，常見的有xml和json。
我們先來了解一下xml。XML是一種標(biāo)記語言，很類似HTML，其宗旨是用來傳輸數(shù)據(jù)，具有自我描述性（固定的格式的數(shù)據(jù)），如：
xml的語法規(guī)則為：
a) 必須有一個(gè)根元素
b) 不可有空格、不可以數(shù)字或.開頭、大小寫敏感
c) 不可交叉嵌套
d) 屬性雙引號(hào)（瀏覽器自動(dòng)修正成雙引號(hào)了）
e) 特殊符號(hào)要使用實(shí)體
f) 注釋和HTML一樣
g) 雖然可以描述和傳輸復(fù)雜數(shù)據(jù)，但是其解析過于復(fù)雜并且體積較大，所以實(shí)現(xiàn)開發(fā)已經(jīng)很少使用了。
JSON：即 JavaScript Object Notation，另一種輕量級(jí)的文本數(shù)據(jù)交換格式，獨(dú)立于語言。語法規(guī)則：
a) 數(shù)據(jù)在 名稱/值 對(duì) 中
b) 數(shù)據(jù)由逗號(hào)分隔(最后一個(gè)健/值對(duì)不能帶逗號(hào))
c) 花括號(hào)保存對(duì)象,方括號(hào)保存數(shù)組
d) 名稱和值都需要使用雙引號(hào)包含
JSON的解析：JSON數(shù)據(jù)在不同語言進(jìn)行傳輸時(shí)，類型為字符串，不同的語言各自也都對(duì)應(yīng)有解析方法，需要解析完成后才能讀取。
a) Javascript 解析方法
JSON.parse()：從字符串解析出json對(duì)象
JSON.stringify()：從json對(duì)象解析出字符串
JSON兼容處理json2.js
b) PHP解析方法
json_encode()：對(duì)變量進(jìn)行 JSON 編碼，返回 value 值的 JSON 形式
json_decode()：對(duì) JSON 格式的字符串進(jìn)行編碼 ，它接受一個(gè) JSON 格式的字符串并且把它轉(zhuǎn)換為 PHP 變量
總結(jié)：JSON體積小、解析方便且高效，在實(shí)際開發(fā)成為首選。
了解了這兩中數(shù)據(jù)傳輸?shù)姆绞街?，我們就可以以不同的方式來解析從?shù)據(jù)庫中獲取的數(shù)據(jù)了。需要根據(jù)響應(yīng)報(bào)文中的響應(yīng)頭中的Content-type屬性來確定采用哪種方式，實(shí)現(xiàn)如下：
getResponseHeader方法是獲取響應(yīng)報(bào)文中指定屬性的值，在數(shù)據(jù)進(jìn)行相應(yīng)處理之后前臺(tái)再來決定如何渲染出結(jié)果。這種處理大部分都是字符串的拼接，這種過程很繁瑣，我們可以借助模板引擎來幫我們做這種事情。
前面提了這么多，其實(shí)在jQuery中已經(jīng)幫我們考慮好了上面這些問題，jQuery封裝了一個(gè)ajax方法。介紹如下：
a) $.ajax({}) 可配置方式發(fā)起Ajax請(qǐng)求
b) $.get() 以GET方式發(fā)起Ajax請(qǐng)求
c) $.post() 以POST方式發(fā)起Ajax請(qǐng)求
d) $('form').serialize() 序列化表單（即格式化key=val&key=val）
e) 參數(shù)說明：
url :接口地址
type :請(qǐng)求方式(get/post)
timeout : 要求為Number類型的參數(shù)，設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）
dataType: 服務(wù)器返回格式
data: 發(fā)送請(qǐng)求數(shù)據(jù)
beforeSend: 要求為Function類型的參數(shù)，發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請(qǐng)求.
success: 成功響應(yīng)后調(diào)用
error: 錯(cuò)誤響應(yīng)時(shí)調(diào)用
complete: 響應(yīng)完成時(shí)調(diào)用（包括成功和失?。?/p>