jsonp协议原理深度解析
前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了。 虽然后来解决了,但是对于喜欢解决问题的我,心里却一直耿耿于怀,必须得把这个研究透彻了,于是我开始翻阅资料,看到后面真有种豁然开朗的感觉,于是打算做个笔记与大家分享。 JSON和JSONP的区别JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种跨域数据交互的协议,使用JSONP方法获取到的仍然是json格式的数据。 说白了, JSONP详细阐述 我们都知道, 如下图所示,就是使用json格式获取跨域数据返回的错误提示:
那么该如何解决呢?使用框架的前端童鞋们可能都有自己相应的办法,比如jquery就是把 下面就开始为大家详细阐述,首要思想就是利用scirpt标签来引入跨域的数据。我们从最开始慢慢来深入jsonp的过程。 引导步骤1 编写 1 alert(‘hello’);
然后编写 1 <script type='text/javascript' src='http://b.com/b.js'>
运行a.html,结果很明显,肯定会弹出hello。 引导步骤2 修改 1 myFunction('hello');
然后修改 1 <script type='text/javascript' src='http://b.com/b.js'>
2 <script>
3 function myFunction(str){ //定义处理数据的函数
4 alert(str + ' world');
5 }
6 </script>
运行a.html 结果是弹出‘hello world’。这个应该也毫无疑问。 引导步骤3 让我们再看一下上面的步骤2,b.js中的‘hello’就是b.com域名下的数据了,而能够在a.com/a.html中执行显示出来,这不就已经实现了 另外,因为script标签中的src 不一定要指向js文件,而可以指向任何地址。 所以,我们把上面步骤2中a.html的内容: 引导步骤4上面的数据都是静态的,是在文件内写死的,所以并不能满足我们的需求了吧。。。因为我们ajax请求数据是实时变化的,所以我们要把数据变成动态的了。 我们可以让script表器去调用一个动态的页面(接口),去实现获取动态数据,这里就想到了 编辑 1 <script type='text/javascript' src='http://b.com/b.aspx?callback=myFunction'>
我们在src引用地址中加了 ?callback=myFunction ,意思是把显示数据的函数也动态的传入了。
使用jsonp方法获取数据,还有一个要点就是 1 protected void page_load(object sender,EventArgs e){ 2 if(this.IsPostBack == false){ 3 string callback = ''; 4 if(Request["callback"] != null){ 5 callback = request["]; 6 string data = hello"; 7 Response.Write(callback+("+ data + )"); 接口页面返回的数据格式“函数(参数)”的格式。 8 } 9 } 10 } 代码的意思很简单,就是获取调用函数的参数。如果这里调用 引导步骤5再看上面的步骤,虽然获取的数据是动态的了,但在页面上引入一个script标签,却只能执行一次,获取一次,显然还是不能满足需求的。所以我们在需要的时候,就得动态的添加一次这样的script标签。 所以我们在这里需要封装一个函数: 1 function addScript(src){
2 var script = document.createElement('script');
3 script.setAttribute('type','text/javascript');
4 script.src= src;
5 document.body.appendChild(script);
6 }
需要调用的时候,就去执行: 1 addScript('b.com/b.aspx?callback=myFunction');
2
function myFunction(data){4 alert(data);
5 }
jquery实现跨域jquery跨域方法1 $.ajax({
2 url: 'b.com/b.json',不同的域
3 type: 'GET',0)"> jsonp模式只有GET是合法的
4 dataType: 'jsonp',0)"> 数据类型
5 jsonp: 'callback',0)"> 指定回调函数名,与服务器端接收的一致,并回传回来
6 success: function(data) {
7 console.log(data);
8 }
9 })
|