jsonp 跨域原理详解

jsonp 跨域原理详解

是一种在Web开发中经常使用的前端动态脚本技术。在中，有一个很重要的安全性限制，被称为“Same- ”（同源策略）。这一策略对于代码能够访问的页面内容做了很重要的限制，即只能访问与包含它的文档在同一域下的内容。

这个安全策略在进行多或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在下的页面中包含的代码，不能访问在域名下的页面内容；甚至不同的子域名之间的页面也不能通过代码互相访问。对于Ajax的影响在于，通过实现的Ajax请求，不能向不同的域提交请求，例如，在下的页面，不能向提交Ajax请求，等等。

然而，当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，这时候“同源策略”就显得过于苛刻。JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理。

利用在页面中创建是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的)。JSONP是一种脚本注入( )行为，所以有一定的安全隐患。

那为什么不支持post方式跨域呢？

虽然采用post+动态生成是可以达到post跨域的目的(有位js牛人就是这样把.2.5 打patch的)，但这样做是一个比较极端的方式，不建议采用。

也可以说get方式的跨域是合法的，post方式从安全角度上，被认为是不合法的jsoncallback php，万不得已还是不要剑走偏锋。

端跨域访问的需求看来也引起w3c的注意了，看资料说html5 标准支持跨域的数据交换，应该也是一个将来可选的跨域数据交换的解决方案。

来个超简单的例子：

其中 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。 这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为：({msg:’this is json data’})

简述原理与过程：首先在客户端注册一个, 然后把的名字传给服务器。此时，服务器先生成 json 数据。 然后以 语法的方式，生成一个 , 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器jsoncallback php，解析标签，并执行返回的 文档，此时数据作为参数，传入到了客户端预先定义好的 函数里。（动态执行回调函数）

其他跨域方式

3、使用.name来进行跨域

对象有个name属性jsonp 跨域原理详解，该属性有个特征：即在一个窗口()的生命周期内,窗口载入的所有的页面都是共享一个.name的，每个页面对.name都有读写的权限，.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

比如：有一个页面a.html,它里面有这样的代码：

再看看b.html页面的代码：

a.html页面载入后3秒，跳转到了b.html页面，结果为：

我们看到在b.html页面上成功获取到了它的上一个页面a.html给.name设置的值。如果在之后所有载入的页面都没对.name进行修改的话，那么所有这些页面获取到的.name的值都是a.html页面设置的那个值。当然，如果有需要，其中的任何一个页面都可以对.name的值进行修改。注意，.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。

上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用.name进行跨域的原理。

下面就来看一看具体是怎么样通过.name来跨域获取数据的。还是举例说明。

比如有一个/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面/data.html里的数据。

data.html页面里的代码很简单，就是给当前的.name设置一个a.html页面想要得到的数据值。data.html里的代码：

那么在a.html页面中，我们怎么把data.html页面载入进来呢？显然我们不能直接在a.html页面中通过改变.来载入data.html页面，因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的来充当一个中间人角色，由去获取data.html的数据，然后a.html再去得到获取到的数据。

充当中间人的想要获取到data.html的通过.name设置的数据，只需要把这个的src设为/data.html就行了。然后a.html想要得到所获取到的数据，也就是想要得到的.name的值，还必须把这个的src设成跟a.html页面同一个域才行，不然根据前面讲的同源策略jsonp 跨域原理详解，a.html是不能访问到里的.name属性的。这就是整个跨域过程。

看下a.html页面的代码：

上面的代码只是最简单的原理演示代码，你可以对使用js封装上面的过程，比如动态的创建,动态的注册各种事件等等，当然为了安全，获取完数据后，还可以销毁作为代理的。网上也有很多类似的现成代码，有兴趣的可以去找一下。

通过.name来进行跨域，就是这样子的。

使用HTML5中新引进的.方法来跨域传送数据

.(,)  方法是html5新引进的特性，可以使用它来向其它的对象发送消息，无论这个对象是属于同源或不同源，目前IE8+、、、Opera等浏览器都已经支持.方法。

调用方法的对象是指要接收消息的那一个对象，该方法的第一个参数为要发送的消息，类型只能为字符串；第二个参数用来限定接收消息的那个对象所在的域，如果不想限定域，可以使用通配符 *  。

需要接收消息的对象，可是通过监听自身的事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

上面所说的向其他对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个对象。在讨论第二种方法的时候，我们说过，不同域的框架间是可以获取到对方的对象的，而且也可以使用.这个方法。下面看一个简单的示例，有两个页面

我们运行a页面后得到的结果:

我们看到b页面成功的收到了消息。

使用来跨域传送数据还是比较直观和方便的jsoncallback php，但是缺点是IE6、IE7不支持，所以用不用还得根据实际需要来决定。

结语：

除了以上几种方法外，还有flash、在服务器上设置代理页面等跨域方式，这里就不做介绍了。

以上四种方法，可以根据项目的实际情况来进行选择应用，个人认为.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。