浅谈JSONP 的工作原理

  小编最近在工作中经常用到 jsonp 这个东西, 表示之前从来没用过  最近稍微研究了下 当然很多内容来源于网上 收集整理 你懂的 ~~~

 

话说我们访问一个页面的时候 需要像另一个网站获取部分信息, 这就是所谓的跨域请求才能完成的功能, 现实生活中有很多 比如引入外部js, img 等等, 说到发送请求, 在web2.0的时代 我们避免不了 ajax 请求了, 当然我们在

工作中用到 ajax 跨域请求 是必须遇到的,当然ajax 是不支持跨域请求的 说到这里我比较汗颜啊, 当然天无绝人之路,有个叫jsonp 的家伙 可以解决这个问题, 下面我们就来分析一下在这个东西是怎么工作的额 。

说道JSONP,很简单,就是利用 
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: 
callback({"name":"hax","gender":"Male"}) 
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 

可能多数人对它的知晓程度仅限于jQuery,jQuery提供了发送jsonp请求的方法。比如在使用$.ajax()方法的时候

     

   jQuery(document).ready(function(){ 
        $.ajax({
             type: "p",
             url: "http://hf-test.haoju.cn/esf/ajax/test",
             dataType: "jsonp",
             jsonp: "callback",
             success: function(json){
             //  alert(json);
             },
             error: function(){
                
             }
         });
     });

   jQuery将jsonp请求封装成类似ajax请求的样子,这样能让开发者在使用的时候更加方便,但是实际上,jsonp压根不是通过XMLHttpRequest来实现的。不得不说你们被骗了

下面的代码你就知道jsonp的如何实现的了

 

var callbackName = 'callback';
window[callbackName] = function (data) { alert(data); // 对返回的数据做后续处理 }
var script = document.createElement('script'); script.src = 'http://hf-test.haoju.cn/esf/ajax/test?callback='+callbackName; document.body.appendChild(script);

 

这是前端部分的代码,要想真正实现JSONP的功能,还需要后端的配合。针对上面这个例子,当前端请求这个script地址的时候,后端只要按以下内容响应就会有神奇的效果:

echo   callback('my is jsonp');

说道这儿,很多人也许就恍然大悟了。JSONP名字听着高端,其实也不过如此嘛。

实际上,jQuery发JSONP请求时也是这么做的。

 

转载于:https://www.cnblogs.com/wlgaojin/p/4877051.html

你可能感兴趣的:(浅谈JSONP 的工作原理)