????：　　最近在學(xué)習(xí)AJAX異步交互，有一個生活中很常見的例子。很多網(wǎng)頁都有登錄注冊頁面，在很久以前，傳統(tǒng)的數(shù)據(jù)驗證是需要等用戶把要填的每一項都填好之后，點擊提交按鈕，數(shù)據(jù)傳輸?shù)胶笈_。如果你的運氣很不好，那么不好意思，頁面給你提示數(shù)據(jù)格式有誤。之前花費很多時間填寫的數(shù)據(jù)在頁面刷新之后都給你清空了，那么你就需要重新一步一步的來填寫數(shù)據(jù)。很明顯，這種用戶體驗非常不好。因此就誕生了一個異步交互的理念，用戶每填

　　最近在學(xué)習(xí)AJAX異步交互，有一個生活中很常見的例子。很多網(wǎng)頁都有登錄注冊頁面，在很久以前，傳統(tǒng)的數(shù)據(jù)驗證是需要等用戶把要填的每一項都填好之后，點擊提交按鈕，數(shù)據(jù)傳輸?shù)胶笈_。如果你的運氣很不好，那么不好意思，頁面給你提示數(shù)據(jù)格式有誤。之前花費很多時間填寫的數(shù)據(jù)在頁面刷新之后都給你清空了，那么你就需要重新一步一步的來填寫數(shù)據(jù)。很明顯，這種用戶體驗非常不好。因此就誕生了一個異步交互的理念，用戶每填寫一項數(shù)據(jù)就自動向后臺進(jìn)行驗證，同時要注意的是當(dāng)前頁面并沒有刷新，只是會局部刷新。

　　先來了解下AJAX的定義：AJAX 全稱為 Asynchronous Javascript And XML。它不是一門的新的語言，而是對現(xiàn)有技術(shù)的綜合利用。本質(zhì)是在HTTP協(xié)議的基礎(chǔ)上以異步的方式與服務(wù)器進(jìn)行通信。異步是指某段程序執(zhí)行時不會阻塞其它程序執(zhí)行，其表現(xiàn)形式為程序的執(zhí)行順序不依賴程序本身的書寫順序，相反則為同步。其優(yōu)勢在于不阻塞程序的執(zhí)行，從而提升整體執(zhí)行效率。要實現(xiàn)異步交互的目的，我們需要借助異步對象XMLHttpRequest來實現(xiàn)。XMLHttpRequest是瀏覽器內(nèi)建對象，用于在后臺與服務(wù)器通信(交換數(shù)據(jù)) ，由此我們便可實現(xiàn)對網(wǎng)頁的部分更新，而不是刷新整個頁面。

　　簡單的理解前后臺的交互，說白了就是六個字，請求、處理、響應(yīng)。瀏覽器與服務(wù)器之間的通信是需要遵守一定的規(guī)則的，也就是通信協(xié)議。常見的通信協(xié)議有：

　　　　a)     HTTP、HTTPS 超文本傳輸協(xié)議

　　　　b)     FTP 文件傳輸協(xié)議

　　　　c)     SMTP 簡單郵件傳輸協(xié)議

　　通信協(xié)議不是這里的重點，我們需要了解的是HTTP 協(xié)議。HTTP 協(xié)議即超文本傳輸協(xié)議，網(wǎng)站是基于HTTP協(xié)議的，例如網(wǎng)站的圖片、CSS、JS等都是基于HTTP協(xié)議進(jìn)行傳輸?shù)?。HTTP協(xié)議是由從客戶機(jī)到服務(wù)器的請求(Request)和從服務(wù)器到客戶機(jī)的響應(yīng)(Response)進(jìn)行了約束和規(guī)范。HTTP 協(xié)議中常見的兩種請求方式是POST、GET，還有幾個不常見的比如PUT、DELETE。

　　客戶端給服務(wù)器發(fā)送請求，也就是請求報文。請求報文的規(guī)范格式為請求行、請求頭、請求主體。如： 

　請求報文行由請求方式，請求的URL和協(xié)議版本組成，如上面第一個標(biāo)記處。

　　請求報文頭包括：

Host：localhost請求的主機(jī)

Cache-Control：max-age=0控制緩存(no-cache| no-store)

