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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

實(shí)際上在這些瀏覽器中，<script>標(biāo)簽在遇到這些錯(cuò)誤時(shí)會(huì)觸發(fā)error事件。例如如果是我們自己來實(shí)現(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ā)生錯(cuò)誤時(shí)將會(huì)觸發(fā)error事件，從而執(zhí)行onerror回調(diào)彈出alert對話框：

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

下面是JQuery實(shí)現(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是一個(gè)局部變量，從外部無法獲取到。

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

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

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

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

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

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

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)格來說是絕大部分，因?yàn)槲覜]有測試全部瀏覽器）里捕獲到“非正常錯(cuò)誤”了。

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

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

最新評論