深入分析深入分析jsonp协议原理协议原理
今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:’jsonp’就能够很easy的解决了。
但是因为当时后端没有支持jsonp来访问,后来他在实现这个功能的时候问了我一句,jsonp形式返回的格式是怎么样子的?我
一直以来只知道怎么使用,迷迷糊糊的却没有答上来。。。
虽然后来解决了,但是对于喜欢解决问题的我,心里却一直耿耿于怀,必须得把这个研究透彻了,于是我开始翻阅资料,看到
后面真有种豁然开朗的感觉,于是打算做个笔记与大家分享。
JSON和和JSONP的区别的区别
JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种跨域
数据交互的协议,使用JSONP方法获取到的仍然是json格式的数据。
说白了,用JSON来传数据,靠JSONP来跨域。
JSONP详细阐述详细阐述
我们都知道,一个页面的ajax只能获取和此页面同域的数据。,所以当我们需要跨域获取数据的时候就需要使用到JSONP方法来获取
了。
如下图所示,就是使用json格式获取跨域数据返回的错误提示:
那么该如何解决呢?使用框架的前端童鞋们可能都有自己相应的办法,比如jquery就是把dataType设为jsonp就能解决了,但是我
们在使用的时候有没有想过,为什么这样就能解决呢?中心思想又是什么呢?
下面就开始为大家详细阐述,首要思想就是利用scirpt标签来引入跨域的数据。我们从最开始慢慢来深入jsonp的过程。
引导步骤1
编写b.com/b.js内容:
复制代码 代码如下:alert(‘hello’);
然后编写a.com/a.html内容:
复制代码 代码如下:<script type=’text/javascript’ src=’http://b.com/b.js’>
运行a.html,结果很明显,肯定会弹出hello。
引导步骤引导步骤2
修改b.com/b.js文件内容:
复制代码 代码如下:myFunction(‘hello’);
然后修改a.com/a.html内容:
<script type='text/javascript' src='http://b.com/b.js'>
<script>
function myFunction(str)
{ //定义处理数据的函数
alert(str + ' world');
}
</script>
运行a.html 结果是弹出‘hello world’。这个应该也毫无疑问。
引导步骤引导步骤3