封装JSONP 函数，方便请求发送

封装JSONP 函数，方便请求发送

封装jsonp的代码和封装Ajax的代码非常的相似！可以参照食用偶！

<button id="btn">点击我发送请求！</button>
<script>
function fn2 (data, succ) {
console.log('客户端的函数fn被调用了！')
console.log(data, succ)
}
</script><script type="text/javascript">
const btn = document.getElementById('btn');
btn.onclick = function () {
jsonp({
// 请求地址！
url: 'http://localhost:3001/better?callback=fn2'
})
}
function jsonp(options) {
// 1 动态的创建一个script标签
const script = document.createElement('script');
// 为script标签添加src属性
script.src = options.url;
// 将script标签追加到页面当中！
document.body.appendChild(script);
// 给script标签添加onload事件， 当script标签被加载完成的时候删除标签！
script.onload = function () {
document.body.removeChild(script);
}
} </script>


封装代码优化！

1第一个优化的地方就是处理返回服务器端返回的函数fn2【现在我们希望fn2函数和jsonp函数进行关联！怎么做？！】把外部函数变成参数函数!再把参数函数变成一个全局函数!

<button id="btn">点击我发送请求！</button>
<button id="btn2">点击我发送请求！</button>
<script type="text/javascript">
const btn = document.getElementById('btn');
btn.onclick = function () {
jsonp({
// 请求地址！
url: 'http://localhost:3001/better',
success: function (data, succ) {
console.log(123);
console.log(data, succ)
}
})
}
const btn2 = document.getElementById('btn2');
btn2.onclick = function () {
jsonp({
// 请求地址！
url: 'http://localhost:3001/better',
success: function (data, succ) {
console.log(234234234);
console.log(data, succ)
}
})
}
function jsonp(options) {
// 1 动态的创建一个script标签
const script = document.createElement('script');
// myjsonp后面生成随机数字！
let fnName = 'myJsonp' + Math.random().toString().replace('.', '');
// 他已经不是一个全局函数了！
// 我们要想办法让它变成一个全局函数！
// 第二个地方就是现在的函数已经变成了一个匿名函数了，所以名字变成了一个亟待解决的问题!
window[fnName] = options.success;
// 为script标签添加src属性
script.src = options.url + '?callback=' + fnName;
// 将script标签追加到页面当中！
document.body.appendChild(script);
// 给script标签添加onload事件， 当script标签被加载完成的时候删除标签！
script.onload = function () {
document.body.removeChild(script);
}
} </script>


jsonp代码的最终优化【如果要求传入更多的callback函数应该怎么做呢？!】

<button id="btn">点击我发送请求！</button>
<button id="btn2">点击我发送请求！</button>
<script type="text/javascript">
const btn = document.getElementById('btn');
btn.onclick = function () {
jsonp({
// 请求地址！
url: 'http://localhost:3001/better',
data: {
name: 'lvchengxin',
age: 20
},
success: function (data, succ) {
console.log(123);
console.log(data, succ)
}
})
}
const btn2 = document.getElementById('btn2');
btn2.onclick = function () {
jsonp({
// 请求地址！
url: 'http://localhost:3001/better',
success: function (data, succ) {
console.log(234234234);
console.log(data, succ)
}
})
}
function jsonp(options) {
// 1 动态的创建一个script标签
const script = document.createElement('script');
// 拼接字符串的变量
let params = '';
for (let attr in options.data) {
params += '&' + attr + '=' + options.data[attr];
}
// myjsonp后面生成随机数字！
let fnName = 'myJsonp' + Math.random().toString().replace('.', '');
// 他已经不是一个全局函数了！
// 我们要想办法让它变成一个全局函数！
// 第二个地方就是现在的函数已经变成了一个匿名函数了，所以名字变成了一个亟待解决的问题!
window[fnName] = options.success;
// 为script标签添加src属性
script.src = options.url + '?callback=' + fnName + params;
// 将script标签追加到页面当中！
document.body.appendChild(script);
// 给script标签添加onload事件， 当script标签被加载完成的时候删除标签！
script.onload = function () {
document.body.removeChild(script);
}
}
</script>


服务器端代码的优化

app.get('/better', (req, res) => {
// 接收客户端传递过来的函数名称
// const fnName = req.query.callback;
// 将函数名称对应的函数调用代码返回给客户端！
// const data = JSON.stringify([{name: "lvhang"},{test: "如果你能看到这条消息，说明你已经解决了同源的问题!你用的或许是jsonph or CROS但是，这已经不重要了！"}]);
// const result = fnName + '(' + data + ')';
// setTimeout( () => {
// }, 1000)
// res.send(result)// 在jsonp的内部就是干的上面的事情！
res.jsonp({name: 'lvchengxin', age: 20})
})