2019-04-04 JSONP

2019-04-06  本文已影响0人  追夢的蚂蚁

SRJ方案(Server Rendered javascript)[服务器返回的JavaScript]:无刷新,局部更新内容的方案;
为什么叫jsonp?

${query.callbackName}.call(undefined,   //左padding
{"success":true,                         //json
"left":${newAmount}}                     //json
)                                       //右padding

JSON+Padding = JSONP
(可以理解为:String + Padding = StringP)


什么是jsonp?
JSONP
请求方:frank.com 的前端程序员(浏览器)
响应方:jack.com 的后端程序员(服务器)

  1. 请求方创建 script,src 指向响应方,同时传一个查询参数 ?callbackName=yyy
  2. 响应方根据查询参数callbackName,构造形如
    i. yyy.call(undefined, '你要的数据')
    ii. yyy('你要的数据')
    这样的响应
  3. 浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据')
  4. 那么请求方就知道了他要的数据
    这就是 JSONP

约定:

  1. callbackName -> callback
    yyy -> 随机数
  2. frank12312312312321325()
 $.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

jsonp来源:form提交表单会刷新页面->img只能知道succee和fail,不知道数据->script+callback就是jsonp了

上一篇 下一篇

猜你喜欢

热点阅读