浅谈JSONP 的工作原理

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

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

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

说道JSONP，很简单，就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。
第三方产生的响应为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请求时也是这么做的。

巴特西

浅谈JSONP 的工作原理

最新文章

热门文章