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. 无法实现同步请求

 

每个解决方案都有利弊，在我们应用他们的时候，先要想到和我们的需求是否吻合，切勿胡乱应用；视具体场景而定。