什么是AJAX的跨域请求
出于安全的考虑，如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容，浏览器是不允许你这样做的（不理解这里的安全是指什么？想想如果没有这个限制的话，黑客可以做些什么）。那什么样的情况下算是跨域？域名不同那当然算是跨域了，例如a.com向b.com发送请求，这当然就是跨域了，不允许的。不过子域名不同（例如sub.a.com向www.a.com发送请求）甚至是同域名不同端口（例如a.com:80向a.com:8080）也算是跨域的。
下面演示一个跨域的例子：
复制代码 代码如下:
<script type="text/javascript" >
//jQuery代码
$("#btnCrossDomainRequest").click(function(){
$.get('https://www.jb51.net', function(data){
alert('success');
});
});
</script>
（在IE8下提示没有权限，在FF3.5.5和Google浏览器下都没有提示，汗~我记得FF以前的版本是有提示的。。IE6下应该会弹窗提示(没记错的话)）
跨域AJAX请求的解决方案
在AJAX应用环境中，由于安全的原因，浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下，这个限制给我来带来的诸多不便。很多同行，研究了各种各样的解决方案：
1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的IFrame时，可能还会产生安全性异常，拒绝访问。
2.通过请求当前域的代理，由服务器代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源，将要访问的目标资源提供给服务器，交由服务器去代理访问目标资源。这种方案，可以实现完全的跨域访问，但是开发，请求过程的消费会比较大。
3. 通过HTML中可以请求跨域资源的标签引用来达到目的，比如Image,Script,LINK这些标签。在这些标签中，Script无疑是最合适的。在请求每一个脚本资源时，浏览器都会去解析并运行脚本文件内定义的函数，或需要马上执行的JavaScript代码，我们可以通过服务器返回一段脚本或 JSON对象，在浏览器解析执行，从而达到跨域请求的目的。使用script标签来实现跨域请求，只能使用get方法请求服务器资源。
第一个解决方案需要根域名是相同的，例如 a.domain.com和 b.domain.com。整个解决方案大概如下图所示：
第二个解决方案就是在服务器端通过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等国外的短址服务，墙得厉害，每次看不到很郁闷。尽量不要用那些墙得厉害的吧。
出于安全的考虑，如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容，浏览器是不允许你这样做的（不理解这里的安全是指什么？想想如果没有这个限制的话，黑客可以做些什么）。那什么样的情况下算是跨域？域名不同那当然算是跨域了，例如a.com向b.com发送请求，这当然就是跨域了，不允许的。不过子域名不同（例如sub.a.com向www.a.com发送请求）甚至是同域名不同端口（例如a.com:80向a.com:8080）也算是跨域的。
下面演示一个跨域的例子：
复制代码 代码如下:
<script type="text/javascript" >
//jQuery代码
$("#btnCrossDomainRequest").click(function(){
$.get('https://www.jb51.net', function(data){
alert('success');
});
});
</script>
（在IE8下提示没有权限，在FF3.5.5和Google浏览器下都没有提示，汗~我记得FF以前的版本是有提示的。。IE6下应该会弹窗提示(没记错的话)）
跨域AJAX请求的解决方案
在AJAX应用环境中，由于安全的原因，浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下，这个限制给我来带来的诸多不便。很多同行，研究了各种各样的解决方案：
1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的IFrame时，可能还会产生安全性异常，拒绝访问。
2.通过请求当前域的代理，由服务器代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源，将要访问的目标资源提供给服务器，交由服务器去代理访问目标资源。这种方案，可以实现完全的跨域访问，但是开发，请求过程的消费会比较大。
3. 通过HTML中可以请求跨域资源的标签引用来达到目的，比如Image,Script,LINK这些标签。在这些标签中，Script无疑是最合适的。在请求每一个脚本资源时，浏览器都会去解析并运行脚本文件内定义的函数，或需要马上执行的JavaScript代码，我们可以通过服务器返回一段脚本或 JSON对象，在浏览器解析执行，从而达到跨域请求的目的。使用script标签来实现跨域请求，只能使用get方法请求服务器资源。
第一个解决方案需要根域名是相同的，例如 a.domain.com和 b.domain.com。整个解决方案大概如下图所示：
第二个解决方案就是在服务器端通过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等国外的短址服务，墙得厉害，每次看不到很郁闷。尽量不要用那些墙得厉害的吧。
标签：
AJAX,跨域,短址
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“AJAX的跨域与JSONP(为文章自动添加短址的功能)”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。