首頁 > web前端 > js教程 > 解決jQuery使用JSONP時產生的錯誤_jquery

解決jQuery使用JSONP時產生的錯誤_jquery

WBOY
發布: 2016-05-16 15:28:06
原創
1348 人瀏覽過

什麼是域,簡單來說就是協定 網域名稱或位址 連接埠,3者只要有任何一個不同就表示不在同一個網域。跨域,就是在一個域中存取另一個域的資料。

如果只是載入另一個網域的內容,而不需要存取其中的資料的話,跨域是很簡單的,例如使用iframe。但如果需要從另一個網域載入並使用這些資料的話,就會比較麻煩。為了安全性,瀏覽器對這種情況有嚴格的限制,需要在客戶端和服務端同時做一些設定才能實現跨網域請求。

JSONP簡介
JSONP(JSON with Padding)是一種常用的跨域手段,但只支援JS腳本和JSON格式的資料。顧名思義,JSONP是利用JSON作為墊片,從而實現跨域請求的一種技術手段。其基本原理是利用HTML的<script></script>標籤天生可以跨域這一特點,用其加載另一個域的JSON數據,加載完成後會自動運行一個回調函數通知調用者。此過程需要另一個域的服務端支持,所以這種方式實現的跨域並不是任意的。

JQuery對JSONP的支援
JQuery的Ajax物件支援JSONP方式的跨域請求,方法是將crossDomain參數指定為true並且將dataType參數指定為jsonp[1],或使用簡寫形式:getJSON()方法[2]。例如:

// 设置crossDomain和dataType参数以使用JSONP
$.ajax({
 dataType: "jsonp",
 url: "http://www.example.com/xxx",
 crossDomain: true,
 data: {
  
 }
}).done(function() {
 // 请求完成时的处理函数
});

// 使用getJSON
$.getJSON("http://www.example.com/xxx&#63;jsoncallback=&#63;", {
 // 参数
}, function() {
 // 请求完成时的处理函数
});

登入後複製

使用getJSON時,需要在參數中指定jsoncallback=?,這個就是前面所說的回呼函數,JQuery會自動以一個隨機產生的值(回呼函數名)來取代該參數中的問號部分,從而形成jsoncallback=jQueryxxxxxxx這種形式的參數,然後和其他參數一起使用GET方式發出請求。

使用第一種方式時,只要將dataType參數的值指定為jsonp,JQuery就會自動在請求位址後面加上jsoncallback參數,因此無需手動新增。

JQuery跨域請求的缺陷:錯誤處理
跨網域請求可能會失敗,例如對方伺服器的安全設定拒絕接受來自我方的請求(我方不在對方的信任清單中),或網路不通,或對方伺服器已關閉,或要求位址或參數不正確導致伺服器報錯等等。

在JQuery中,當使用ajax或getJSON發送請求後會回傳一個jqXHR物件[3]。該物件實作了Promise協議,所以我們可以使用它的done、fail、always等介面來處理回呼。例如我們可以用在它的fail回呼中進行請求失敗時的錯誤處理:

var xhr = $.getJSON(...);
xhr.fail(function(jqXHR, textStatus, ex) {
  alert('request failed, cause: ' + ex.message);
});
登入後複製

这种方式能够处理“正常的错误”,例如超时、请求被中止、JSON解析出错等等。但它对那些“非正常的错误”,例如网络不通、服务器已关闭等情况的支持并不好。

例如当对方服务器无法正常访问时,在Chrome下你会在控制台看到一条错误信息:

JQuery不会处理该错误,而是选择“静静地失败”:fail回调不会执行,你的代码也不会得到任何反馈,所以你没有处理这种错误的机会,也无法向用户报告错误。

一个例外是在IE8。在IE8中,当网络无法访问时

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板