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

面向對象

DOM事件

異步交互ajax

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

通常前端程序員關于AJAX的掌握僅僅停留在會用AJAX發送請求，將得到的數據渲染到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;    //這里是服務器端返回的數據
    }
}
xhr.send(null);    //如果需要向服務器發送數據，則寫入key=value&key=value形式的字符串

jQuery寫法：

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

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

面試題：當你在瀏覽器的地址欄中輸入一個網址，到瀏覽器呈現這個網頁中的內容，中間都經歷了哪些事情？

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

Request請求階段

客戶端首先通過域名，到DNS服務器上，找到服務器對應的外網IP地址

通過外網IP地址，找到對應的項目服務器

通過端口號，在服務上找到對應的項目資源文件目錄（因為發布項目的時候,已經把項目目錄和項目端口號對應了）

Response響應階段

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

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

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

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

URI：統一資源標識符

URL：統一資源定位符

URN：統一資源名稱

URI=URL+URN

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

HTTP / HTTPS / FTP：傳輸協議

瀏覽器默認使用HTTP，但網站可以進行重定向使用HTTPS

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

HTTPS：傳輸通道經過SSL加密HTTP，和支付有關的網站基本都是HTTPS傳輸協議

FTP：資源文件傳輸協議，經常應用于對服務器資源文件的管理（上傳和下載）

域名

一級域名：www.qq.com

二級域名：sport.qq.com

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

端口號

80：HTTP默認

443：HTTPS默認

21：FTP默認

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

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

/student/index.html 請求的是當前項目student文件夾下的index.html文件

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

問號傳參

?key=value&key=value...

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

哈希值（HASH）

#video

一般用于錨點定位或者實現頁面的路由切換

HTTP報文：客戶端傳遞給服務器端的內容以及服務器返回給客戶端的內容統稱為報文

起始行：請求起始行、響應起始行

首部（頭）：通用頭、請求頭、響應頭、自定義（請求/響應）頭

主體：請求主體、響應主體

客戶端都可以通過哪些方式把內容傳遞給服務器呢？

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

通過設置請求頭信息，把內容傳遞給服務器（請求頭：客戶端設置/服務器端獲取）

通過請求主體把信息傳遞給服務器（請求主體：客戶端設置/服務器端獲取）

服務器端如何把內容返回給客戶端？

通過響應頭把信息返回給客戶端（響應頭：服務器端設置/客戶端獲取）

通過響應主體把信息返回給客戶端（響應主體：服務器端設置/客戶端獲取）

實際上關于網絡協議的知識點遠不止這些，但是用于理解AJAX以及前后端交互已經足夠了，下面便可以對AJAX進行深入地理解了。

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

var xhr=new XMLHttpRequest;

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

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

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

設置同步異步：默認TRUE異步，設置為FALSE為同步

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

3.監聽AJAX狀態的改變，實現不同的業務操作

0：UNSENT 未發送

1：OPENED 已打開，就是已經執行完成第二步操作了

2：HEADERS_RECEIVED 客戶端已經接收到服務器返回的響應頭信息

3：LOADING 服務器返回的主體內容正在傳輸中

4：DONE 響應主體內容已經被客戶端接收

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

xhr.status：HTTP狀態碼，通過狀態碼可以知道當前HTTP事務是否成功，以及失敗的原因

2開頭：代表成功

200：OK 請求已成功

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

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

302：Move temporarily 在新版本HTTP協議中，它代表臨時轉移（在之前的版本中代表臨時重定向，新版本中307代表臨時重定向） => "服務器負載均衡"

304：Not Modified 讀取的是緩存中的數據（網站性能優化的一個特別重要的手段：我們一般會把靜態的資源文件CSS/JS/IMG做304緩存）

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

400：Bad Request 請求參數錯誤

401：Unauthorized 無權訪問

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

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

413：Request Entity Too Large 客戶端傳遞給服務器的內容超過了服務器愿意接收的范圍

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

500：Internal Server Error 服務器的未知錯誤

503：Service Unavailable 服務器超負荷

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

xhr.response：獲取響應主體內容（一般不用）

xhr.responseText：獲取響應主體內容，而且獲取的內容是文本格式（字符串）

xhr.responseXML：獲取響應主體內容是XML格式（XML文檔）

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

xhr.timeout：設置AJAX請求的超時時間，如果當前請求超過這個時間，代表超時，AJAX請求結束，并且會觸發ontimeout事件

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

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

編碼解碼方式：

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

encodeURI / decodeURI：按照UNICODE編碼解碼

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

4.發送AJAX請求，AJAX請求這件事從執行SEND后才開始（之前都是在做準備），當readState===4的時候這件事結束；
SEND方法中寫的內容就是客戶端通過請求主體傳遞給服務器的內容，不想通過請求主體傳遞內容寫null

xhr.send(null);

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