【已知】

不知道大家有木有了解过jQuery1.0到2.0时候针对jsonp那一块的修改。v1.0的时候还在使用iframe作为请求数据的临时暂居地。以便让过往数据有据可查。保证了jsonp请求的时候即便用了同样的全局callback 也只至于先返回的数据丢失，造成数据污染的问题。

但是自从jq2.0之后，就不再采用iframe来记录jsonp获得的数据了。可是依然，不得不支持同一个callback名。

那么，这样，问题就来了...

【问题】

jsonp的原理其实就是我们把请求地址当作一个js地址以script tag 的方式插入到页面，把服务端返回的数据当作script 脚本来运行以获得所需的数据（通常是第一个参数）。既然是以script脚本的方式载入，自然就绕过的跨域的问题。这自然需要服务端做一点配合。把我们约定传的callback参数以函数的形式返回，方便我们执行，获得数据。

那，如果我们有多个jsonp的请求，而且非要，死活要指定同样的callback名呢，肿么办？

<script src="omg.php?callback=myFunc&param=1"></script>
<script src="omg.php?callback=myFunc&param=2"></script>
<script src="omg.php?callback=myFunc&param=3"></script>

因为请求耗时的不确定性，无法确定每个回调执行的顺序，比如，一个简单的input suggest, 假设我们每次用户keyup都去请求一次数据，然后每次请求回调里面重新render我的们suggest list。实际上，这些请求是有“顺序”可言的，也就是说：我们原意是，后来的请求的回调也应该后执行才对, 这样才能保证 我输入 abc ，最后得到的suggest list 不是 a 的， 或者 ab的。（这是一个问题，但不是jsonp本身应该讨论的问题）

当然，你可以创建一个hash维护数据，当成一个自定义的cache来用，用一个唯一的且可以标识这个请求的key就行。每次要render的时候校验一次当前数据是否是你想要的请求得来的数据即可。

可是....

这里要讨论的并不是这个问题。

a) 如果是一个同名的全局callback，单单从这个函数来看的话，我们其实是不知道它被重写了多少次？结果和请求是否能对应起来？尤其是当其中有某些脚本发生错误的时候（当然，如果非要去hack，也并非不可）

b)不管在哪个浏览器里，一个脚本在执行之前，是无法对其干预的（removeNode之类的不算），只有当脚本loaded并且执行后，或者发生错误之后，才能对其进行操作。

c)正因为在execution 之前你不能对其进行操作，所以无法得知，这些脚本会以什么样的顺序进行loading和executing。

【通常】

为了避免所谓的callback污染：

a)用计数器对请求结果进行连接控制，jq v2.0+ 类似的方式

b)每次使用完返回数据后都重置，下一次使用前都检查下，防止二次污染使用。

对jsonp做一个简单通用的requestCallback， onload和onerror都能调

// some generic code
// common to all requestsvar lastValue;function genericCallback( value ) {lastValue = [ value ];
}// then the request specific closurefunction request( options ) {window[ options.callback ] = genericCallback;function requestCallback() {var tmp = lastValue;lastValue = undefined;if ( ! tmp ) {options.error();} else {options.success( tmp[ 0 ] );}}// create the script tag// "attach" requestCallback to the script tag// put the script tag in the DOM}..........
scriptTag.onload = scriptTag.onerror = requestCallback;

Opera并没提供不标准的onerror的钩子。但是无妨，onload亦可。

【IE下onreadystatechange 怪癖】

scriptTag.onreadystatechange = function() {if ( /loaded|complete/.test( scriptTag.readyState ) ) {requestCallback();}
};

ie下，onreadystatechange 的调用 并不是紧紧跟在脚本执行或者失败之后， 而是有一点点延迟，尤其是当有这个请求有缓存的时候。而有可能这一点点延迟的时候就有另一个脚本回调进来了，那就悲剧了。

如果这样：

<div id="divId" /><scriptid="scriptId"for="divId"event="onclick"src="script.js">
</script>

奇淫技巧，尝试load脚本，如果成功，ie下会触发divId 的一个onclick，而且不管load是否成功，都会触发script的onreaderstatechange的loaded readyState，而且最重要的是这个发生在脚本load完成，excute之前。

进一步，div的onclick可以被触发，同样的方式对于script呢？

<scriptid="scriptId"for="scriptId"event="onclick"src="script.js">
</script>

答案是肯定的，所以我们也不用额外的创建一个dom了。

所以可以用 script的event和for属性 来fix ie的onreaderstatechange的毛病了：

scriptTag.event = "onclick";
scriptTag.id = scriptTag.htmlFor = generateNewId();scriptTag.onreadystatechange = function() {if ( /loaded|complete/.test( scriptTag.readyState ) ) {try {scriptTag.onclick();} catch( e ) {}requestCallback();}
};

ie>=9 或许并不需要这个hack，但是无影响。

【所以】

// 代码其中一段... var head = document.getElementsByTag('head')[0],uniqid = 0,lastValue;function generalCallback(data) {lastValue = data}function urlappend(url, s) {return url + (/\?/.test(url) ? '&' : '?') + s}function handleJsonp(o, fn, err, url) {var reqId = uniqid++,cbkey = o.jsonpCallback || 'callback', // the 'callback' keycbval = o.jsonpCallbackName || ('__myrequest__' + reqId), // the 'callback' valuecbreg = new RegExp('(' + cbkey + ')=(.+)(&|$)'),match = url.match(cbreg),script = doc.createElement('script'),loaded = 0;if (match) {if (match[2] === '?') {url = url.replace(cbreg, '$1=' + cbval + '$3') // wildcard callback func name} else {cbval = match[2] // provided callback func name}} else {url = urlappend(url, cbkey + '=' + cbval) // no callback details, add 'em}win[cbval] = generalCallback;script.type = 'text/javascript';script.src = url;script.async = true;if (typeof script.onreadystatechange !== 'undefined') {// need this for IE due to out-of-order onreadystatechange(), binding script// execution to an event listener gives us control over when the script// is executed. See http://jaubourg.net/2010/07/loading-script-as-onclick-handler-of.htmlscript.event = 'onclick';script.htmlFor = script.id = '_myrequest_' + reqId;}script.onload = script.onreadystatechange = function () {if ((script[readyState] && script[readyState] !== 'complete' && script[readyState] !== 'loaded') || loaded) {return false}script.onload = script.onreadystatechange = null;script.onclick && script.onclick();// Call the user callback with the last value stored and clean up values and scripts.o.success && o.success(lastValue);lastValue = undefined;head.removeChild(script);loaded = 1;}// Add the script to the DOM headhead.appendChild(script);}

　　

更多阅读：http://jaubourg.net/2010/07/loading-script-as-onclick-handler-of.html