什么是域，簡單來說就是協(xié)議+域名或地址+端口，3者只要有任何一個不同就表示不在同一個域。跨域，就是在一個域中訪問另一個域的數(shù)據(jù)。

如果只是加載另一個域的內(nèi)容，而不需要訪問其中的數(shù)據(jù)的話，跨域是很簡單的，比如使用iframe。但如果需要從另一個域加載并使用這些數(shù)據(jù)的話，就會比較麻煩。為了安全性，瀏覽器對這種情況有著嚴(yán)格的限制，需要在客戶端和服務(wù)端同時做一些設(shè)置才能實現(xiàn)跨域請求。

JSONP簡介
JSONP（JSON with Padding）是一種常用的跨域手段，但只支持JS腳本和JSON格式的數(shù)據(jù)。顧名思義，JSONP是利用JSON作為墊片，從而實現(xiàn)跨域請求的一種技術(shù)手段。其基本原理是利用HTML的<script>標(biāo)簽天生可以跨域這一特點，用其加載另一個域的JSON數(shù)據(jù)，加載完成后會自動運行一個回調(diào)函數(shù)通知調(diào)用者。此過程需要另一個域的服務(wù)端支持，所以這種方式實現(xiàn)的跨域并不是任意的。

JQuery對JSONP的支持
JQuery的Ajax對象支持JSONP方式的跨域請求，方法是將crossDomain參數(shù)指定為true并且將dataType參數(shù)指定為jsonp[1]，或者使用簡寫形式：getJSON()方法[2]。例如：

// 設(shè)置crossDomain和dataType參數(shù)以使用JSONP
$.ajax({
 dataType: "jsonp",
 url: "http://www.example.com/xxx",
 crossDomain: true,
 data: {
  
 }
}).done(function() {
 // 請求完成時的處理函數(shù)
});

// 使用getJSON
$.getJSON("http://www.example.com/xxx?jsoncallback=?", {
 // 參數(shù)
}, function() {
 // 請求完成時的處理函數(shù)
});

使用getJSON時，需要在參數(shù)中指定jsoncallback=?，這個就是前面所說的回調(diào)函數(shù)，JQuery會自動以一個隨機(jī)生成的值（回調(diào)函數(shù)名）來替換該參數(shù)中的問號部分，從而形成jsoncallback=jQueryxxxxxxx這種形式的參數(shù)，然后和其他參數(shù)一起使用GET方式發(fā)出請求。

使用第一種方式時，只要將dataType參數(shù)的值指定為jsonp，JQuery就會自動在請求地址后面加上jsoncallback參數(shù)，因此無需手動添加。

JQuery跨域請求的缺陷：錯誤處理
跨域請求可能會失敗，比如對方服務(wù)器的安全設(shè)置拒絕接受來自我方的請求（我方不在對方的信任列表中），或者網(wǎng)絡(luò)不通，或?qū)Ψ椒?wù)器已關(guān)閉，或者請求地址或參數(shù)不正確導(dǎo)致服務(wù)器報錯等等。

在JQuery中，當(dāng)使用ajax或getJSON發(fā)送請求后會返回一個jqXHR對象[3]。該對象實現(xiàn)了Promise協(xié)議，所以我們可以使用它的done、fail、always等接口來處理回調(diào)。例如我們可以用在它的fail回調(diào)中進(jìn)行請求失敗時的錯誤處理：

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

這種方式能夠處理“正常的錯誤”，例如超時、請求被中止、JSON解析出錯等等。但它對那些“非正常的錯誤”，例如網(wǎng)絡(luò)不通、服務(wù)器已關(guān)閉等情況的支持并不好。

例如當(dāng)對方服務(wù)器無法正常訪問時，在Chrome下你會在控制臺看到一條錯誤信息：

JQuery不會處理該錯誤，而是選擇“靜靜地失敗”：fail回調(diào)不會執(zhí)行，你的代碼也不會得到任何反饋，所以你沒有處理這種錯誤的機(jī)會，也無法向用戶報告錯誤。

一個例外是在IE8。在IE8中，當(dāng)網(wǎng)絡(luò)無法訪問時，<script>標(biāo)簽一樣會返回加載成功的信息，所以JQuery無法根據(jù)<script>標(biāo)簽的狀態(tài)來判斷是否已成功加載，但它發(fā)現(xiàn)<script>標(biāo)簽“加載成功”后回調(diào)函數(shù)卻沒有執(zhí)行，所以JQuery以此判斷這是一個“解析錯誤”（回調(diào)代碼沒有執(zhí)行，很可能是返回的數(shù)據(jù)不對導(dǎo)致沒有執(zhí)行或執(zhí)行失敗），因此返回的錯誤信息將是“xxxx was not called”，其中的xxxx為回調(diào)函數(shù)的名稱。

也就是說，由于IE8（IE7也一樣）的這種奇葩特性，導(dǎo)致在發(fā)生網(wǎng)絡(luò)不通等“非正常錯誤”時，JQuery反而無法選擇“靜默失敗”策略，于是我們可以由此受益，得到了處理錯誤的機(jī)會。例如在這種情況下，上面的例子將會彈出“xxxx was not called”的對話框。

解決方案
當(dāng)遇到“非正常錯誤”時，除了IE7、8以外，JQuery的JSONP在較新的瀏覽器中全部會“靜默失敗”。但很多時候我們希望能夠捕獲和處理這種錯誤。

