Page 79 - JavaScript修炼之道

任务30 使用JSON-P 69

通过极简单的代码实现JSON-P
最简单的实现大致是这样的：

server/jsonp/jsonp.js

document.documentElement.firstChild.appendChild(
new Element('script', { type: 'text/javascript',
src: this.href + '&r=' + Math.random() }));
上面的代码在一个链接单击事件处理器的上下文中执行，因此this引用的是被单击的那个
<a>元素。

①
这里使用的随机参数是为了避免浏览器缓存而添加的 。为了保证代码的质量，最好先检查
一下URI，以决定是用 & 还是 ? 作为前缀 。
②
③
一种更高级的方式是为这种脚本提供动态的 id= 属性 ，然后在浏览器载入之后将其删除，
以免DOM变得过大。这个动态的 id= 属性可以兼作随机参数。

server/jsonp/jsonp.js

var script = new Element('script', { type: 'text/javascript',
src: this.href });
script.src += ('&r=' + script.identify());
script.observe('load', Element.remove.curry(script));
document.documentElement.firstChild.appendChild(script);

使用框架中的JSON-P机制
有几个框架为JSON-P提供了专门的函数，这迟早会派得上用场。

// jQuery
$.getJSON(url[, data][, callback])
// Mootools
new Request.JSONP({ url: ..., onComplete: function(data) {...} })
// Dojo
dojo.io.script.get({ url: ..., jsonp: function(data) {...} })

相关任务

 任务29
 任务32
——————————
① 浏览器会缓存一个url的响应数据，如果url完全相同，下一次JSON-P就会自动用之前的数据而不是真的做新的
请求。*
② 根据这个参数是否是第一个参数。*
③ 即Prototype的Element.identify()，如果Element当前没有id，调用identify() 会为之自动生成一个，形
如anonymous_element_x，x从1开始递增。*