jQuery中jsonp函数实现

　　因为浏览器中的同源策略，不一样的域名，不一样的协议，甚至不一样的端口都没法请求数据。所以出现了浏览器跨域请求数据问题。

　　Jsonp是解决跨域问题的一个很是流行的方法。

　　JSONP（JSON with Padding），其实就是被包裹在函数调用中的JSON。

callback({"name": "Kate"});

　　1. JSONP原理

　　经过script标签进行跨域操做，载入的请求js文件中的内容会执行咱们在url中指定的函数，而且，传入的参数，就是咱们请求的数据。

　　2. JSONP简单实现

 1 <script>
 2 // 先定义咱们将要处理数据的函数
 3 function myFun(data) {
 4     console.log(data);
 5 }
 6 </script>
 7 
 8 <!-- 咱们使用script标签来进行跨域请求，并使用callback标明咱们将要处理数据的函数 -->
 9 <!-- 此处我使用的是聚合数据的数据资源 -->
10 <script src="http://v.juhe.cn/expressonline/getCarriers.php?key=6a1038e454e6d4b25457b911c8d9b815&callback=myFun"></script>

最终显示为：

咱们成功获取不一样域名下的资源。并经过自定义的myFun函数将得到的数据打印出来了。

　　3. 简单实现jQuery中jsonp

　　在使用jsonp过程当中，可能由于请求数据的API要求不一样，咱们须要构建本身的jsonp方法，下面咱们简单介绍一种相似jQuery中jsonp的实现。

　　首先，咱们建立一个以jQuery开头的随机的函数名，并将其挂载到window对象中。在这个函数中，咱们调用咱们传入的回调函数处理数据。

　　而后，咱们开始处理传入的url，此时，咱们规定传入的url不带有callback查询字符串，方便咱们根据不一样的API要求传入对应的参数。

　　最后，咱们建立script标签，并指定其src为前面处理好的url，将其添加到文档中，便可获取数据。

 1 <script>
 2 // 自定义框架名称myFrame
 3 var myFrame = {};
 4 
 5 // 添加jsonp方法
 6 myFrame.jsonp = function(url, callback) {
 7     // 生成随机函数名
 8     var cbname = 'jQuery' + new Date().getTime();
 9 
10     // 把cbname做为函数名挂载到window对象上
11     window[cbname] = function(data) {
12         // 调用传入的回调函数处理数据
13         callback(data);
14 
15         // 调用数据以后，删除建立的script标签
16         // 放置script标签无限增加
17         document.body.removeChild(script);
18     }
19 
20     // 拼接url,将callback添加到url中，
21     // 如：http://api.douban.com/v2/movie/in_theaters?callback=;jQuery1487687886270
22     url += url.indexOf('?') == -1 ? '?' : '&';
23     url += 'callback=' + cbname;
24 
25     // 建立script标签
26     var script = document.createElement('script');
27     // 添加script标签属性
28     script.src = url;
29     script.type = 'text/javascript';
30 
31     // 将script标签添加到文档中,此时开始请求咱们的数据
32     document.body.appendChild(script);
33 
34 }
35 
36 // 调用框架中的方法，此时使用豆瓣API
37 myFrame.jsonp('http://api.douban.com/v2/movie/in_theaters', function(data) {
38     console.log(data);
39 });
40 </script>

成功请求到数据：

 

script标签请求到的内容：