使用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);
}
})
})
