两个不同网站之间的交互（一个作为前端页面展示，一个作为后端数据访问）
由于JSONP可以规避同源策略，因此可以自己做两个网站尝试一下：
请求方：ada.com （浏览器）
响应方：jack.com （服务器）
Linux 或 mac直接
vi /etc/hosts
windows需要找到/etc/hosts文件 比较难找，推荐Everything
在hosts文件下用管理员身份运行编辑器
开两个server
将script.src改成后端服务器的jack.com
script.src = 'http://jack.com:8002/pay'
成功在 ada.com里接收到jack.com，ada.com 的前端程序员成功向jack.com 的后端程序员发起请求并得到响应
跨域SRJ成功
代码分离：
上面的amount.innerText=amount.innerText-1就是前端页面的代码，这说明jack.com 的后端程序元需要对ada.com的页面细节了解的很清楚，这种情况叫做耦合
那我们让前后端分离呗，即解耦
后端改成
//获取参数.call（this，成功）
response.write(`${query.callbackName}.call(undefined,'success')`)
前端给参
//callbackName = 随便
script.src = 'http://jack.com:8002/pay?callbackName=yyy'
JSONP
上面代码高亮的部分就是JSON（一个键必须是双引号的对象）
JSON左边的代码就是左padding，右边就是右padding，所以JSONP=JSON +Padding
理一下过程
请求方：ada.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）
1.请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
2.响应方根据查询参数callbackName，构造形如
yyy.call(undefined, '你要的数据')
yyy('你要的数据')
这样的响应
3.浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
4.那么请求方就知道了他要的数据
这就是 JSONP
约定：
callbackName -> callback
yyy -> 随机数 如 ada1213123123412()
JSONP方案
button.addEventListener('click', (e)=>{
let script = document.createElement('script')
let functionName = 'ada'+ parseInt(Math.random()*10000000 ,10)
window[functionName] = function(){ // 每次请求之前搞出一个随机的函数
amount.innerText = amount.innerText - 1
}
script.src = 'http://jack.com:8002/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e){ // 状态码是 200~299 则表示成功
e.currentTarget.remove()
delete window[functionName] // 请求完了就干掉这个随机函数
}
script.onload = function(e){ // 状态码大于等于 400 则表示失败
e.currentTarget.remove()
delete window[functionName] // 请求完了就干掉这个随机函数
}
})
Node部分：
if (path === '/pay') {
var amount = fs.readFileSync('./db', 'utf8')
var newAmount = amount - 1
fs.writeFileSync('./db', newAmount)
response.setHeader('Content-Type', 'application/javascript')
response.write(`${query.callbackName}.call(undefined,
'success'`)
response.end()
jQuery写法
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
JSONP 为什么不支持 POST 请求？
- 因为 JSONP 是通过动态创建 script 实现
- 动态创建 script 的时候只能用 get 没有办法用 POST
