简单的jsonp实现跨域原理

【转】简单的jsonp实现跨域原理

什么原因使jsonp诞生？ 

       传说，浏览器有一个很重要的安全限制，叫做"同源策略"。同源是指，域名，协议，端口相同。举个例子，用一个浏览器分别打开了百度和谷歌页面，百度页面在执行脚本的时候就会检查这个脚本是否属于百度页面，只有和百度同源的脚本才会执行，这就是同源策略。（相当于给脚本按了一个大门，只允许在大门内部活动）

       但是我们在工作中有时又会需要和不同域名的网站进行交流，由于同源策略的限制，使操作变得有些困难。jsonp是目前比较主流的跨域方式。什么是jsonp呢？我们来了解一下。

 

 jsonp和json有什么关系吗？

       jsonp（JSON with Padding）和json很像，但却完全不是一回事儿。json和xml有些类似，是用于存储和表达数据的一种方式，也是javascript对象的表示。而jsonp是获取、传递数据的一种方式。打个比方，在早前的飞鸽传书，大家都知道吧？json相当于传递的书信，而jsonp是携带书信的飞鸽。这么一说，相信大家就都明白了！^_^

 

 jsonp的原理是什么？

       整体来说，jsonp实现跨域的原理是跨域的服务端把客户端所需要的数据放进客户端本地的一个js方法里，进行调用，客户端在本地的js对返回的数据进行处理。这样就实现了不同域名下的两个站点间的交流。

       由于<script>标签的src可以跨域，利用这一点，就有了jsonp这种非正式传输协议。因为有可能是多个不同站点都要访问这个服务端，那么各个站点要调用的方法可能是各不相同的，如果把方法名写死的话，就会很不和谐。所以解决的办法是各个站点来访问服务端时，在url中带一个参数（callback）过来，服务端获取到这个参数，就会在生成js代码时，以这个callback参数作为方法名，再把数据放到这个方法里。这样各个站点就可以调用各自的方法了。这也是jsonp的一个要点。

 

jsonp实现方式

 

写一个模拟jsonp原理的一个简单的例子

本地客户端：

<script type="text/javascript" src="http://example.com/Index.aspx?callback=Hello"></script>

 

本地回调函数

function Hello(data){

     alert(data.result);

}

 

 

跨域服务端：

protected void Page_Load(object sender, EventArgs e)
{

     string callback=Request.QueryString["callback"];//获取客户端回调函数名，值为"Hello"

     Response.Write(callback+"({result:1})");  //调用客户端指定函数,并把数据传进去

 }

 

 

 

分类: Js

标签: jsonp