理解JSONP 上

跨域SRJ

如果我访问其他网站的服务器，可以吗？
由于JSONP可以规避同源策略，因此可以
下面我们自己做两个网站尝试一下
请求方：ada.com （浏览器）
响应方：jack.com （服务器）

Linux 或 mac直接

vi /etc/hosts

windows需要找到/etc/hosts文件比较难找，推荐Everything

在hosts文件下编辑两个网站

打开两个 node 服务器

将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请求

本文主要用于个人学习使用

理解JSONP 下