JSONP的实现原理及简单封装思路

喜欢请关注 会不定时更新 ***

• 简单来说通过script标签的src属性,src属性不仅仅可以写 JS文件，可以请求任意文件。jsonp是通过JS这一特点实现，并添加async（异步属性）。

当我们用src请求一下后台文件（例如：php）。

1.如果我们在PHP文件中返回来的是 var data =1一条一句的话，将立即执行，那我们需要创建很多个script，才能完成我们的需求 (看下下面PHP部分代码)

2.而且加了async有可能在下面拿不到。

所以一般在后台文件中返回的是函数调用，前台定义一个函数。通过SRC属性地址后？callback=hi. 前端页面就是hi()。并且用函数的形式可以解决异步的问题。(看下下面PHP部分代码)

普通请求 通过控制台的 的 xhr 。而JSONP是通过控制台的js请求文件。

注意：动态创建的script都是异步的。

封装源码：

<script>
    function ajax(option){
        var defalus = {
            jsonp:'callback' //默认发送请求的值是函数名的值   
        }
        // 覆盖默认参数
        for(var attr in option){
            defalus[attr] = option[attr];
        }
        var p = '';
        if(defalus.data){
            for(var key in defalus.data){
                p += key+ '='+ defalus.data[key] + '&'
            }           
        }
        var cbName ;
        if(defalus.jsonpCallback){
            cbName = defalus.jsonpCallback;
        }else{
             // 回调函数名称
            cbName = 'jQuery' + ('v1.11.1' + Math.random()).replace(/\D/g,'') + '_' + new Date().getTime();
        }
        window[cbName] = function (data){
            defalus.success(data);   
        }
        var srcipt = document.createElement('script'); 
        
        srciptt.src = defalus.url + '?' + p + defalus.jsonp + '=' + defalus.jsonpCallback
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(srciptt);
    }
    ajax({
      url: 'http://lp.com/jsonp/data1.php',
      dataType: 'jsonp',
      jsonp: 'callback',
      jsonpCallback: 'hi',
      data: {flag:1,abc:'hi'},
      success: function(data){
        console.log(data)
      }
    });
    </script>

/*PHP部分*/
<?php 
  $cbName = $_GET['callback'];// hello
  // PHP数组
  $arr = array('uname'=>'张三','age'=>'12');
  // 把数组转化为json字符串
  $str = json_encode($arr);
  // echo $str;
  // echo 'var data = 1;';
  // echo 'foo(1)';
  echo $cbName.'('.$str.')';
 ?>