什么是域，簡單來說就是協議+域名或地址+端口，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 = '...';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, 8xhr.fail(function(jqXHR, textStatus, ex) { alert('request failed, cause: ' + ex.message);});// for 'abnormal error' in other browsersvar head = document.head || $('head')[0] || document.documentElement; // code from jqueryvar script = $(head).find('script')[0];script.onerror(function(evt) { alert('error');});這樣我們就可以在所有瀏覽器（嚴格來說是絕大部分，因為我沒有測試全部瀏覽器）里捕獲到“非正常錯誤”了。
這樣捕獲錯誤還有一個好處：在IE7、8之外的其他瀏覽器中，當發生網絡不通等問題時，JQuery除了會靜默失敗，它還會留下一堆垃圾不去清理，即新創建的<script>標簽和全局回調函數。雖然留在那也沒什么大的危害，但如果能夠順手將其清理掉不是更好嗎？所以我們可以這樣實現onerror：
// handle erroralert('error');// do some clean// delete script nodeif (script.parentNode) { script.parentNode.removeChild(script);}// delete jsonCallback global functionvar 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時產生的錯誤。
新聞熱點
疑難解答
