翻譯了一篇文章JSON for jQuery。
jquery都涉及到這一塊了,看來(lái)是不學(xué)不行了,我是指jsonp。
翻譯的不到位還忘包含,如有差錯,歡迎在回復中指正。
###############################################
在version1.2中,jquery在其自有的ajax中實(shí)現了對跨域jsonp的支持。我建議你使用這種支持,而不要使用插件。
jquery是一個(gè)很流行的js庫,由John Resig設計。它有一個(gè)重要的特征就是$()函數,就像prototype.js中的一樣,但是支持css和xpath,而且能夠用一些簡(jiǎn)介的代碼實(shí)現豐富的功能。
不像prototype.js,jquery不改變javascript的內置類(lèi),而是對這些類(lèi)寫(xiě)了寫(xiě)了新的版本,我用它寫(xiě)了些代碼,很有意思。
jquery提供了很簡(jiǎn)單的方式去寫(xiě)一些插件函數擴展$函數。下面提供了一個(gè)json的范例,它是一個(gè)jquery json插件,讓你像這樣寫(xiě)代碼:
function doJson( json ) {
// handle the json object here
}
$(’#test’).json( ‘http://example.com/json-test?jsonp={callback}’, doJson );
如果你愿意當然也可以使用一個(gè)匿名函數:
var url = ‘http://example.com/json-test?jsonp={callback}’;
$(’#test’).json( url, function(json) {
// handle the json object here
});
或者是使用jquery的方法鏈,你也可以在jsons資源加載的時(shí)候綁定諸如顯示”Loading…”信息的代碼:
$(’#test’).html( ‘Loading…’ ).json( ‘http://example.com/json-test?jsonp={callback}’, doJson );
要安裝這個(gè)插件,只需要簡(jiǎn)單的將代碼粘貼到某個(gè)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 );
}
};
這里添加了一個(gè)json()方法到$ 。第一個(gè)參數是鏈接到j(luò )son資源的url,它在提供jsons回調函數的地方帶有文本{callback}。對于一個(gè)jsonp url,你需要使用 jsonp={callback};對于一個(gè)yahoo!json url,你應該使用formate=json&callback={callback}
第二個(gè)參數是回調函數本身。當json資源加載完成之后,加載到的json數據作為唯一參數交給該函數執行。在callback函數內部,這是一個(gè)由$實(shí)現的針對html元素的引用,當然如果$返回多個(gè)html元素的引用,callback會(huì )為每個(gè)元素運行一次。
callback函數是必須的,僅僅提供簡(jiǎn)單的json api這些代碼是不會(huì )運行的,就像 del.icio.us不讓你具體申明一個(gè)callback函數。這個(gè)問(wèn)題也比較容易解決,我以前寫(xiě)代碼的時(shí)候不需要這些東西,直到現在我才思考這些問(wèn)題。
代碼需要做一些額外的工作來(lái)創(chuàng )建一個(gè)數組entry和針對每個(gè)回調函數的全局唯一的函數名。全局函數名就是jsonurl中包含的那個(gè)。它使用這個(gè)名字來(lái)代替數組元素的引用,實(shí)現了jsonapis的兼容。其實(shí)在目前的代碼中,callbacks[]數組的元素并沒(méi)有真正的用到,但是我認為它能夠方便的管理所有的outstandingcallbacks。

