jquery jsonp請求錯誤處理

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回調，並且還附帶如’數據過濾’等功能，更多詳細介紹請查看它的主頁。

以上。