翻译了一篇文章JSON for jQuery。
jquery都涉及到这一块了,看来是不学不行了,我是指jsonp。
翻译的不到位还忘包含,如有差错,欢迎在回复中指正。
###############################################
在version1.2中,jquery在其自有的ajax中实现了对跨域jsonp的支持。我建议你使用这种支持,而不要使用插件。
jquery是一个很流行的js库,由John Resig设计。它有一个重要的特征就是$()函数,就像prototype.js中的一样,但是支持css和xpath,而且能够用一些简介的代码实现丰富的功能。
不像prototype.js,jquery不改变javascript的内置类,而是对这些类写了写了新的版本,我用它写了些代码,很有意思。
jquery提供了很简单的方式去写一些插件函数扩展$函数。下面提供了一个json的范例,它是一个jquery json插件,让你像这样写代码:
function doJson( json ) {
// handle the json object here
}
$(’#test’).json( ‘http:///json-test?jsonp={callback}’, doJson );
如果你愿意当然也可以使用一个匿名函数:
var url = ‘http:///json-test?jsonp={callback}’;
$(’#test’).json( url, function(json) {
// handle the json object here
});
或者是使用jquery的方法链,你也可以在jsons资源加载的时候绑定诸如显示”Loading…”信息的代码:
$(’#test’).html( ‘Loading…’ ).json( ‘http:///json-test?jsonp={callback}’, doJson );
要安装这个插件,只需要简单的将代码粘贴到某个js文件中,并且在jquery.js加载之后加载该js文件即可。
// JSON for jQuery by Michael Geary
// See http:///2006/01/25/json-for-jquery
// Free beer and free speech. Enjoy!
$.json = { callbacks: {} };
$.fn.json = function( url, callback ) {
var _$_ = this;
load( url.replace( /{callback}/, name(callback) ) );
return this;
function name( callback ) {
var id = (new Date).getTime();
var name = ‘json_’ + id;
var cb = $.json.callbacks[id] = function( json ) {
delete $.json.callbacks[id];
eval( ‘delete ‘ + name );
_$_.each( function() { callback(json); } );
};
eval( name + ‘ = cb’ );
return name;
}
function load( url ) {
var script = document.createElement( ’script’ );
script.type = ‘text/javascript’;
script.src = url;
$(’head’,document).append( script );
}
};
这里添加了一个json()方法到$ 。第一个参数是链接到json资源的url,它在提供jsons回调函数的地方带有文本{callback}。对于一个jsonp url,你需要使用 jsonp={callback};对于一个yahoo!json url,你应该使用formate=json&callback={callback}
第二个参数是回调函数本身。当json资源加载完成之后,加载到的json数据作为唯一参数交给该函数执行。在callback函数内部,这是一个由$实现的针对html元素的引用,当然如果$返回多个html元素的引用,callback会为每个元素运行一次。
callback函数是必须的,仅仅提供简单的json api这些代码是不会运行的,就像 del.不让你具体申明一个callback函数。这个问题也比较容易解决,我以前写代码的时候不需要这些东西,直到现在我才思考这些问题。
代码需要做一些额外的工作来创建一个数组entry和针对每个回调函数的全局唯一的函数名。全局函数名就是json url中包含的那个。它使用这个名字来代替数组元素的引用,实现了json apis的兼容。其实在目前的代码中,callbacks[]数组的元素并没有真正的用到,但是我认为它能够方便的管理所有的outstanding callbacks。