JSONP

使用JSONP解决同源限制问题

JSONP是json with padding的缩写，它不属于Ajax请求，但是可以模拟出ajax的效果（需要前后端配合）
1 将不同源的服务器端请求地址鞋子script标签的src属性中
就好比，用script标签引入jquery，就是从外部服务器获取的数据
2 服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数
eg：

const data = 'fn({name:"zhangsan",age:"14"})';
res.send(data)

3 在客户端全局作用域下准备好函数的定义,且要写在script标签的前面
function fn(data){}
4 在函数内部对服务器返回的具体数据进行处理

动态发送jsonp：用JS代码生成JS标签，然后追加到页面当中。

优化：应该想办法封装jsonp的代码
一个封装后的jsonp函数参考

function jsonp(options){
    //动态创建script标签
    var script =  document.createElement('script')
    //生成随机的函数名 math.random生成的是0-1的随机小数，把小数点替换成空
    var fnName = 'myJsonp'+Math.random().toString().replace('.','')

    //他已经不是全局函数了，要想办法把它变成全局的（options.success）
    window[fnName] =  options.success
    var params = ''
    for(var attr in options.data){
        params+='&'+attr+'='+options.data[attr]
    }
    //为标签添加src属性
    
    script.src = options.url + '?callback='+fnName+params
    //把标签追加到页面
    document.body.appendChild(script)
    script.onload = function(){
        document.body.removeChild(script)
    }
}

如果服务是express启动的，可以直接这样返回请求数据
：

res.jsonp({name:'lisi',age:13})

用jquery来发送jsonp

$("#btn").on('click',function(){
            $.ajax({
                url:'http://localhost:3001/jsonp',
                //代表现在要发送的请求是jsonp请求
                dataType:'jsonp',
                //jsonp:'cb',  修改callback函数名称
                //jsonCallback:'fnName'
                success:function(response){
                    console.log(response);
                    
                }
            })
        })