低階介面:jQuery.ajaxTransport()
- 詳細內容
- 分類:JQuery
- 發佈:2013-10-01, 週二 20:39
- 點擊數:2134
(PS:這篇文章是官網 1.9版 API文件的非專業翻譯+個人意見,並且重新排版過)
低階介面:jQuery.ajaxTransport()
建立一個物件用以負責Ajax資料的實際傳輸
(維克:每個ajax都會需要一個傳輸物件實例,我們可以藉由此方法來建立這個傳輸物件,當然也可以使用預設的。)
語法:
jQuery.ajaxTransport( dataType, handler(options, originalOptions, jqXHR) ) //version added: 1.5
-
dataTypeType: 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 } });
按個讚!~支持本站!~