首页 > 代码库 > JsonP / Google AJAX Libraries API / Mashup

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.mamicode.com/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://www.mamicode.com/http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
    $("<p>jQuery load completed</p>").appendTo("body");
</script>