AJAX的跨域与JSONP(为文章自动添加短址的功能)

时间：2021-05-26

什么是AJAX的跨域请求
出于安全的考虑，如果你要从。整个解决方案大概如下图所示：

第二个解决方案就是在服务器端通过WebClient(或者其他)的类来请求跨域的内容，这里需要注意的一点是，如果你要将cookies信息也包含在WebClient的请求中的话，你需要手动的去将Cookies信息加到WebClient中去。

第三个解决方案就和我们下面需要说道的JSONP有关的。

JSONP
JSONP全称应该是“JSON with padding”吧，它正是利用了<script />可以跨域请求的特性。简单来说JSONP就是在客户端将要用来处理请求结果的函数名作为参数传递给服务器端，然服务器端将请求结果数据作为参数包装在这个函数中并返回给客户端执行。有点抽象？那么直接看图吧：

下面来个实例讲解一下。这个实例就是为我们的博文自动生成一个短址的url，为了墙内的朋友方便，我们就直接使用国内的http://s8.hk提供的短址服务(API地址)。
我们试下
复制代码 代码如下:
<script type="text/javascript">
$("#shortIt").click(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
$.get(c_url,function(data){
alert(data);
})
});
</script>

测试下，什么？不可以？肯定不可以啦，因为是跨域嘛，所以我们需要利用<script />标签可以跨域请求的特性：
复制代码 代码如下:
<script type="text/javascript">
function alertShortUrl(url){
alert(url);
}
$("#shortItByJSONP").click(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
//注意下面将函数名‘alertShortUrl'传进去咯
c_url += '&jsonp=alertShortUrl'
//生成一个<script />标签并添加到<head />中
script = $('<script type="text/javascript" />')
.attr('src', c_url);
//这里为什么要用appendChild？
//因为jQuery的append方法对<script/>已经做了处理
//你也可以用$('head').append(script);
//这里不用只是为了让你看得更清楚点而已。
$('head')[0].appendChild(script[0]);
});
</script>


哈哈，再点点测试按钮看看？很好，成功了。
其实不用这么麻烦，因为jQuery自从1.2版以后就已经添加了对JSONP的支持，你只需要给一个问号作为占位符就可以了，所以我们上面的代码可以写成：
复制代码 代码如下:
<script type="text/javascript">
$("#shortItByjQueryJSONP").click(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
//注意下面只需一个问号，不用具体的函数名
c_url += '&jsonp=?'
//注意是getJSON 哦
$.getJSON(c_url, function(data){
alert(data);
});
});
</script>

哈哈，是不是很简便呢？下面就用这个实现为我们的文章添加自动缩短网址的功能吧：
复制代码 代码如下:
<script type="text/javascript">
$(function(){
c_url = 'http://s8.hk:8088/s8/s?format=text&longUrl=';
c_url += document.location.href;
//注意下面只需一个问号，不用具体的函数名
c_url += '&jsonp=?'
$.getJSON(c_url, function(data){
//这里要这么处理、放到哪里就看你自己喜欢咯.而且这还和你博客使用的模板有关的哦
$("<div>本文短址：</div>").css("font-weight", "normal")
.css("font-size", "12px")
.append($("<a>"+data+"</a>").attr("href", data))
.appendTo(".post .postTitle");
});
});
</script>

OK，打完收工。Enjoy it!
再多说几句，在twitter上很多还是用bit.ly、j.mp等国外的短址服务，墙得厉害，每次看不到很郁闷。尽量不要用那些墙得厉害的吧。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章