摘要：與響應(yīng)不同的是，身份驗證并不能提供任何幫助，而且這個請求也不應(yīng)該被重復(fù)提交。

面向?qū)ο?/p>

DOM事件

異步交互ajax

AJAX是異步的javascript和xml（Asynchronous Javascript And XML）的縮寫，用于網(wǎng)頁局部刷新，提升用戶瀏覽體驗

通常前端程序員關(guān)于AJAX的掌握僅僅停留在會用AJAX發(fā)送請求，將得到的數(shù)據(jù)渲染到DOM中即可，如果看這篇文章的你是出于這個目的，那么下面的兩個代碼示例就可以解決你的問題了。

原生JS寫法：

var xhr=new XMLHttpRequest();
xhr.open("[method]","[url]",[true/false]);    //true為異步，false為同步
xhr.onreadystatechange=function(){
    if(xhr.readystate===4 && xhr.status==200){
        var result=xhr.responseText;    //這里是服務(wù)器端返回的數(shù)據(jù)
    }
}
xhr.send(null);    //如果需要向服務(wù)器發(fā)送數(shù)據(jù)，則寫入key=value&key=value形式的字符串

jQuery寫法：

$.ajax({
    url:"",
    method:"",
    dataType:"json",
    async:true,
    data:null,    //需要向服務(wù)器發(fā)送的數(shù)據(jù)，可以是對象形式
    success:function(data){}    //data為服務(wù)器返回的數(shù)據(jù)
})

本文的重點不在于介紹AJAX寫法，而是AJAX所造成的前后端交互，下面將介紹完整的前后端交互過程以及其中的一些細(xì)節(jié)東西。

面試題：當(dāng)你在瀏覽器的地址欄中輸入一個網(wǎng)址，到瀏覽器呈現(xiàn)這個網(wǎng)頁中的內(nèi)容，中間都經(jīng)歷了哪些事情？

這個面試題粗略地考察了一下前后端交互的知識點，即客戶端和服務(wù)器端的交互模型“HTTP事務(wù)”，這個交互主要包含了以下幾個階段：

Request請求階段

客戶端首先通過域名，到DNS服務(wù)器上，找到服務(wù)器對應(yīng)的外網(wǎng)IP地址

通過外網(wǎng)IP地址，找到對應(yīng)的項目服務(wù)器

通過端口號，在服務(wù)上找到對應(yīng)的項目資源文件目錄（因為發(fā)布項目的時候,已經(jīng)把項目目錄和項目端口號對應(yīng)了）

Response響應(yīng)階段

服務(wù)器端會把客戶端需要請求的資源文件的源代碼，返回給客戶端的瀏覽器

客戶端瀏覽器接收到返回內(nèi)容后，使用不同的代碼解析引擎進行渲染和解析

看到這里，你或許會對上面一些名詞有疑惑，下面對一些細(xì)節(jié)進行詳細(xì)地描述，以幫助你理解以上的交互。

一個完整的URI：https://www.baidu.com:443/xxx...

URI：統(tǒng)一資源標(biāo)識符

URL：統(tǒng)一資源定位符

URN：統(tǒng)一資源名稱

URI=URL+URN

上述的一個完整的URI可以分6部分，前3部分為URL，后3部分為URN

HTTP / HTTPS / FTP：傳輸協(xié)議

瀏覽器默認(rèn)使用HTTP，但網(wǎng)站可以進行重定向使用HTTPS

HTTP：超文本傳輸協(xié)議，客戶端和服務(wù)器端除了傳輸文本以外，還可以傳輸圖片，音視頻等富媒體資源（二進制文件流/BASE64……）

HTTPS：傳輸通道經(jīng)過SSL加密HTTP，和支付有關(guān)的網(wǎng)站基本都是HTTPS傳輸協(xié)議

FTP：資源文件傳輸協(xié)議，經(jīng)常應(yīng)用于對服務(wù)器資源文件的管理（上傳和下載）

