jQuery使用JSONP時的錯誤處理

概述

什么是域，簡單來說就是協議+域名或地址+端口，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是一個局部變量，從外部無法獲取到。

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

• 自己實現JSONP，不使用JQuery提供的

• 修改JQuery源碼（前提是你不是使用的CDN方式引用的JQuery）

• 使用本文介紹的技巧

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

通過以上源碼可以發現，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內核版本，其他瀏覽器暫時未測。

參考資料

[1] http://api.jquery.com/jQuery.ajax/
[2] http://api.jquery.com/jQuery.getJSON/
[3] http://api.jquery.com/Types/#jqXHR