【备忘】指定为同名callback的jsonp && IE下script loaded状态标记

【已知】

不知道大家有木有了解过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 requests

var lastValue;

function genericCallback( value ) {
  lastValue = [ value ];
}

// then the request specific closure

function 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" />

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

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

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

<script
  id="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' key
        cbval = o.jsonpCallbackName || ('__myrequest__' + reqId), // the 'callback' value
        cbreg = 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.html
        script.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 head
    head.appendChild(script);
  }

　　

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