Accept：*/* 接受的文檔MIME類型

User-Agent：向訪問網(wǎng)站提供你所使用的瀏覽器類型、操作系統(tǒng)及版本、CPU 類型、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等信息的標(biāo)識. 瀏覽器UA 字串的標(biāo)準(zhǔn)格式為： 瀏覽器標(biāo)識 (操作系統(tǒng)標(biāo)識; 加密等級標(biāo)識; 瀏覽器語言) 渲染引擎標(biāo)識 版本信息

Referer：從哪個URL跳轉(zhuǎn)過來的

Accept-Encoding：可接受的壓縮格式

　　請求報文體即傳遞給服務(wù)端的數(shù)據(jù)。

　　相應(yīng)的，服務(wù)器響應(yīng)也有響應(yīng)報文。其規(guī)范格式為：狀態(tài)行、響應(yīng)頭、響應(yīng)主體。

狀態(tài)行由協(xié)議版本號、狀態(tài)碼和狀態(tài)信息構(gòu)成。

　　響應(yīng)頭包括：

　　Date：響應(yīng)時間

　　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ù)器錯誤

　　客戶端與服務(wù)器在進(jìn)行數(shù)據(jù)傳輸?shù)臅r候都是以字節(jié)形式進(jìn)行的，可以理解成是以文本形式傳輸，這時瀏覽器就需要明確知道該怎么樣來解析這些文本形式的數(shù)據(jù)，MIME（Content-Type）就是明確告知瀏覽器該如何來處理。

　　在了解了客戶端與服務(wù)器的通信協(xié)議之后，我們就可以著手我們的異步數(shù)據(jù)交互實現(xiàn)了。要去和后臺進(jìn)行數(shù)據(jù)驗證，我們可以指揮XMLHttpRequest這個異步對象去幫助我們來實現(xiàn)。

　　1、首先是創(chuàng)建異步對象。

　　　　在高版本的瀏覽器中，可以通過new XMLHttpRequest()來創(chuàng)建，但是在IE低版本(5、6)中則要通過 new ActiveXObject("Microsoft.XMLHTTP") 來創(chuàng)建。兼容性的寫法為：

　　2、異步對象成功創(chuàng)建之后，就是請求的發(fā)送。

　　　　請求發(fā)送需要設(shè)置三部分內(nèi)容，有設(shè)置請求行、設(shè)置請求頭、設(shè)置請求主體這三個部分。首先是請求行的設(shè)置，前面已經(jīng)提到過了，設(shè)置請求行主要是設(shè)置請求的方式(默認(rèn)為get請求)，請求的url，還有async(是同步還是異步，默認(rèn)值為true也就是異步方式)；請求頭的設(shè)置需要判斷請求方式是什么，如果請求方式是get，那么不需要設(shè)置請求頭，如果請求方式為post，那么需要設(shè)置請求頭；請求主體設(shè)置就是需要傳遞的參數(shù)，在get方式中參數(shù)傳遞是加在請求行的url中的，post方式才寫在請求主體中。下面是一個post方式的請求發(fā)送過程：　

　　3、下一步就是監(jiān)測服務(wù)器的響應(yīng)狀態(tài)以及異步對象的狀態(tài)?！?/p>

　　　　我們可以借助onreadystatechange，onreadystatechange是Javascript的事件的一種，其意義在于監(jiān)聽XMLHttpRequest的狀態(tài)。在這里，readyState是指響應(yīng)狀態(tài)，返回XMLHTTP請求的當(dāng)前狀態(tài)，當(dāng)取值為4時表示請求成功。

 監(jiān)測服務(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)     必須有一個根元素

　　　　b)     不可有空格、不可以數(shù)字或.開頭、大小寫敏感

　　　　c)     不可交叉嵌套

　　　　d)     屬性雙引號（瀏覽器自動修正成雙引號了）

　　　　e)     特殊符號要使用實體

　　　　f)      注釋和HTML一樣

　　　　g)     雖然可以描述和傳輸復(fù)雜數(shù)據(jù)，但是其解析過于復(fù)雜并且體積較大，所以實現(xiàn)開發(fā)已經(jīng)很少使用了。

　　JSON：即 JavaScript Object Notation，另一種輕量級的文本數(shù)據(jù)交換格式，獨立于語言。語法規(guī)則：

　　　　　　　　a)     數(shù)據(jù)在 名稱/值 對 中

　　　　　　　　b)     數(shù)據(jù)由逗號分隔(最后一個健/值對不能帶逗號)

　　　　　　　　c)     花括號保存對象,方括號保存數(shù)組

　　　　　　　　d)     名稱和值都需要使用雙引號包含

　　JSON的解析：JSON數(shù)據(jù)在不同語言進(jìn)行傳輸時，類型為字符串，不同的語言各自也都對應(yīng)有解析方法，需要解析完成后才能讀取。

　　　　a)    Javascript 解析方法

　　　　　　  JSON.parse()：從字符串解析出json對象

  　　　　　　JSON.stringify()：從json對象解析出字符串

  　　　　　　JSON兼容處理json2.js

　　　　b)    PHP解析方法

　　　　　　  json_encode()：對變量進(jìn)行 JSON 編碼，返回 value 值的 JSON 形式

  　　　　　　json_decode()：對 JSON 格式的字符串進(jìn)行編碼 ，它接受一個 JSON 格式的字符串并且把它轉(zhuǎn)換為 PHP 變量

　　總結(jié)：JSON體積小、解析方便且高效，在實際開發(fā)成為首選。

　　了解了這兩中數(shù)據(jù)傳輸?shù)姆绞街螅覀兙涂梢砸圆煌姆绞絹斫馕鰪臄?shù)據(jù)庫中獲取的數(shù)據(jù)了。需要根據(jù)響應(yīng)報文中的響應(yīng)頭中的Content-type屬性來確定采用哪種方式，實現(xiàn)如下：

　　getResponseHeader方法是獲取響應(yīng)報文中指定屬性的值，在數(shù)據(jù)進(jìn)行相應(yīng)處理之后前臺再來決定如何渲染出結(jié)果。這種處理大部分都是字符串的拼接，這種過程很繁瑣，我們可以借助模板引擎來幫我們做這種事情。

　　前面提了這么多，其實在jQuery中已經(jīng)幫我們考慮好了上面這些問題，jQuery封裝了一個ajax方法。介紹如下：

　　　　a)     $.ajax({}) 可配置方式發(fā)起Ajax請求

　　　　b)     $.get() 以GET方式發(fā)起Ajax請求

　　　　c)     $.post() 以POST方式發(fā)起Ajax請求

　　　　d)     $('form').serialize() 序列化表單（即格式化key=val&key=val）

　　　　e)     參數(shù)說明：

url :接口地址

type :請求方式(get/post)

timeout : 要求為Number類型的參數(shù)，設(shè)置請求超時時間（毫秒）

dataType: 服務(wù)器返回格式

data: 發(fā)送請求數(shù)據(jù)

beforeSend: 要求為Function類型的參數(shù)，發(fā)送請求前可以修改XMLHttpRequest對象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求.

success: 成功響應(yīng)后調(diào)用

error: 錯誤響應(yīng)時調(diào)用

complete: 響應(yīng)完成時調(diào)用（包括成功和失敗）