域名

一級域名：www.qq.com

二級域名：sport.qq.com

三級域名：kbs.sport.qq.com

端口號

80：HTTP默認(rèn)

443：HTTPS默認(rèn)

21：FTP默認(rèn)

端口號的取值范圍:0-65535之間,端口號被一個項目或程序占用,其它的程序就不能再使用這個端口號了

請求資源文件的路徑和名稱

/student/index.html 請求的是當(dāng)前項目student文件夾下的index.html文件

/index.html 請求的是當(dāng)前項目根目錄下的index.html文件，在不指定請求文件的時候，默認(rèn)請求的資源文件一般都是/index.html或者/default.html（可以在服務(wù)器中配置默認(rèn)的請求文件）

問號傳參

?key=value&key=value...

客戶端可以通過問號傳遞參數(shù)的方式,把一些信息傳遞給服務(wù)器端

哈希值（HASH）

#video

一般用于錨點定位或者實現(xiàn)頁面的路由切換

HTTP報文：客戶端傳遞給服務(wù)器端的內(nèi)容以及服務(wù)器返回給客戶端的內(nèi)容統(tǒng)稱為報文

起始行：請求起始行、響應(yīng)起始行

首部（頭）：通用頭、請求頭、響應(yīng)頭、自定義（請求/響應(yīng)）頭

主體：請求主體、響應(yīng)主體

客戶端都可以通過哪些方式把內(nèi)容傳遞給服務(wù)器呢？

請求URL地址后面的問號傳參（很常用）

通過設(shè)置請求頭信息，把內(nèi)容傳遞給服務(wù)器（請求頭：客戶端設(shè)置/服務(wù)器端獲取）

通過請求主體把信息傳遞給服務(wù)器（請求主體：客戶端設(shè)置/服務(wù)器端獲?。?/p>

服務(wù)器端如何把內(nèi)容返回給客戶端？

通過響應(yīng)頭把信息返回給客戶端（響應(yīng)頭：服務(wù)器端設(shè)置/客戶端獲?。?/p>

通過響應(yīng)主體把信息返回給客戶端（響應(yīng)主體：服務(wù)器端設(shè)置/客戶端獲?。?/p>

實際上關(guān)于網(wǎng)絡(luò)協(xié)議的知識點遠(yuǎn)不止這些，但是用于理解AJAX以及前后端交互已經(jīng)足夠了，下面便可以對AJAX進行深入地理解了。

1.創(chuàng)建一個對象（在IE6以及更低版本的瀏覽器中，不支持XMLHttpRequest這個類，我們需要使用ActiveXObject來處理）

var xhr=new XMLHttpRequest;

2.打開一個URL請求地址（發(fā)送請求前的一些配置）

請求方式：GET系列（GET/DELETE/HEAD）；POST系列（POST/PUT）

請求地址：通過這個地址向服務(wù)器發(fā)送數(shù)據(jù)請求，請求的地址一般都是后臺提供的（API接口文檔）

設(shè)置同步異步：默認(rèn)TRUE異步，設(shè)置為FALSE為同步

xhr.open("GET","URL",true);

3.監(jiān)聽AJAX狀態(tài)的改變，實現(xiàn)不同的業(yè)務(wù)操作

0：UNSENT 未發(fā)送

1：OPENED 已打開，就是已經(jīng)執(zhí)行完成第二步操作了

2：HEADERS_RECEIVED 客戶端已經(jīng)接收到服務(wù)器返回的響應(yīng)頭信息

3：LOADING 服務(wù)器返回的主體內(nèi)容正在傳輸中

4：DONE 響應(yīng)主體內(nèi)容已經(jīng)被客戶端接收

xhr.onreadystatechange=function(){
    if(xhr.readyState===4 && xhr.status===200){
var result=xhr.responseText;
    }
}

xhr.status：HTTP狀態(tài)碼，通過狀態(tài)碼可以知道當(dāng)前HTTP事務(wù)是否成功，以及失敗的原因

