JSONP ---------跨域

什么是跨域

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:

首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:

 

URL说明是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js
http://www.a.com/b.js
不同域名 不允许


特别注意两点:
第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

知道了,什么是跨域,然后咱们再来说说解决方案之  jsonp 

1. 什么是JSONP? 

    JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。 

2.为什么使用JSONP? 
    由于 JSON 只是一种含有简单括号结构的纯文本,因此许多通道都可以交换 JSON 消息。因为同源策略的限制,我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法,即通过使用 JSON 与 < script> 标记相结合的方法,从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。 

 

跨域场景:

www.a.com   ajax请求www.b.com,由于浏览器安全模型规定,XMLHttpRequest、框架(frame)等只能在一个域中通信。因此这种请求是会被拒绝的。

 

此时我们应用JSONP,发送异步请求

function ajaxStatusInfo() {
    $.ajax({
        dataType: 'jsonp',
        cache: false,
        url: 'WWW.B.COM/statusinfo/getstatusinfoall',
        jsonpCallback: "proStatusInfo",
        success: function (data) {
           
        }
    });
}

 

 

从图中,我们可以看到,8899站点请求,1234站点服务是属于跨域请求。从1234站点返回的数据我们可以得到,我们的回调函数。proStatusInfo

 

Jsonp原理: 

首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.  

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。 

客户端浏览器,解析script标签,并执行返回的javascript文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数) 

 

总结:

其实 jsonp 是个很简单的一个东西。

主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。(其实也可以用eval函数)

 

 

Jsonp的弊端:
1. 不能够post修改 (获取数据可以用get,但是跟服务器交互,修改数据,就需要post了)
2. 无法实现同步请求
 
每个解决方案都有利弊,在我们应用他们的时候,先要想到和我们的需求是否吻合,切勿胡乱应用;视具体场景而定。
posted @ 2013-07-16 22:56  蓝色格调  阅读(289)  评论(0编辑  收藏  举报