jsonP的原理与在项目中的使用

前端之家收集整理的这篇文章主要介绍了jsonP的原理与在项目中的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
解决的问题:
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com 的服务器沟通,而 HTML 的 <script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

为了让浏览器可以在 <script> 元素执行,从 src 里 URL 回传的必须是可执行的 JavaScript。在 JSONP 的使用模式里,该 URL 回传的是由函数呼叫包起来的动态生成 JSON,这就是JSONP 的“填充(padding)”或是“前辍(prefix)”的由来。

Jsonp原理:

首先在客户端注册一个callback,然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function,function 名字就是传递上来的参数 jsonp.

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

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



代码

比如客户想访问
http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction
   假设客户期望返回JSON数据:
["customername1","customername2"]

   那么真正返回到客户端的Script Tags:
callbackFunction([“customername1","customername2"])

   可能的调用方式:
 
 <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction" />


同源策略好处:
1. 保护客户的数据的隐私数据,比如cookie等信息,重点预防,比如baidu.com的程序就不能访问google.com域下的私有数据,否则,你的gmail就有可能被攻破了。 2. 保护服务器端的资源,一个比如baidua.com不能直接嵌套baidu.com的内容

猜你在找的Json相关文章