2開頭：代表成功

200：OK 請求已成功

3開頭：也代表成功，但是這個成功經(jīng)歷了一些特殊的處理

301：Moved Permanently 在新版本HTTP協(xié)議中，它代表永久轉(zhuǎn)移（在之前的版本中它代表永久重定向）

302：Move temporarily 在新版本HTTP協(xié)議中，它代表臨時轉(zhuǎn)移（在之前的版本中代表臨時重定向，新版本中307代表臨時重定向） => "服務(wù)器負(fù)載均衡"

304：Not Modified 讀取的是緩存中的數(shù)據(jù)（網(wǎng)站性能優(yōu)化的一個特別重要的手段：我們一般會把靜態(tài)的資源文件CSS/JS/IMG做304緩存）

4開頭：代表錯誤，而且一般都是客戶端的錯誤

400：Bad Request 請求參數(shù)錯誤

401：Unauthorized 無權(quán)訪問

403：Forbidden 服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它。與401響應(yīng)不同的是，身份驗證并不能提供任何幫助，而且這個請求也不應(yīng)該被重復(fù)提交。如果這不是一個 HEAD 請求，而且服務(wù)器希望能夠講清楚為何請求不能被執(zhí)行，那么就應(yīng)該在實體內(nèi)描述拒絕的原因。當(dāng)然服務(wù)器也可以返回一個404響應(yīng)，假如它不希望讓客戶端獲得任何信息

404：Not Found 請求的地址不存在

413：Request Entity Too Large 客戶端傳遞給服務(wù)器的內(nèi)容超過了服務(wù)器愿意接收的范圍

5開頭：代表錯誤，而且一般都是服務(wù)器端錯誤

500：Internal Server Error 服務(wù)器的未知錯誤

503：Service Unavailable 服務(wù)器超負(fù)荷

xhr對象中的一些屬性和方法

xhr.response：獲取響應(yīng)主體內(nèi)容（一般不用）

xhr.responseText：獲取響應(yīng)主體內(nèi)容，而且獲取的內(nèi)容是文本格式（字符串）

xhr.responseXML：獲取響應(yīng)主體內(nèi)容是XML格式（XML文檔）

xhr.getResponseHeader([key])：獲取響應(yīng)頭信息

xhr.timeout：設(shè)置AJAX請求的超時時間，如果當(dāng)前請求超過這個時間，代表超時，AJAX請求結(jié)束，并且會觸發(fā)ontimeout事件

xhr.abort()：中斷當(dāng)前AJAX請求，xhr.onabort就是當(dāng)請求被中斷時觸發(fā)的事件

xhr.setRequestHeader([key],[value])：設(shè)置請求頭信息，[value]不能是中文漢字，如果需要傳遞中文漢字，需要先把傳遞的內(nèi)容進行編碼由服務(wù)器進行解碼，例如：xhr.setRequestHeader("ajax",encodeURIComponent("前后端交互"));

編碼解碼方式：

escape / unescape：這種方式經(jīng)常應(yīng)用于客戶端對中文漢字進行編碼（不常用，因為服務(wù)器端大部分語言，除了NODE，其它都不支持這個編碼方式）

encodeURI / decodeURI：按照UNICODE編碼解碼

encodeURIComponent / decodeURIComponent：相對于上面的方法來說可以把特殊字符也進行編碼，而encodeURI只能編碼中文漢字

4.發(fā)送AJAX請求，AJAX請求這件事從執(zhí)行SEND后才開始（之前都是在做準(zhǔn)備），當(dāng)readState===4的時候這件事結(jié)束；
SEND方法中寫的內(nèi)容就是客戶端通過請求主體傳遞給服務(wù)器的內(nèi)容，不想通過請求主體傳遞內(nèi)容寫null

xhr.send(null);

至此，整個AJAX請求完成，估計你對前后端交互也有一個大致的了解了。