Ajax与JSON的一些学习总结
o()、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 class="weibo">'' +
''<a href="http://weibo.com/DOMAIN" target="_blank">USER</a>'' +
''：WEIBO_TEXT<div class="time">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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/WeiboFeed.css">
</head>
<body>
<div id="jsWeibo"></div>
</body>
</html>
图8 跨源数据
如上图所示，我们使用$.ajax()方法调用公共微博接口，当成功获取服务器回调数据插入到我们的页面当中。
1.1.3 总结
本文主要介绍了Ajax在同源请求适用性，但在跨源请求中其存在的局限性，进而介绍Ajax和JSONP在跨源请求下解决方法。
回答qianlifeng关于跨源请求的几个问题：
1.一般的跨源不用jsonp请求为什么会报错？和同源的不都是一个请求么？（可能对ajax了解不深）
答：首先跨源请求的解决方法不仅仅有JSON，本文中提及了其他方法，如：表单POST方式、服务器代理、Html5的XDomainRequest和Flash request等；而你提到报错，我觉得你首先要确认数据格式是否正确。关于跨原请求和同源请求本文已经给出了介绍。
2.关于“用Javascript定义回调函数”那块看的不是很明白。传递
复制代码 代码如下:
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 class="weibo">'' +
''<a href="http://weibo.com/DOMAIN" target="_blank">USER</a>'' +
''：WEIBO_TEXT<div class="time">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="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/WeiboFeed.css">
</head>
<body>
<div id="jsWeibo"></div>
</body>
</html>
图8 跨源数据
如上图所示，我们使用$.ajax()方法调用公共微博接口，当成功获取服务器回调数据插入到我们的页面当中。
1.1.3 总结
本文主要介绍了Ajax在同源请求适用性，但在跨源请求中其存在的局限性，进而介绍Ajax和JSONP在跨源请求下解决方法。
回答qianlifeng关于跨源请求的几个问题：
1.一般的跨源不用jsonp请求为什么会报错？和同源的不都是一个请求么？（可能对ajax了解不深）
答：首先跨源请求的解决方法不仅仅有JSON，本文中提及了其他方法，如：表单POST方式、服务器代理、Html5的XDomainRequest和Flash request等；而你提到报错，我觉得你首先要确认数据格式是否正确。关于跨原请求和同源请求本文已经给出了介绍。
2.关于“用Javascript定义回调函数”那块看的不是很明白。传递