ajax請求原理及jquery $.ajax封裝全解析

1、ajax原理：


Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。要清楚這個過程和原理，咱們必須對 XMLHttpRequest有所瞭解。

　XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

  　因此咱們先從XMLHttpRequest講起，來看看它的工做原理。

  　首先，咱們先來看看XMLHttpRequest這個對象的屬性。

  　　它的屬性有：

  　　onreadystatechange  每次狀態改變所觸發事件的事件處理程序。

  　　responseText     從服務器進程返回數據的字符串形式。

  　　responseXML    從服務器進程返回的DOM兼容的文檔數據對象。

  　　status           從服務器返回的數字代碼，好比常見的404（未找到）和200（已就緒）

  　　status Text       伴隨狀態碼的字符串信息

  　　readyState       對象狀態值

　　　　 0 (未初始化) 對象已創建，可是還沒有初始化（還沒有調用open方法）

　　　　 1 (初始化) 對象已創建，還沒有調用send方法

　　　　 2 (發送數據) send方法已調用，可是當前的狀態及http頭未知

　　　　 3 (數據傳送中) 已接收部分數據，由於響應及http頭不全，這時經過responseBody和responseText獲取部分數據會出現錯誤，

　　　　 4 (完成) 數據接收完畢,此時能夠經過經過responseXml和responseText獲取完整的迴應數據

 XMLHttpRequest 請求參數及state status


　　可是，因爲各瀏覽器之間存在差別，因此建立一個XMLHttpRequest對象可能須要不一樣的方法。這個差別主要體如今IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest對象的方法。

如上所示，函數首先檢查XMLHttpRequest的總體狀態而且保證它已經完成（readyStatus= 4），即數據已經發送完畢。而後根據服務器的設定詢問請求狀態，若是一切已經就緒（status= 200），那麼就執行下面須要的操做。

對於XmlHttpRequest的兩個方法，open和send，其中open方法指定了：

a、向服務器提交數據的類型，即post仍是get。

b、請求的url地址和傳遞的參數。

      c、傳輸方式，false爲同步，true爲異步。默認爲true。若是是異步通訊方式( true)，客戶機就不等待服務器的響應；若是是同步方式( false)，客戶機就要等到服務器返回消息後纔去執行其餘操做。咱們須要根據實際須要來指定同步方式，在某些頁面中，可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，然後一個是會覆蓋前一個的，這個時候固然要指定同步方式。

    Send方法用來發送請求。

 

　　知道了XMLHttpRequest的工做流程，咱們能夠看出，XMLHttpRequest是徹底用來向服務器發出一個請求的，它的做用也侷限於此，但它的做用是整個ajax實現的關鍵，由於ajax無非是兩個過程，發出請求和響應請求。而且它徹底是一種客戶端的技術。而XMLHttpRequest正是處理了服務器端和客戶端通訊的問題因此纔會如此的重要。

　　如今，咱們對ajax的原理大概能夠有一個瞭解了。咱們能夠把服務器端當作一個數據接口，它返回的是一個純文本流，固然，這個文本流能夠是XML格式，能夠是Html，能夠是Javascript代碼，也能夠只是一個字符串。這時候，XMLHttpRequest向服務器端請求這個頁面，服務器端將文本的結果寫入頁面，這和普通的web開發流程是同樣的，不一樣的是，客戶端在異步獲取這個結果後，不是直接顯示在頁面，而是先由javascript來處理，而後再顯示在頁面。至於如今流行的不少ajax控件，好比magicajax等，能夠返回DataSet等其它數據類型，只是將這個過程封裝了的結果，本質上他們並無什麼太大的區別。



標準的封裝方法：這個方法通常不用了

function CreateXmlHttp() {
     // 非IE瀏覽器建立XmlHttpRequest對象
     if (window.XmlHttpRequest) {
        xmlhttp =  new XmlHttpRequest();
    }
     // IE瀏覽器建立XmlHttpRequest對象
     if (window.ActiveXObject) {
         try {
            xmlhttp =  new ActiveXObject( " Microsoft.XMLHTTP ");
        }
         catch (e) {
             try {
                xmlhttp =  new ActiveXObject( " msxml2.XMLHTTP ");
            }
             catch (ex) { }
        }
    }
}
2、jquery $.ajax 封裝

