出于安全的考虑,如果你要从www.a.com通过Ajax来请求另外一个网站www.b.com的内容,浏览器是不允许你这样做的(不理解这里的
安全是指什么?想想如果没有这个限制的话,黑客可以做些什么)。那什么样的情况下算是跨域?域名不同那当然算是跨域了,例如a.com向b.com发送请
求,这当然就是跨域了,不允许的。不过子域名不同(例如sub.a.com向www.a.com
发送请求)甚至是同域名不同端口(例如
a.com:80
向a.com:8080
)也算是跨域的。
下面演示一个跨域的例子:
<!--
<p>Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/</p>
<p>-->
<
script type
=
"
text/javascript
"
>
//
jQuery代码
$(
"
#
btnCrossDomainRequest
"
).click(
function
(){
$.get(
'
http://dudu.cnblogs.com
'
,
function
(data){
alert(
'
success
'
);
});
});
<
/
script>
(在IE8下提示没有权限,在FF3.5.5和Google浏览器下都没有提示,汗~我记得FF以前的版本是有提示的。。IE6下应该会弹窗提示
(没记错
<script src="http://rainmangogo.appspot.com/tinymce/themes/advanced/langs/zh.js" type="text/javascript"></script>
<script src="http://rainmangogo.appspot.com/tinymce/plugins/wordpress/langs/zh.js" type="text/javascript"></script>
的话))
<!-- more-->
跨域AJAX请求的解决方案
在AJAX应用环境中,由于安全的原因,浏览器不允许XMLHttpRequest组件请求跨域资源。在很多情况下,这个限制给我来带来的诸多不
便。很多同行,研究了各种各样的解决方案:
1.
通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案,但是它同样是一种限制最大的方
案。首先,它只能实现在同一个顶级域名下的跨域请求;另外,当在一个页面中还包含有其它的IFrame时,可能还会产生安全性异常,拒绝访问。
2.通过请求当前域
的代理,由服务器
代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源
,将要访问的目标资源提供给服务器,交由服务器
去代理访问目标资源。这种方案,可以实现完全的跨域访问,但是开发,请求过程的消费会比较大。
3.
通过HTML中可以请求跨域资源的标签引用来达到目的,比如Image,Script,LINK这些标签。在这些标签中,Script无疑是最合适的。在
请求每一个脚本资源时,浏览器都会去解析并运行脚本文件内定义的函数,或需要马上执行的JavaScript代码,我们可以通过服务器返回一段脚本或
JSON对象,在浏览器解析执行,从而达到跨域请求的目的。使用script标签来实现跨域请求,只能使用get方法请求服务器资源。
以上内容摘自:利用
script标签实现的跨域名AJAX请求(ExtJS)
第一个解决方案需要根域名是相同的,例如 a
.domain.com
和 b
.domain.com
。
整个解决方案大概如下图所示:
第二个解决方案就是在服务器端通过WebClient(或者其他)的类来请求跨域的内容,这里需要注意的一点是,如果你要将cookies信息也包
含在WebClient的请求中的话,你需要手动的去将Cookies信息加到WebClient中去。
第三个解决方案就和我们下面需要说道的JSONP有关的。
JSONP
JSONP全称应该是“JSON with padding”吧,它正是利用了<script
/>可以跨域请求的特性。简单来说JSONP就是在客户端将要用来处理请求结果的函数名作为参数传递给服务器端,然服务器端将请求结果数据作为参数包装在这个函数中
并返回给客户端执行。有点抽象?
那么直接看图吧:
下面来个实例讲解一下。这个实例就是为我们的博文自动生成一个短址的url,为了墙内的朋友方便,我们就直接使用国内的http://s8.hk
提供的短址服务(API地址
)。
我们试下
<!--
<p>Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/</p>
<p>-->
<
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 />标签可以跨域请求的特性:
<!--
<p>Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/</p>
<p>-->
<
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的支持,你只需要给一个问号作为占位符就可以了,所以我们上面的代码
可以写成:
<!--
<p>Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/</p>
<p>-->
<
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>
哈哈,是不是很简便呢?下面就用这个实现为我们的文章添加自动缩短网址的功能吧:
<!--
<p>Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/</p>
<p>--><
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
"
);
});
Technorati 标签:
javascript
,
jsonp
,
json
补充几个jsonp相关的链接:
分享到:
相关推荐
怎样实现Ajax 跨域访问的五种方法, 怎样实现Ajax 跨域访问的五种方法
Ajax跨域访问的示例(ASP.NET Web)
Ajax跨域访问解决方案,访问第三方网站的资源
解决了在JSP中的AJAX不能跨域访问的问题
本资源主要介绍了AJAX跨域的解决办法,以及解决方案间的比较
个人学习时编写的代码,该案例用于演示Ajax的跨域访问问题。!!!补充说明:导入工程时需要选择导入maven工程!上传仅为学习交流,也为自己下载方便!水平有限不喜勿喷。在README.txt中有对项目的详细说明!
主要从三方面来通过jsonp来实现ajax跨域问题: 1.javascript方法 2.jquery $.ajax方法 3.jquery $.getJSON方法 不看会后悔的!
但用IIS发布后,提示没权限,后来发现是ajax跨域访问的权限问题。 在网上折腾了两天,终于找到解决办法。 希望有相同需求的朋友能直接通过我网上收集并实例测试使用过的资源解决这个问题,少走弯路
NULL 博文链接:https://exceptioneye.iteye.com/blog/1405495
最近做项目,需要跨域请求访问数据问题。下面通过本文给大家分享C#中ajax跨域访问代码详解,需要的朋友可以参考下
NULL 博文链接:https://jacky68147527.iteye.com/blog/261877
问题:ajax跨域访问报错501 运行下面的代码会报错501 $.ajax({ type: "POST", url: "http://192.168.1.202/sensordata.php", contentType:'application/json; charset=utf-8', data: JSON.stringify...
ajax跨域访问,可以使用jsonp方法或设置Access-Control-Allow-Origin实现,关于设置Access-Control-Allow-Origin实现跨域访问可以参考之前我写的文章《ajax 设置Access-Control-Allow-Origin实现跨域访问》 1.ajax...
可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的...
实例代码分为前台和后台,前台为一个其他项目的搜索框,后台为WCP开源项目搜索的代码,作用是:在其他项目中整合WCP,并实现自己搜索的API,对检索内容进行拼接。有需要的可以下载一下。
随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细。...所以,今天我们这篇文章的主题就是讨论演示如何配置Web Api以让其支持跨域访问(Cors)。好了,下面我们以一个简单的示例直