0%

What's JSONP

发表于 更新于

wiki 上解释到 JSONP is JSON with padding

其实个人看来啥也没说啊。stackoverflow上还是有不错的解释。我在这里会解释我看来的 JSONP

现有两个人想进行数据交互，他们是

请求方：网站1的前端程序员（浏览器）

响应方：网站2的后端程序猿（服务器）

JSONP 就是为解决服务器与客服端跨源（网站1到网站2）通信，简单实用

  1. 请求方动态创建 script， src 指向响应方，传递查询参数 ?callback=xxx

  2. 响应方根据查询参数 callback, 构造出

    xxx.call(undefined, ‘msg’)

    xxx(‘msg’)这样的响应

  3. 浏览器接到响应就会去执行 xxx(‘msg’)

  4. 请求方就知道了他要的数据了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
button.addEventListener('click', (e) => {
  let script = document.creatElement('script')//动态script
  let functionName = 'marsorsun' + parseInt(Math.radom()*1000000, 10)//函数名随机
  window[functionName] = function(){
    amount.innerText = amount.innerText - 1
  }
  script.src = '/pay?callback=' + functionName
  document.body.appendChild(script)
  script.onload = function(e){//success
    e.currentTarget.remove()//从页面中移除<script>
    delete window[functionName]//干掉随机数
  }
  script.onerror = function() {
    e.currentTarget.remove()
  }
})
1
2
3
4
5
6
7
8
9
10
11
//后端代码
if(path === '/pay'){
  let amount = fs.readFileSync('./db', 'utf8')//db中就一个数100
  amount--
  fs.writeFileSync('./db', amount)
  response.setHeader('Content-type', 'application/javascript')
  response.write(`
	${callback}.call('undefined', 'success')
`)
  response.end()
}
1
2
3
4
5
6
7
8
9
10
11
12
//jQuery 直接简单到你看不懂
$.ajax({
 url: "http://jack.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

 $.jsonp()

参考：