首先我们必须理解JSON和JSONP的区别：JSON是一种数据格式，而JSONP像是通过一个方法名来封装JSON格式；由于浏览器允许跨源请求<script>资源，如我们的HTML页面代码中使用了Google的jQuery库，当我们Web程序发送跨源请求后，服务器给我们提供响应数据，但服务器无法预知接受JSON数据的方法名，所以我们要提供一个方法名。

Ajax跨源请求

跨域请求数据解决方案主要有如下解决方法：

在介绍JSONP方式解决跨域请求数据之前，首先我们看看JSONP的定义。

JSONP（JSON with Padding）是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过Javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

由于同源策略的限制，XMLHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

假设博客园提供一个API接口：?，供开发者调用获取热门博文。

这里我们可以通过两种方式调用该接口：

1. 用Javascript定义回调函数

其实，通过Javascript定义回调函数调用该接口比较直观，我们只需告诉服务器接收数据的方法名就OK了，比如：

? callback=myFunction

其中myFunction是我们在页面自定义的函数用来接收服务器回传的数据，myFunction的定义如下：

// The call back function. function myFunction(data) { // Your code here. } 2. 使用jQuery的Ajax方法

假设我们想在博客中增加显示浪微博的公共微博信息，我们可以在博客中调用微博提供的API获取跨源数据，接下来，我们将使用jQuery的Ajax方法获取跨域数据。

首先，查看微博API文档找到了公共微博的API接口statuses/public_timeline 获取最新的公共微博消息，它支持JSON或XML格式数据。

参数

必选

类型及范围

说明

source

true

string

申请应用时分配的AppKey，调用接口时候代表应用的唯一身份。（采用OAuth授权方式不需要此参数）

count

false

int，缺省值20，最大值200

每次返回的记录数

count

false

int，缺省值20，最大值200

每次返回的记录数

表2请求参数

上面的请求参数只有source（AppKey）是必须的，所以我们需要向微博申请AppKey，在调用API时，只需把我们的AppKey传递给接口就OK了。

接下来让我们看一下微博数据组成，这里我们使用JSON viewer查看微博的数据组成，具体数据如下：

图7微博JSON数据

通过上图，我们知道微博的数据信息很丰富，它是由一些基础数据类型和复杂数据类型user组成的，接下来我们将使用jQuery实现调用微博接口方法。

首先，我们定义一个全局的对象，它包含三个属性分别是：numWeibo、appendTo和appKey，还有三个方法loadWeibo()、timeAgo()和clean()，具体定义如下：

JQWeibo = { // The number of weibos display in the page. // Sets the number of weibos, append class and app key. numWeibo: 15, appendTo: '#jsWeibo', // The appkey you apply from weibo. appKey: YourAppKey, // The function to get weibo data. loadWeibo: function() { }, /** * Convert the time to relative time. * @return {string} relative time like "8 minutes ago" */ timeAgo: function(dateString) { }, ify: { clean: function(weibo) { return this.hash(this.at(this.list(this.link(weibo)))); } } // ify };