关于JSONP

用 img 发送请求

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>

<script>
  button.addEventListener('click',(e)=>{
    let image = document.createElement('img')
    src = '/pay'
// 根据后台返回的状态码判断成功或者失败，200成功，400失败
    image.onload = function(){
      alert('打钱成功')
      amount.innerText = amount.innerText - 1 // 成功后数字自动减一
    }
    image.onerror = function(){
      alert('打钱失败')
    }
  })
</script>
</body>
</html>

后台

...
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请求，但只能以脚本的形式运行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>
  
  <script>
    button.addEventListener('click',(e)=>{
      let script = document.createElement('script')
      script.src = '/pay'
      //只有把 script 放到页面中，才可以发请求
      document.body.appendChild(script)
      script.onload = function(){
        alert('打钱成功')
        amount.innerText = amount.innerText - 1 // 成功后数字自动减一
      }
      script.onerror = function(){
        alert('打钱失败')
      }
    })
  </script>
</body>
</html>

后台

...
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()
}
...

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>
  
  <script>
    button.addEventListener('click',(e)=>{
      let script = document.createElement('script')
      script.src = '/pay'
      //只有把 script 放到页面中，才可以发请求
      document.body.appendChild(script)
      script.onerror = function(){
        alert('打钱失败')
      }
    })
  </script>
</body>
</html>

...
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()
}
...

但是这样每次点击难就就会新建一个<script>，因此还是添加一个onload监听，来删除<script>，不管成功还是失败，都会删除。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>
  
  <script>
    button.addEventListener('click',(e)=>{
      let script = document.createElement('script')
      script.src = '/pay'
      //只有把 script 放到页面中，才可以发请求
      document.body.appendChild(script)
      script.onload = function(e){
        e.currentTarget.remove()
      }
      script.onerror = function(){
        alert('打钱失败')
      }
    })
  </script>
</body>
</html>

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

请求另一个网站的 script

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>
  
  <script>
    button.addEventListener('click',(e)=>{
      let script = document.createElement('script')
      script.src = 'http://jack.com/pay'
      document.body.appendChild(script)
      script.onload = function(e){
        e.currentTarget.remove()
      }
      script.onerror = function(){
        alert('打钱失败')
      }
    })
  </script>
</body>
</html>

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 函数

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>
  
  <script>
    function xxx(result){
      alert('这个是frank的前段代码')
      alert(`得到的结果是${result}`)
    }
    button.addEventListener('click',(e)=>{
      let script = document.createElement('script')
      script.src = 'http://jack.com/pay'
      document.body.appendChild(script)
      script.onload = function(e){
        e.currentTarget.remove()
      }
      script.onerror = function(){
        alert('打钱失败')
      }
    })
  </script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>
  
  <script>
    function xxx(result){
      alert('这个是frank的前段代码')
      alert(`得到的结果是${result}`)
    }
    button.addEventListener('click',(e)=>{
      let script = document.createElement('script')
// callbackName 传参
      script.src = 'http://jack.com/pay?callbackName=xxx'
      document.body.appendChild(script)
      script.onload = function(e){
        e.currentTarget.remove()
      }
      script.onerror = function(){
        alert('打钱失败')
      }
    })
  </script>
</body>
</html>

...
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

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>xxx</title>
</head>
<body>
  <h5>你的账户余额是<span id="amount">&&&amount&&</span></h5>
  <button id="button">打钱</button>
  
  <script>
    button.addEventListener('click',(e)=>{
     $.ajax({
       url: "http://jack.com/pay",
       dataType: "jsonp",
       success: function( response ) {
         if(response === 'success'){
           amount.innerText = amount.innerText - 1
         }
       }
     })
    })
  </script>
</body>
</html>
JSONP为什么不支持 POST 请求

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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,165评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,503评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,295评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,589评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,439评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,342评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,749评论 3赞 387
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,397评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,700评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2赞 313
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,364评论 3赞 314
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,755评论 3赞 300
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2赞 336

推荐阅读更多精彩内容

  • JSONP的历史方案和实现原理
    1. JSONP的实现原理 JSONP是通过动态创建script实现的。请求方：frank.com 的前端程序员（...
    王童孟阅读 459评论 0赞 2
  • 33-高级：JSONP入门
    请先了解：《阮一峰：浏览器同源政策及其规避方法》 注意：请首先更新之前用过的 nodejs-test 代码，否则会...
    格林姆大师阅读 427评论 0赞 0
  • 关于 jsonp 的错误
    背景：使用原生 javascript ，写 jsonp 的可跨域请求逻辑，不间断发送心跳。 大失误：由于心跳包是每...
    HeyDelilah阅读 456评论 0赞 0
  • JSONP是什么
    前端操作数据库 首先，我们试着通过前端来操作一个数据库。数据库是什么？只要能长久的存数据，就是数据库。文件系统是一...
    是刘快啊阅读 368评论 0赞 2
  • 关于jsonp的安全性
    jsonp本身没什么危险，但是用了第三方的，就很危险了。 比如很流行的ip、城市获取的接口。都是jsonp的形式。...
    反者道之动001阅读 497评论 0赞 0