JSONP 下

两个不同网站之间的交互（一个作为前端页面展示，一个作为后端数据访问）

由于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 请求？

1. 因为 JSONP 是通过动态创建 script 实现
2. 动态创建 script 的时候只能用 get 没有办法用 POST