實際上在這些瀏覽器中，<script>標(biāo)簽在遇到這些錯誤時會觸發(fā)error事件。例如如果是我們自己來實現(xiàn)JSONP的話可以這樣：

var ele = document.createElement('script');
ele.type = "text/javascript";
ele.src = '...';
ele.onerror = function() {
  alert('error');
};
ele.onload = function() {
  alert('load');
};
document.body.appendChild(ele);

在新瀏覽器中，當(dāng)發(fā)生錯誤時將會觸發(fā)error事件，從而執(zhí)行onerror回調(diào)彈出alert對話框：

但是麻煩在于，JQuery不會把這個<script>標(biāo)簽暴露給我們，所以我們沒有機(jī)會為其添加onerror事件處理器。

下面是JQuery實現(xiàn)JSONP的主要代碼：

jQuery.ajaxTransport( "script", function(s) {
 if ( s.crossDomain ) {
  var script,
   head = document.head || jQuery("head")[0] || document.documentElement;
  return {
   send: function( _, callback ) {
    script = document.createElement("script");
    script.async = true;
    ...
    script.src = s.url;
    script.onload = script.onreadystatechange = ...;
    head.insertBefore( script, head.firstChild );
   },
   abort: function() {
    ...
   }
  };
 }
});

可以看到script是一個局部變量，從外部無法獲取到。

那有沒有解決辦法呢？當(dāng)然有：

• 自己實現(xiàn)JSONP，不使用JQuery提供的
• 修改JQuery源碼（前提是你不是使用的CDN方式引用的JQuery）
• 使用本文介紹的技巧

前兩種不說了，如果愿意大可以選擇。下面介紹另一種技巧。

通過以上源碼可以發(fā)現(xiàn)，JQuery雖然沒有暴露出script變量，但是它卻“暴露”出了<script>標(biāo)簽的位置。通過send方法的最后一句：

head.insertBefore( script, head.firstChild );
可以知道這個動態(tài)創(chuàng)建的新創(chuàng)建標(biāo)簽被添加為head的第一個元素。而我們反其道而行之，只要能獲得這個head元素，不就可以獲得這個script了嗎？head是什么呢？繼續(xù)看源碼，看head是怎么來的：

head = document.head || jQuery("head")[0] || document.documentElement;
原來如此，我們也用同樣的方法獲取就可以了，所以補(bǔ)全前面的那個例子，如下：

var xhr = $.getJSON(...);
// for "normal error" and ie 7, 8
xhr.fail(function(jqXHR, textStatus, ex) {
  alert('request failed, cause: ' + ex.message);
});
// for 'abnormal error' in other browsers
var head = document.head || $('head')[0] || document.documentElement; // code from jquery
var script = $(head).find('script')[0];
script.onerror(function(evt) {
  alert('error');
});

這樣我們就可以在所有瀏覽器（嚴(yán)格來說是絕大部分，因為我沒有測試全部瀏覽器）里捕獲到“非正常錯誤”了。

這樣捕獲錯誤還有一個好處：在IE7、8之外的其他瀏覽器中，當(dāng)發(fā)生網(wǎng)絡(luò)不通等問題時，JQuery除了會靜默失敗，它還會留下一堆垃圾不去清理，即新創(chuàng)建的<script>標(biāo)簽和全局回調(diào)函數(shù)。雖然留在那也沒什么大的危害，但如果能夠順手將其清理掉不是更好嗎？所以我們可以這樣實現(xiàn)onerror：

// handle error
alert('error');

// do some clean

// delete script node
if (script.parentNode) {
  script.parentNode.removeChild(script);
}
// delete jsonCallback global function
var src = script.src || '';
var idx = src.indexOf('jsoncallback=');
if (idx != -1) {
  var idx2 = src.indexOf('&');
  if (idx2 == -1) {
  idx2 = src.length;
  }
  var jsonCallback = src.substring(idx + 13, idx2);
  delete window[jsonCallback];
}

這樣一來就趨于完美了。

完整代碼

function jsonp(url, data, callback) {
  var xhr = $.getJSON(url + '?jsoncallback=?', data, callback);

  // request failed
  xhr.fail(function(jqXHR, textStatus, ex) {
    /*
     * in ie 8, if service is down (or network occurs an error), the arguments will be:
     * 
     * testStatus: 'parsererror'
     * ex.description: 'xxxx was not called' (xxxx is the name of jsoncallback function)
     * ex.message: (same as ex.description)
     * ex.name: 'Error'
     */
    alert('failed');
  });

  // ie 8+, chrome and some other browsers
  var head = document.head || $('head')[0] || document.documentElement; // code from jquery
  var script = $(head).find('script')[0];
  script.onerror = function(evt) {
    alert('error');

    // do some clean

    // delete script node
    if (script.parentNode) {
      script.parentNode.removeChild(script);
    }
    // delete jsonCallback global function
    var src = script.src || '';
    var idx = src.indexOf('jsoncallback=');
    if (idx != -1) {
      var idx2 = src.indexOf('&');
      if (idx2 == -1) {
        idx2 = src.length;
      }
      var jsonCallback = src.substring(idx + 13, idx2);
      delete window[jsonCallback];
    }
  };
}

以上代碼在IE8、IE11、Chrome、FireFox、Opera、360下測試通過，其中360是IE內(nèi)核版本，其他瀏覽器暫時未測。

希望本文對大家學(xué)習(xí)，幫助大家解決jQuery使用JSONP時產(chǎn)生的錯誤。

最新評論