JavaScript中幾個重要的知識點（3） ---- Ajax

JavaScript中幾個最重要的大知識點

1. 面向對象

2. DOM事件

3. 異步交互ajax

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請求階段

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

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

  3. 經過端口號，在服務上找到對應的項目資源文件目錄（由於發佈項目的時候,已經把項目目錄和項目端口號對應了）

• Response響應階段

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

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

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

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

• URI：統一資源標識符

• URL：統一資源定位符

• URN：統一資源名稱

• URI=URL+URN

上述的一個完整的URI能夠分6部分，前3部分爲URL，後3部分爲URN

1. HTTP / HTTPS / FTP：傳輸協議

   • 瀏覽器默認使用HTTP，但網站能夠進行重定向使用HTTPS

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

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

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

2. 域名

   • 一級域名：www.qq.com

   • 二級域名：sport.qq.com

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

3. 端口號

   • 80：HTTP默認

   • 443：HTTPS默認

   • 21：FTP默認

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

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

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

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

5. 問號傳參

   • ?key=value&key=value...

   • 客戶端能夠經過問號傳遞參數的方式,把一些信息傳遞給服務器端

6. 哈希值（HASH）

   • #video

   • 通常用於錨點定位或者實現頁面的路由切換

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

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

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

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

1. 客戶端均可以經過哪些方式把內容傳遞給服務器呢？

   • 請求URL地址後面的問號傳參（很經常使用）

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

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

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

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

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

實際上關於網絡協議的知識點遠不止這些，可是用於理解AJAX以及先後端交互已經足夠了，下面即可以對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請求完成，估計你對先後端交互也有一個大體的瞭解了。