什么是JSONP

JSONP就是一个对象，有左padding和右padding，对象里的key要加双引号（符合JSON语法），这个对象叫做JSON，左padding和右padding叫做P，合起来就是JSONP。

统一把“我请求一个script，script调用我的一个函数同时把这个函数放在第一个参数的这种形式叫做JSONP，只不过特殊情况下会出现JSON，一般都是StringP。

JSONP要解决的问题是两个网站之间要怎么交流。

JSONP的完整过程：

请求方：xxx.com的前端程序员（浏览器）
响应方：yyy.com的后端程序员（服务器）
1.请求方创建script.src指向响应方，同时传一个查询参数?callbackName = xxx(任意名字)
2.响应方根据查询参数callbackName，构造形如：
(1)xxx.call(undefined,'你要的数据')
(2)xxx('你要的数据')
这样的响应，然后把数据作为第一个参数传给请求方
3.浏览器接收到响应，就会执行xxx.call(undefined,'你要的数据')
4.那么请求方就知道了他要的数据

行业达成的共识：

1.callbackName约定必须叫做callback/jquery-callback
2.callback的名字可以随便取，但是不要以数字开头。

符合约定的写法：

JS里写：

button.addEventListener('click',(e) => {
  let script = document.createElement('script')
  //创建一个随机数，调用完后就立马移除，就不会污染全局变量
  let functionName = 'wen' + parseInt(Math.random()*100000,10)
window[functionName] = function(result){
  if(result === 'success'){
    amount.innerText = amount.innerText - 1
}else{
    alert('失败')
      }
}
script.src = 'http://xxx.com:8001/pay?callback = ' + functionName
document.body.appendChild(script) //要把script放到body里，不然不生效
script.onload = function(e){
  e.currentTarget.remove() //移除当前的script  
  delete window[functionName] //移除调用的随机函数
}
script.onerror = function(e){
  e.currentTarget.remove()
  delete window[functionName]
}
})

node.js里写：

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

JSONP的jQuery的写法：

 $.ajax({ //虽然API是ajax，但是跟ajax没有关系
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })     //使用jQuery的话，如何构造script不用管，如何构造callback也不用管，如何调用后台也不用管

 $.jsonp()

JSONP为什么不支持POST请求

因为JSONP是通过动态创建script创建的，动态创建script的时候只能用get，没有办法用post。