1. 程式人生 > >Ajax的全面總結

Ajax的全面總結

Ajax 的全面總結

Ajax在前端開發中有著舉足輕重的地位,關於Ajax的使用和注意事項一直是一個重要的話題,藉此機會,本文希望對Ajax做一個全面的總結,徹底揭開Ajax的神祕面紗。

一.什麼是Ajax

Ajax(Asynchronous JavaScript and XML),可以理解為JavaScript執行非同步網路請求。通俗的理解的話就是,如果沒有Ajax技術,改變網頁的一小部分(哪怕是一行文字、一張圖片)都需要重新載入一次整個頁面,而有了Ajax之後,就可以實現在網頁不跳轉不重新整理的情況下,在網頁後臺提交資料,部分更新頁面內容。

二.Ajax的原生寫法

1.XMLHttpRequest物件

XMLHttpRequest 物件用於在後臺與伺服器交換資料,能夠在不重新載入頁面的情況下更新網頁,在頁面已載入後從伺服器請求資料,在頁面已載入後從伺服器接收資料,在後臺向伺服器傳送資料。所以XMLHttpRequest物件是Ajax技術的核心所在。

2.實現流程

建立 XMLHttpRequest物件——>開啟請求地址,初始化資料——>傳送請求資料——>監聽回撥函式狀態——>收到伺服器返回的應答結果。

下面用具體的程式碼進行解釋:

  1. var xmlhttp;

  2. function loadXMLDoc(url)

  3. {

  4. xmlhttp=null;

  5. if (window.XMLHttpRequest)

  6.  {// code for all new browsers

  7.  xmlhttp=new XMLHttpRequest();//在這裡建立 XMLHttpRequest物件

  8.  }

  9. else if (window.ActiveXObject)

  10.  {// code for IE5 and IE6

  11.  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  12.  }

  13. if (xmlhttp!=null)

  14.  {

  15.  xmlhttp.open("GET",url,true); //請求的方式和請求地址

  16.  xmlhttp.send(null);//傳送請求

  17.  xmlhttp.onreadystatechange=state_Change;//監聽回撥函式

  18.  }

  19. else

  20.  {

  21.  alert("Your browser does not support XMLHTTP.");

  22.  }

  23. }

  24. function state_Change() //這裡是回撥函式

  25. {

  26. if (xmlhttp.readyState==4&&xmlhttp.status==200)

  27.     //當滿足這兩個條件時表示請求成功,完成響應 4 = "loaded", 200 = OK  

  28.  {

  29.    var data=xmlhttp.responseText; //拿到伺服器返回的資料

  30.        // ...our code here...在這裡進行資料返回後的操作

  31.  }else

  32.    {

  33.    alert("Problem retrieving XML data");

  34.    }

  35. }

3.原生寫法中的注意點

(1).open() 的第三個引數中使用了 "true",該引數規定請求是否非同步處理,預設是非同步。True 表示指令碼會在 send() 方法之後繼續執行,而不等待來自伺服器的響應。

(2).關於readyState

(3).關於status 由伺服器返回的 HTTP 狀態程式碼,200 表示成功,而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。(後面會有http狀態碼的詳細解讀)

三.JQuery中的Ajax

JQuery對原生Ajax做了很好的封裝,使用起來非常簡單方便,具體的很多方法如 $.ajax,$.post, $.get, $.getJSON等能根據不同需要進行呼叫,寫法更加簡潔,但是為了兼顧各個方法在這裡我以一個通用的方法 $.ajax為例做一個簡單的解析,按照下面的模式寫好各個引數,就能成功進行Ajax的請求了,可能在實際中使用 $.post, $.get 這兩個方法使用比較多,但是解$.ajax 這個通用的方法能對封裝原理有很好的認識。

  1. $.ajax({

  2.       type:   //資料的提交方式:get和post

  3.       url:    //請求地址

  4.       async:   //是否支援非同步重新整理,預設是true

  5.       data:    //需要提交的資料

  6.       dataType:   //伺服器返回資料的型別,例如xml,String,Json等

  7.       success:function(data){

  8.       }    //請求成功後的回撥函式,引數data就是伺服器返回的資料

  9.       error:function(data){

  10.       }   //請求失敗後的回撥函式,根據需要可以不寫,一般只寫上面的success回撥函式

  11.    })

