低階介面:jQuery.ajaxTransport()

(PS:這篇文章是官網 1.9版 API文件的非專業翻譯+個人意見,並且重新排版過)

低階介面:jQuery.ajaxTransport()

建立一個物件用以負責Ajax資料的實際傳輸

(維克:每個ajax都會需要一個傳輸物件實例,我們可以藉由此方法來建立這個傳輸物件,當然也可以使用預設的。)

語法:

jQuery.ajaxTransport( dataType, handler(options, originalOptions, jqXHR) )
//version added: 1.5
  • dataType
    Type: String
    用來定義資料型別的字串。
  • handler(options, originalOptions, jqXHR)
    Type: Function()
    處理函式,使用第一個參數所提供的資料型別傳回新的傳輸(transport )物件。

傳輸(transport )物件提供兩個方法,send與abort,這兩個方法在$.ajax()的內部使用以發出請求。傳輸(transport )物件是用來強化 $.ajax() 的最高等方法,而且應該只有在前置過濾器(prefilters)與轉換器(converters)不足以滿足需求時才使用的手段。

因為每個請求需要屬於自己的傳輸物件實例,傳輸物件並不能直接註冊。因此,你應該提供一個用來傳回傳輸物件的函式來做為代替。

(維克:就如開頭所提的,每個Ajax需要都需要一個傳輸物件實例,但是實際上並無法註冊一個物件實例讓ajax請求發生時使用,因此我們使用ajaxTransport()來註冊了一個函式,當ajax請求的資料型別符合ajaxTransport()第一個參數時,會呼叫其第二個參數,也就是我們註冊的處理函式,我們用這個函式的返回值來產生一個傳輸物件實例來讓ajax請求使用。)

傳輸物件的工廠方法是使用 $.ajaxTransport()來註冊。一個典型的註冊看起來像是這樣:

$.ajaxTransport(function( options, originalOptions, jqXHR ) {<
  if( /* transportCanHandleRequest 傳輸物件能夠處理的請求*/ ) {
    return {  //維克:傳回傳輸物件,該物件包含了send與abort方法
      send: function( headers, completeCallback ) {
        // Send code
      },
      abort: function() {
        // Abort code
      }
    };
  }
});

參數:

  • options :請求選項 (維克: 關於option 請參考:jQuery.ajaxSetup()
  • originalOptions :提供給ajax方法的選項,未經修改,因此不包含ajaxSettings的預設值。(看不懂請參考:jQuery.ajaxPrefilter() 的參數options與originalOptions)
  • jqXHR: 是請求的jqXHR物件
  • headers:傳輸物件可以傳送的請求頭的(鍵- 值)物件,如果它支持的話。
  • completeCallback :回呼函式,用來通知ajax請求完成。

完成時的回呼函式(completeCallback)長這樣子:

function( status, statusText, responses, headers ) {}

參數:

  • status:回應的HTTP狀態碼,像是200代表典型的成功,或是404代表資源未找到。
  • statusText :回應的狀態本文。
  • responses (可選擇的) :一個包含(資料型別/值)的物件,該物件包含了所有傳輸物件能提供的格式的回應。(例如一個原生的XMLHttpReques物件會設定回應為{ xml: XMLData, text: textData }以作為XML文件的回應。
  • headers (可選的) :一個包含了所有回應頭的字串,假如傳輸物件有存取它們的話。(類似於XMLHttpRequest.getAllResponseHeaders()提供的)。
$.ajaxTransport( "script", function( options, originalOptions, jqXHR ) {
  // 只有在script請求時會被呼叫
});

下面的例子展示出如何實現一個最小的影像傳送:

$.ajaxTransport( "image", function( s ) {
  if ( s.type === "GET" && s.async ) {
    var image;
    return {
      send: function( _ , callback ) {
        image = new Image();
        function done( status ) {
          if ( image ) {
            var statusText = ( status === 200 ) ? "success" : "error",
              tmp = image;
            image = image.onreadystatechange = image.onerror = image.onload = null;
            callback( status, statusText, { image: tmp } );
          }
        }
        image.onreadystatechange = image.onload = function() {
          done( 200 );
        };
        image.onerror = function() {
          done( 404 );
        };
        image.src = s.url;
      },
      abort: function() {
        if ( image ) {
          image = image.onreadystatechange = image.onerror = image.onload = null;
        }
      }
    };
  }
});

(維克:如何運作:

1.使用$.ajaxTransport來註冊一個回呼函式,當ajax型別為"image"時會呼叫該回呼函式。

2.回呼函式的參數s其實就是上面提到的option

3.當選項的type為"GET",並且擁有async屬性時傳回一物件並設定該物件的send與abort方法,該物件即為傳輸物件。)

處理客製化資料型別:

jQuery Ajax實現了一組標準的資料型別,像是text,json,xml與html。

使用 $.ajaxSetup()選項中的轉化器選項(converters option)來增強或是修改$.ajax()所使用的資料型別轉換策略。

未被最小化的jQuery原始碼本身包含了預設轉換器的列表,可以有效的說明它們如何被使用:

// List of data converters
// 1) Key format is "source_type destination_type"
//    (a single space in-between)
// 2) The catchall symbol "*" can be used for source_type
converters: {
  // Convert anything to text
  "* text": window.String,
  // Text to html (true = no transformation)
  "text html": true,
  // Evaluate text as a json expression
  "text json": jQuery.parseJSON,
  // Parse text as xml
  "text xml": jQuery.parseXML
}

當你使用$.ajaxSetup()指定一個全局轉換器選項,或是在每一次$.ajax()呼叫時指定,物件將會映射到預設的轉換器,覆寫你指定的,而留下未動過的選項。(維克:每一次的$.ajax()呼叫都會使用預設的選項,但是你可以指定修改某些選項,這些選項會覆蓋預設的選項,而未指定的選項則使用原本預設的。)

例如,下面的jQuery原始碼使用$.ajaxSetup()為"text script"新增一個轉換器。

jQuery.ajaxSetup({
  accepts: {
    script: "text/javascript, application/javascript"
  },
  contents: {
    script: /javascript/
  },
  converters: {
    "text script": jQuery.globalEval
  }
});
 
 

  按個讚!~支持本站!~

FB推薦載入中