jQuery確實是一個挺好的輕量級的JS框架，能幫助咱們快速的開發JS應用，並在必定程度上改變了咱們寫JavaScript代碼的習慣。jQuery.ajax()進行封裝更是方便咱們使用。


1. load( url, [data], [callback] ) ：載入遠程 HTML 文件代碼並插入至 DOM 中。

url (String) : 請求的HTML頁的URL地址。

data (Map) : (可選參數) 發送至服務器的 key/value 數據。

callback (Callback) : (可選參數) 請求完成時(不須要是success的)的回調函數。


2. jQuery. get( url, [data], [callback] )：使用GET方式來進行異步請求

參數：

url (String) :  發送請求的URL地址.

data (Map) : (可選) 要發送給服務器的數據，以 Key/value 的鍵值對形式表示，會作爲QueryString附加到請求URL中。

callback (Function) : (可選) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法)。


3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行異步請求



參數：

url (String) : 發送請求的URL地址.

data (Map) : (可選) 要發送給服務器的數據，以 Key/value 的鍵值對形式表示。

callback (Function) : (可選) 載入成功時回調函數(只有當Response的返回狀態是success纔是調用該方法)。

type (String) : (可選)官方的說明是：Type of data to be sent。其實應該爲客戶端請求的類型(JSON,XML,等等)


4. jQuery.getScript( url, [callback] ) : 經過 GET 方式請求載入並執行一個 JavaScript 文件。

參數
url (String) : 待載入 JS 文件地址。

callback (Function) : (可選) 成功載入後回調函數。


jquery ajax 事件

Ajax請求會產生若干不一樣的事件，咱們能夠訂閱這些事件並在其中處理咱們的邏輯。在jQuery這裏有兩種Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax請求時在方法內定義的，例如：

 $.ajax({
   beforeSend: function(){      //  Handle the beforeSend event
   },
   complete: function(){      //  Handle the complete event
   }    //  ...
 });
全局事件是每次的Ajax請求都會觸發的，它會向DOM中的全部元素廣播，在上面 getScript() 示例中加載的腳本就是全局Ajax事件。全局事件能夠以下定義：

 $( " #loading ").bind( " ajaxSend ", function(){
   $( this).show();
 }).bind( " ajaxComplete ", function(){
   $( this).hide();
 });
或者：

 $( " #loading ").ajaxStart(function(){
   $( this).show();
 });
咱們能夠在特定的請求將全局事件禁用，只要設置下  global 選項就能夠了：

 $.ajax({
   url:  " test.html ",
    global:  false, //  禁用全局Ajax事件.
    //  ...
 });
下面是jQuery官方給出的完整的Ajax事件列表：

ajaxStart (Global Event)
This  event  is broadcast  if an Ajax request  is started and no other Ajax requests are currently running.

beforeSend (Local Event)
This  event, which  is triggered before an Ajax request  is started, allows you to modify the XMLHttpRequest  object (setting additional headers,  if need be.)

ajaxSend (Global Event)
This  global  event  is also triggered before the request  is run.

success (Local Event)
This  event  is only called  if the request was successful (no errors  from the server, no errors with the data).

ajaxSuccess (Global Event)
This  event  is also only called  if the request was successful.

error (Local Event)
This  event  is only called  if an error occurred with the request (you can never have both an error and a success callback with a request).

ajaxError (Global Event)
This  global  event behaves the same  as the local error  event.

complete (Local Event)
This  event  is called regardless of  if the request was successful, or not. You will always receive a complete callback, even  for synchronous requests.

ajaxComplete (Global Event)
This  event behaves the same  as the complete  event and will be triggered every time an Ajax request finishes.

ajaxStop (Global Event)
This  global  event  is triggered  if there are no more Ajax requests being processed.