关于JSONP

用 img 发送请求

只能用 get 方法，只能以图片的形式展示

  
  


  
你的账户余额是&&&amount&&
  打钱

后台

...
if(path === '/pay'){
  // 从文件读取金额
  var amount = fs.readFileSync('./db','utf-8')
  var newAmount = amount -1
  fs.writeFileSync('./db',newAmount) // 更新的数据写入文件
  response.setHeader('Content-type','img/jpg')
  response.statusCode = 200 
  response.write(fs.readFileSync('./dog.jpg'))
  
  response.end()
}else{
  response.statusCode = 400
  response.write('fail')
  response.end()
}

用 script 方法请求

script 可以发get请求，但只能以脚本的形式运行

  
  


  
你的账户余额是&&&amount&&
  打钱
  
  

后台

...
if(path === '/pay'){
  // 从文件读取金额
  var amount = fs.readFileSync('./db','utf-8')
  var newAmount = amount -1
  fs.writeFileSync('./db',newAmount)
  response.setHeader('Content-type','application/javascript')
  response.statusCode = 200 
  response.write('alert("pay")')
  
  response.end()
}else{
  response.statusCode = 400
  response.write('fail')
  response.end()
}
...

请求后页面中会出现 ，所以浏览器会去执行里面得内容 alert('pay')，执行完之后再去调用 onload，所以打钱成功后会先出现'pay'，然后再出现'打钱成功'。
因此，可以在页面中去掉 onload 成功的监听，直接放到后台返回一个再浏览器执行的js字符串。

  
  


  
你的账户余额是&&&amount&&
  打钱
  
  

...
if(path === '/pay'){
  // 从文件读取金额
  var amount = fs.readFileSync('./db','utf-8')
  var newAmount = amount -1
  fs.writeFileSync('./db',newAmount)
  response.setHeader('Content-type','application/javascript')
  response.statusCode = 200 
  response.write(`
// 成功后直接数字减少，不再出现成功提示
    amount.innerText = amount.innerText - 1 
  `)
  response.end()
}else{
  response.statusCode = 400
  response.write('fail')
  response.end()
}
...

但是这样每次点击难就就会新建一个

这个方案叫做 SRJ（ Server rendered javascript )。

请求另一个网站的 script

假设有两个网站：frank.com 和 jack.com。现在 frank网站的前端去访问jack网站的后端。
frank网站前端的代码，点击后数字减少，是jack网站后台的数字。

  
  


  
你的账户余额是&&&amount&&
  打钱
  
  

jack网站后端代码

if(path === '/pay'){
  // 从文件读取金额
  var amount = fs.readFileSync('./db','utf-8')
  var newAmount = amount -1
  fs.writeFileSync('./db',newAmount)
  response.setHeader('Content-type','application/javascript')
  response.statusCode = 200 
  response.write(`
    amount.innerText = amount.innerText - 1

  `)
  
  response.end()
}else{
  response.statusCode = 400
  response.write('fail')
  response.end()
}

但是目前这样有个问题，说明 jack.com 的后端程序员需要对 frank 前端的细节了解很清楚，这个现象叫做耦合，需要解决这个问题，解耦。
调整后端代码，后端不管前端要执行代码是什么，只需要调用前端给的函数就可以了。

...
if(path === '/pay'){
  // 从文件读取金额
  var amount = fs.readFileSync('./db','utf-8')
  var newAmount = amount -1
  fs.writeFileSync('./db',newAmount)
  response.setHeader('Content-type','application/javascript')
  response.statusCode = 200 
  response.write(`
    xxx.call(undefined,'success')
  `)
  
  response.end()
}else{
  response.statusCode = 400
  response.write('fail')
  response.end()
}
...

调整前端代码，给一个 xxx 函数

  
  


  
你的账户余额是&&&amount&&
  打钱
  
  

这样，jack网站的程序员不需要知道frank网站的前段代码，只需要调用xxx函数，然后给一个结果，成功或者失败就可以，前段通过执行函数就知道结果是什么了。

但是后端怎么知道函数是 xxx 呢，因此用callbackName='xxx'传参告诉后端，让后端去调用。

  
  


  
你的账户余额是&&&amount&&
  打钱
  
  

...
if(path === '/pay'){
  // 从文件读取金额
  var amount = fs.readFileSync('./db','utf-8')
  var newAmount = amount -1
  fs.writeFileSync('./db',newAmount)
  response.setHeader('Content-type','application/javascript')
  response.statusCode = 200 
  response.write(`
// 调用 callbackName
    ${query.callbackName}.call(undefined,'success')
  `)
  
  response.end()
}else{
  response.statusCode = 400
  response.write('fail')
  response.end()
}
...

JASONP

请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）

1.请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
2.响应方根据查询参数callbackName，构造形如:

yyy.call(undefined, '你要的数据')
yyy('你要的数据')

3.这样的响应
4.浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
5.那么请求方就知道了他要的数据
6.这就是 JSONP

预定：
1.callbackName -> callback
2.yyy -> 随机数 12343123()

button.addEventListener('click', (e)=>{
    let script = document.createElement('script')
    // 0~1000000 之间的一个随机整数
    // frank123414
    let functionName = 'frank'+ parseInt(Math.random()*1000000 ,10)
    window[functionName] = function(){  // 每次请求之前搞出一个随机的函数
        amount.innerText = amount.innerText - 0 - 1
    }
    script.src = 'http://jack.com/pay?callback=' + functionName
    document.body.appendChild(script)
    script.onload = function(e){ // 状态码是 200~299 则表示成功
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
    script.onerror = function(e){ // 状态码大于等于 400 则表示失败
        e.currentTarget.remove()
        delete window[functionName] // 请求完了就干掉这个随机函数
    }
})

...
if (path === '/pay'){
    let amount = fs.readFileSync('./db', 'utf8')
    amount -= 1
    fs.writeFileSync('./db', amount)
    let callbackName = query.callback
    response.setHeader('Content-Type', 'application/javascript')
    response.write(`
        ${callbackName}.call(undefined, 'success')
    `)
    response.end()
}
...

用jQuery

  
  


  
你的账户余额是&&&amount&&
  打钱
  
  

JSONP为什么不支持 POST 请求

1.因为JSONP是通过动态创建script实现的；
2.动态创建script的时候只能用get，无法用post。