漂在北方的狼 / Script Langua... / JSON for jQuery

0 0

   

JSON for jQuery

2007-12-07  漂在北方...

翻译了一篇文章JSON for jQuery
jquery都涉及到这一块了,看来是不学不行了,我是指jsonp。

翻译的不到位还忘包含,如有差错,欢迎在回复中指正。
###############################################

在version1.2中,jquery在其自有的ajax中实现了对跨域jsonp的支持。我建议你使用这种支持,而不要使用插件。

jquery是一个很流行的js库,由John Resig设计。它有一个重要的特征就是$()函数,就像prototype.js中的一样,但是支持cssxpath,而且能够用一些简介的代码实现丰富的功能。

不像prototype.js,jquery不改变javascript的内置类,而是对这些类写了写了新的版本,我用它写了些代码,很有意思。

jquery提供了很简单的方式去写一些插件函数扩展$函数。下面提供了一个json的范例,它是一个jquery json插件,让你像这样写代码:
function doJson( json ) {

// handle the json object here

}
$(’#test’).json( ‘http://example.com/json-test?jsonp={callback}’, doJson );

如果你愿意当然也可以使用一个匿名函数:
var url = ‘http://example.com/json-test?jsonp={callback}’;

$(’#test’).json( url, function(json) {

// handle the json object here

});

或者是使用jquery的方法链,你也可以在jsons资源加载的时候绑定诸如显示”Loading…”信息的代码:
$(’#test’).html( ‘Loading…’ ).json( ‘http://example.com/json-test?jsonp={callback}’, doJson );

要安装这个插件,只需要简单的将代码粘贴到某个js文件中,并且在jquery.js加载之后加载该js文件即可。
// JSON for jQuery by Michael Geary

// See http://mg.to/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.icio.us不让你具体申明一个callback函数。这个问题也比较容易解决,我以前写代码的时候不需要这些东西,直到现在我才思考这些问题。

代码需要做一些额外的工作来创建一个数组entry和针对每个回调函数的全局唯一的函数名。全局函数名就是json url中包含的那个。它使用这个名字来代替数组元素的引用,实现了json apis的兼容。其实在目前的代码中,callbacks[]数组的元素并没有真正的用到,但是我认为它能够方便的管理所有的outstanding callbacks。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。如发现有害或侵权内容,请点击这里 或 拨打24小时举报电话:4000070609 与我们联系。

    猜你喜欢

    0条评论

    发表

    请遵守用户 评论公约

    类似文章
    喜欢该文的人也喜欢 更多