JsonP / Google AJAX Libraries API / Mashup
最近经常上豆瓣,也关注了一下他们最近推出的API服务,据说淘宝也将开放API,google更是不用说,开始为众多的ajax库提供服务器端分发服务。越来越多的网站开始提供API服务,也表示有越来越多的Mashup可能性,抛砖引玉,希望越来越多的开发者加入到这个领域。
一、JsonP + API:Javascrpt中跨域调用数据
先了解下JsonP(JSON with Padding):利用script标签,通过特定的src地址的调用,来执行一个客户端的js函数,在服务器端生成相对的数据(json格式)并以参数的形式传递给这个客户端的js函数并执行这个函数,前提是需要服务器端的数据输出支持。
以delicious的API提供的jsonp支持为例。
1. 我们先在客户端写一个带参数的函数doyourwork以便处理返回的数据:
<script type="text/javascript">
<!--
function doyourwork(data){
alert(data);
//处理数据代码....
}
//-->
</script>
2. 通过script标签,调用http://feeds.delicious.com/feeds/json/bob?callback=doyourwork 生成数据并作为参数传入doyourwork来执行函数:
<script type="text/javascript" src="http://feeds.delicious.com/feeds/json/bob?callback=doyourwork"></script>
这一行相当于执行以下javascript代码: doyourwork(服务器端生成的数据) --- 以服务器端生成的数据为参数执行js函数doyourwork。
当然,现在很多的js库都已经有相应的支持,用起来很方便,比如在jquery中,可以这样
$.getJSON("http://feeds.delicious.com/feeds/json/bob?callback=", function(data){
alert(data);
//处理数据代码....
});
更具体的东西请我google code上的例子。
参考 remote json jsonp
二、Google AJAX Libraries API for Mashup!
Google的Dion Almaer也开始在ajaxian.com上推广AJAX Libraries API:其实就是把各种AJAX库放在google的服务器上,为开发者提供更快更好的调用服务。
目前已经提供的AJAX库包括:jQuery / prototype / script_aculo_us / MooTools / dojo。
调用方式一
<script src="http://www.google.com/jsapi"></script>
<script>
// 加载 jQuery; 版本:可以选1,会自动加载1的最新版本1.2.6;压缩(可选):参数uncompressed
google.load("jquery", "1.2.6", {uncompressed:true});
// 页面加载完成后执行下面程序
google.setOnLoadCallback(function() {
$("<p>jQuery load completed</p>").appendTo("body");
});
</script>
调用方式二
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$("<p>jQuery load completed</p>").appendTo("body");
</script>