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>

JsonP / Google AJAX Libraries API / Mashup

时间: 2024-10-08 11:06:08

JsonP / Google AJAX Libraries API / Mashup的相关文章

jQuery中利用JSONP解决AJAX跨域问题

写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 具体策略限制情况可看下表: URL 说明 允许通信 http:/

使用Javascript从Google Places搜索api获取纬度和经度

如何使用谷歌地图搜索框api从搜索到的位置获取经度和纬度. 我使用与谷歌演示相同的代码 – https://developers.google.com/maps/documentation/javascript/examples/places-searchbox 搜索代码: <script type="text/javascript"> //自动搜索 function initMap() { var input = document.getElementById('addr

JSON、JSONP、Ajax的区别

什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的: 5.容易编写和解析,当然前提是你要知道数据结构: JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明. JSON的格式或者叫规则: JS

03SQLite的增删改查(Google提供的API)

SQLite的增删改查(Google提供的API) SQLiteDatabase 除了前面给大家介绍的execSQL()和rawQuery()方法, SQLiteDatabase还专门提供了对应于添加.删除.更新.查询的操作方法:insert().delete().update()和query() .这些方法实际上是给那些不太了解SQL语法的菜鸟使用的,对于熟悉SQL语法的程序员而言,直接使用execSQL()和rawQuery()方法执行SQL语句就能完成数据的添加.删除.更新.查询操作. I

Google地图接口API之地图基础

拥有一个免费的API Key之后就可以正式调用Google的API了进行开发了. 创建一个简单的 Google 地图: <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> functio

Jsonp实现Ajax跨域Demo

JSONP 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如script.img.iframe): 3.于是可以判断,当前阶段如果想通过纯web端(ActiveX控件.服务端代理.属于未来的HTML5之Websocket等方式不算)跨域访问数据就

使用jsonp实现ajax跨域请求

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料并不是 JSON,

Android # 图片自动适配屏幕,APK反编译详解,Google Maps Android API,Keytool

本文主题:(图片缩放)自动适配屏幕,APK反编译详解,Google Maps Android API,Keytool  (图片缩放)自动适配屏幕支持缩放旋转,自动居中的imageview http://deanandbai-gmail-com.iteye.com/blog/1850329 apk反编译工具 http://pan.baidu.com/s/1qWFcueC Android APK反编译详解 http://blog.csdn.net/ithomer/article/details/67

JSON之三:获取JSON文本并解释(以google的天气API为例)

google提供了天气的api,以广州天气为例,地址为: http://api.openweathermap.org/data/2.5/weather?q=guangzhou 返回的结果为: { "coord": { "lon": 113.25, "lat": 23.12 }, "sys": { "message": 0.2088, "country": "CN",