跨域SRJ
如果我访问其他网站的服务器，可以吗？
由于JSONP可以规避同源策略，因此可以
下面我们自己做两个网站尝试一下
请求方：ada.com （浏览器）
响应方：jack.com （服务器）
Linux 或 mac直接
vi /etc/hosts
将script.src改成后端服务器的jack.com
script.src = 'http://jack.com:8002/pay'
跨域SRJ成功
代码分离：
耦合和解耦
那我们让前后端分离呗，即解耦
后端改成
//获取参数.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请求
本文主要用于个人学习使用