四.GET or POST?

作為Ajax最常用的兩種資料提交方式,GET和POST有著自己的特點和適用場景,正確區分GET和POST的不同並根據實際需要進行選用在開發中十分重要,簡單但是關鍵

先上一張GET 和 POST的比較圖,從這張圖中可以看出兩者之間的差別:

從表格中拎出關鍵點: 1.傳遞資料的方式不同:get是直接把請求資料放在url的後面,是可見的,post的請求資料不會顯示在url中,是不可見的。 2.資料長度和資料型別的差異:get有資料長度的的限制,且資料型別只允許ASCII字元,post在這兩方面都沒有限制。 3.安全性的差異:get不安全,post更安全。

由此得出的兩者的使用場景:get使用較方便,適用於頁面之間非敏感資料的簡單傳值,post使用較為安全,適用於向伺服器傳送密碼、token等敏感資料。

五.success和complete的區別

JQuery封裝的Ajax回撥函式中,success、error、complete是最常用的三個,其中,success和error很好區別,一個是請求成功呼叫的,另一個是請求失敗呼叫的,從字面上就可以理解。但是success和complete容易混淆,在這裡特別做一個說明:

success:請求成功後回撥函式。

complete:請求完成後回撥函式 (請求成功或失敗時均呼叫)。

注意到括號裡面了嗎,沒錯,區別就在於complete只要請求完成,不論是成功還是失敗均會呼叫。也就是說如果呼叫了success,一定會呼叫complete;反過來呼叫了complete,不一定會呼叫success。(狀態碼404、403、301、302...都會進入complete,只要不出錯就會呼叫)

六.XML -> JSON

Ajax中的是 "x" 指的就是XML。

xml:可擴充套件標記語言,標準通用標記語言的子集,是一種用於標記電子檔案使其具有結構性的標記語言。

xml作為一種資料互動格式,廣泛用在計算機領域,然而,隨著json的發展,json以其明顯的優勢已經漸漸取代了xml成為現在資料互動格式的標準,所以在這裡,想強調的是,json現在是主流的資料互動格式,前後端的互動標準,無論是前端提交給後臺的資料,還是後臺返回給前端的資料,都最好統一為json格式,各自接收到資料後再解析資料即可供後續使用。所以 "Ajax" 實際上已經發展為 "Ajaj"

七.JSON和JSONP

json 和 jsonp 看起來只相差了一個 “p” ,然而實際上根本不是一個東西,千萬別以為是差不多的兩個概念。

json:(JavaScript Object Notation, JS 物件標記) 是一種輕量級的資料交換格式。

jsonp:一種藉助 <script> 元素解決主流瀏覽器的跨域資料訪問問題的方式。

八.Ajax跨域訪問

ajax很好,但不是萬能的,ajax的請求與訪問同樣會受到瀏覽器同源策略的限制,不能訪問不同主域中的地址。所以,為了解決這一問題,實現跨域訪問,有很多種方式,上述提到的jsonp就是一種流行的方式,還有其他一些方式,我在這裡就不展開說了,只是想說明ajax的使用也是有條件的,任何技術的實現都不會是沒有限制的。跨域訪問時一個很重要的知識點,之前專門寫過一篇關於跨域訪問的總結,還挺詳細的,可以移步檢視: javascript中實現跨域的方式總結

九.再議HTTP狀態碼

前面提到的"200"、"404"只是http狀態碼中常見的兩個,當瀏覽者訪問一個網頁時,瀏覽者的瀏覽器會向網頁所在伺服器發出請求。當瀏覽器接收並顯示網頁前,此網頁所在的伺服器會返回一個包含HTTP狀態碼的資訊頭(server header)用以響應瀏覽器的請求。

