jquery jsonp請求錯誤處理

標籤：.com   利用   called   utils   jquer   xmlhttp   error:   方便   follow   

jQuery將ajax方法進行了封裝，jsonp可以輕鬆實現跨域請求。

$.ajax({type: ‘GET‘, url: "<%= SysUtils::TASK_CENTER_URL %>/all_tasks_h/verbose",          async: false,          dataType: "jsonp",          jsonp: "callback",//傳遞給請求處理常式或頁面的，用以獲得jsonp回呼函數名的參數名(一般預設為:callback)          timeout: 10,          jsonpCallback:"flightHandler",          success: function (msg) {          if(msg){              $(‘#main-content‘).text(JSON.stringify(msg));          }else{              $("#main-content").text("未返回資料，請勿頻繁重新整理"); } },
          error: function(jqXHR,textStatus){
         var error_info = $(‘<div class="alert alert-danger">串連失敗，請勿頻繁重新整理，如需協助請聯絡管理員</div>‘); 
        $("#main-content").empty().append(error_info); }
});

上面的方法正常的情況下可以執行，但是雖然瀏覽器終端報出錯誤(404或其他網路錯誤)，但你的error回調卻沒有被執行!?如果出錯的情況下，error回調確沒有執行。

我們仔細看看ajax方法的文檔，在它error回調說明的最後有一句話：

Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.

這就說明在調用跨域的指令碼及jsonp請求時，這個錯誤將不會被執行，並強調指出這個error是一個 Ajax Event.

 其實，嚴格而講jsonp不是ajax,ajax是通過XMLHttpRequest對象發送非同步請求，而jsonp則是利用js標籤天生具備的跨域能力來實現跨域資源訪問。也就是說，雖然它的名字叫JSONP（JSON with Padding），但它底層是通過js標籤實現的，它跟json以及普通非同步請求關係都不大，jquery之所以把jsonp請求放到ajax方法裡面，只是為了讓api更方便調用而已。 （JSONP的詳細描述可以查看WIKI，或者google）

那怎麼做才能使JSONP的error回調被執行呢？

有兩個方法，方法一：添加timeout參數。

$.ajax({  url: ‘<%= SysUtils::TASK_CENTER_URL%>/all_tasks_h/verbose‘, 
  type: ‘GET‘,
  dataType: ‘jsonp‘, // dataType為jsonp 
  timeout: 5000, // 添加timeout參數  
  success: function(data) { $(‘.result‘).text(JSON.stringify(data)); }, 
  error: function(jqXHR, textStatus) { 
   // 此時textStatus為‘timeout’ 
   $(‘#main-content‘).text(‘error‘); alert(‘JSONP error!‘); 
  } 
});

 

添加timeout參數後，雖然JSONP請求本身的錯誤沒有被捕獲，但是最終會因為逾時而執行error回調。

 

那還有沒有方法使error回調在JSONP錯誤發生時就執行呢？

方法二出場：使用jquery jsonp外掛程式 - https://github.com/jaubourg/jquery-jsonp

以下為常見的jqeury jsonp外掛程式調用代碼:

$.jsonp({

url: ‘<%= SysUtils::TASK_CENTER_URL%>/all_tasks_h/verbose‘, 
callbackParameter: "callback", 
timeout: 5000, 
error: function(xOptions, textStatus) { 
// 錯誤發生時，立即執行 
$(‘.result‘).text(‘error‘); 
alert(‘JSONP error!‘); 
}, 
success: function(data) { 
   $(‘#main-content‘).text(JSON.stringify(data)); 
  }
});

 

使用jsonp外掛程式，能夠在錯誤發生時立即執行error回調，並且還附帶如’資料過濾’等功能，更多詳細介紹請查看它的首頁。

以上。

jquery jsonp請求錯誤處理