jsonp的奥秘

首先说明jsonp和ajax是两种无刷新获取后台数据的不同技术、

1.实现方式

    我们只需要在前台写上一个js函数 例如；

function aaa(sul){//此处一定要写一个参数，用来接收后台的数据
    for(var i in sul){
        alert(i);
    }
}

当我们点击某个div或者html元素

执行如下

window.onload=function(){
    var obj=document.getElementById('name');
    obj.onclick=function(){
        var url='http://a.com/test.php?back=aaa';//此处back的参数一定要和刚才定义的函数名相同
        var sc=document.createElement('script');//创建script标签
        var id=document.getElementsByTagName('head')[0];
        sc.setAttribute('src',url);//设置属性
        id.appendChild(sc);//添加到header标签内

    };
}

后台代码

$back=$_GET['back'];
$arr=[
    'name'=>'',
    'age'=>40,
    'sex'=>'女'
];
$data=json_encode($arr,JSON_UNESCAPED_UNICODE);

echo $back."($data)";//以字符串形式输出back并把参数放进去,此处相当于 "aaa($data)";后台只知道这是字符串

输出到浏览器

但是在输出到浏览器的同时也把数据带了过去，奥秘就在这相当于  aaa({name:'','age':40,'sex'=>'女'});

前台有我们写的函数，此时直接执行 aaa({name:'','age':40,'sex'=>'女'});

逻辑是提前写好的，只需要去执行