成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

什么是域，簡單來說就是協議+域名或地址+端口，3者只要有任何一個不同就表示不在同一個域?？缬?，就是在一個域中訪問另一個域的數據。

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

JSONP簡介
JSONP（JSON with Padding）是一種常用的跨域手段，但只支持JS腳本和JSON格式的數據。顧名思義，JSONP是利用JSON作為墊片，從而實現跨域請求的一種技術手段。其基本原理是利用HTML的<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?jsoncallback=?", {
 // 參數
}, 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中，當網絡無法訪問時，<script>標簽一樣會返回加載成功的信息，所以JQuery無法根據<script>標簽的狀態來判斷是否已成功加載，但它發現<script>標簽“加載成功”后回調函數卻沒有執行，所以JQuery以此判斷這是一個“解析錯誤”（回調代碼沒有執行，很可能是返回的數據不對導致沒有執行或執行失?。?，因此返回的錯誤信息將是“xxxx was not called”，其中的xxxx為回調函數的名稱。

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

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

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

var ele = document.createElement('script');
ele.type = "text/javascript";
ele.src = 'http://www.gimoo.net/t/1904/...';
ele.onerror = function() {
  alert('error');
};
ele.onload = function() {
  alert('load');
};
document.body.appendChild(ele);

在新瀏覽器中，當發生錯誤時將會觸發error事件，從而執行onerror回調彈出alert對話框：

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

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

那有沒有解決辦法呢？當然有：

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

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

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

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

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');
});

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

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

希望本文對大家學習，幫助大家解決jQuery使用JSONP時產生的錯誤。