// 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查看微博的数据组成，具体数据如下：
通过上图，我们知道微博的数据信息很丰富，它是由一些基础数据类型和复杂数据类型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
};
上面我们定义了一个对象JQWeibo，其中loadWeibo()方法使用jQuery的Ajax方法向微博API发送跨源请求，接下来让我们实现该方法吧。
复制代码 代码如下:
// The function to get weibo data.
loadWeibo: function() {
$.ajax({
// Weibo API.
url: "http://api.t.sina.com.cn/statuses/public_timeline.json",
type: "GET",
dataType: "jsonp",
data: {
source: JQWeibo.appKey,
count: JQWeibo.numWeibo
},
// When the requet completed, then invokes success function.
success: function(data, textStatus, xhr) {
// Sets html structure.
var html =
'<div>' +
'<a href="https://weibo.com/DOMAIN" target="_blank">USER</a>' +
'：WEIBO_TEXT<div>AGO</div>';
// Appends weibos into html page.
for (var i = 0; i < data.length; i++) {
$(JQWeibo.appendTo).append(
html.replace('WEIBO_TEXT', JQWeibo.ify.clean(data[i].text))
// Uses regex and declare DOMAIN as global, if found replace all.
.replace(/DOMAIN/g, data[i].user.domain)
.replace(/USER/g, data[i].user.screen_name)
.replace('AGO', JQWeibo.timeAgo(data[i].created_at))
);
}
}
})
}
现在，我们使用$.ajax()方法向微博API发送跨源请求，而且我们向API传递了JQWeibo.appKey和JQWeibo.numWeibo，当请求完成后，调用Success()方法把JSON数据插入的页面当中。
页面的HTML代码如下：
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Weibo Feed</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link type="text/css" href="https://www.jb51.net/css/WeiboFeed.css">
</head>
<body>
<div></div>
</body>
</html>
图8 跨源数据
如上图所示，我们使用$.ajax()方法调用公共微博接口，当成功获取服务器回调数据插入到我们的页面当中。
1.1.3 总结
本文主要介绍了Ajax在同源请求适用性，但在跨源请求中其存在的局限性，进而介绍Ajax和JSONP在跨源请求下解决方法。
回答qianlifeng关于跨源请求的几个问题：
1.一般的跨源不用jsonp请求为什么会报错？和同源的不都是一个请求么？（可能对ajax了解不深）
答：首先跨源请求的解决方法不仅仅有JSON，本文中提及了其他方法，如：表单POST方式、服务器代理、Html5的XDomainRequest和Flash request等；而你提到报错，我觉得你首先要确认数据格式是否正确。关于跨原请求和同源请求本文已经给出了介绍。
2.关于“用Javascript定义回调函数”那块看的不是很明白。传递当前页面的一个js方法给跨源服务器，为什么就能跨源请求了呢？（JSONP？） 服务端根据这个js方法做了什么操作啊？
答：首先我们理解JSON是一种数据格式，而JSONP像似通过一个方法名来封装JSON格式；而跨源请求不是说指定一个回调函数实现的，而是我们利用了浏览器允许跨源请求<script>资源，你也可以我的HTML代码中使用的是Google提供的jQuery库，这也说明了<script>资源可以跨源请求。当我们发送跨源请求后，服务器会返回JSONP，但服务器无法预知接受JSON数据的方法名，所有我们要把函数名告诉（传递）服务器。
复制代码 代码如下: