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

面向?qū)ο?/p>

DOM事件

異步交互ajax

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

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

原生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ù)，可以是對(duì)象形式
    success:function(data){}    //data為服務(wù)器返回的數(shù)據(jù)
})

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

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

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

Request請(qǐng)求階段

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

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

通過(guò)端口號(hào)，在服務(wù)上找到對(duì)應(yīng)的項(xiàng)目資源文件目錄（因?yàn)榘l(fā)布項(xiàng)目的時(shí)候,已經(jīng)把項(xiàng)目目錄和項(xiàng)目端口號(hào)對(duì)應(yīng)了）

Response響應(yīng)階段

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

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

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

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

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

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

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

URI=URL+URN

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

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

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

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

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

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

域名

一級(jí)域名：www.qq.com

二級(jí)域名：sport.qq.com

三級(jí)域名：kbs.sport.qq.com

端口號(hào)

80：HTTP默認(rèn)

443：HTTPS默認(rèn)

21：FTP默認(rèn)

端口號(hào)的取值范圍:0-65535之間,端口號(hào)被一個(gè)項(xiàng)目或程序占用,其它的程序就不能再使用這個(gè)端口號(hào)了

請(qǐng)求資源文件的路徑和名稱

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

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

問(wèn)號(hào)傳參

?key=value&key=value...

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

哈希值（HASH）

#video

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

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

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

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

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

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

請(qǐng)求URL地址后面的問(wèn)號(hào)傳參（很常用）

通過(guò)設(shè)置請(qǐng)求頭信息，把內(nèi)容傳遞給服務(wù)器（請(qǐng)求頭：客戶端設(shè)置/服務(wù)器端獲?。?/p>

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

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

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

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

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

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

var xhr=new XMLHttpRequest;

2.打開(kāi)一個(gè)URL請(qǐng)求地址（發(fā)送請(qǐng)求前的一些配置）

請(qǐng)求方式：GET系列（GET/DELETE/HEAD）；POST系列（POST/PUT）

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

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

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

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

0：UNSENT 未發(fā)送

1：OPENED 已打開(kāi)，就是已經(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)碼，通過(guò)狀態(tài)碼可以知道當(dāng)前HTTP事務(wù)是否成功，以及失敗的原因

2開(kāi)頭：代表成功

200：OK 請(qǐng)求已成功

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

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

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

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

4開(kāi)頭：代表錯(cuò)誤，而且一般都是客戶端的錯(cuò)誤

400：Bad Request 請(qǐng)求參數(shù)錯(cuò)誤

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

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

404：Not Found 請(qǐng)求的地址不存在

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

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

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

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

xhr對(duì)象中的一些屬性和方法

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請(qǐng)求的超時(shí)時(shí)間，如果當(dāng)前請(qǐng)求超過(guò)這個(gè)時(shí)間，代表超時(shí)，AJAX請(qǐng)求結(jié)束，并且會(huì)觸發(fā)ontimeout事件

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

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

編碼解碼方式：

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

encodeURI / decodeURI：按照UNICODE編碼解碼

encodeURIComponent / decodeURIComponent：相對(duì)于上面的方法來(lái)說(shuō)可以把特殊字符也進(jìn)行編碼，而encodeURI只能編碼中文漢字

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

xhr.send(null);

至此，整個(gè)AJAX請(qǐng)求完成，估計(jì)你對(duì)前后端交互也有一個(gè)大致的了解了。