需要掌握的常見http狀態碼大致有以下一些:

  1. 101:切換協議,伺服器根據客戶端的請求切換協議

  2. **200:請求成功。一般用於GET與POST請求**

  3. **301:永久重定向**

  4. **302:臨時重定向**

  5. 303:與301類似。使用GET和POST請求檢視

  6. **304:請求資源未修改,使用快取**

  7. 307:與302類似。使用GET請求重定向

  8. **404:客戶端請求失敗**

  9. 408:請求超時

  10. **500:內部伺服器錯誤,無法完成請求**

  11. 505:伺服器不支援請求的HTTP協議的版本,無法完成處理

十.不可忽視的HTTP標頭檔案

http請求中的一個重要關注點就是請求頭和響應頭的內容,從這兩個標頭檔案中可以看出很多東西,當我們用傳送一個ajax請求的時候,如果沒有達到預期的效果,那麼就需要開啟瀏覽器的除錯工具,從NetWork中找到相應的ajax請求,再通過檢視請求頭和響應頭的資訊,大體會知道這次請求的結果是怎麼樣的,結合響應的主體內容,可以很快找到問題。所以學會看http的標頭檔案資訊是前端開發中必須掌握的一個技能,下面就來看看具體的標頭檔案資訊。

首先隨便上一張sf中的完成一個搜尋結果的http請求,可以從圖中的右側清楚看到請求頭和響應頭的內容,包括了很多個欄位資訊,這些欄位資訊就是我們需要掌握的知識點,下面挑出其中的重點欄位進行分析。

1.請求頭資訊:

  1. Accept:客戶端支援的資料型別

  2. Accept-Charset:客戶端採用的編碼

  3. Accept-Encoding:客戶端支援的資料壓縮格式

  4. Accept-Language:客戶端的語言環境

  5. Cookie:客服端的cookie

  6. Host:請求的伺服器地址

  7. Connection:客戶端與服務連線型別

  8. If-Modified-Since:上一次請求資源的快取時間,與Last-Modified對應

  9. If-None-Match:客戶段快取資料的唯一標識,與Etag對應

  10. Referer:發起請求的源地址。

2.響應頭資訊:

  1. content-encoding:響應資料的壓縮格式。

  2. content-length:響應資料的長度。

  3. content-language:語言環境。

  4. content-type:響應資料的型別。

  5. Date:訊息傳送的時間

  6. Age:經過的時間

  7. Etag:被請求變數的實體值,用於判斷請求的資源是否發生變化

  8. Expires:快取的過期時間

  9. Last-Modified:在伺服器端最後被修改的時間

  10. server:伺服器的型號

3.兩者都可能出現的訊息

Pragma:是否快取(http1.0提出) Cache-Control:是否快取(http1.1提出)

4.跟快取相關的欄位

(1) 強制快取 expire 和 cache-control

(2) 對比快取 Last-Modified 和 If-Modified-Since Etag 和 If-None-Match

十一.Ajax的優缺點

1.優點:

  1. 頁面無重新整理,在頁面內與伺服器通訊,減少使用者等待時間,增強了使用者體驗。

  2. 使用非同步方式與伺服器通訊,響應速度更快。

  3. 可以把一些原本伺服器的工作轉接到客戶端,利用客戶端閒置的能力來處理,減輕了伺服器和頻寬的負擔,節約空間和寬頻租用成本。

  4. 基於標準化的並被廣泛支援的技術,不需要下載外掛或者小程式。

2.缺點:

  1. 無法進行操作的後退,即不支援瀏覽器的頁面後退。

  2. 對搜尋引擎的支援比較弱。

  3. 可能會影響程式中的異常處理機制。

  4. 安全問題,對一些網站攻擊,如csrf、xxs、sql注入等不能很好地防禦。