美文网首页
关于JSONP

关于JSONP

作者: sxfshdf | 来源:发表于2018-10-30 00:01 被阅读0次
用 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。

相关文章

  • 前端 JSONP 原理及 Node 模拟 JSONP

    1、关于 JSONP 请求的注意项 a、JSONP 请求只支持 GET 形式 b、JSONP 请求返回的是一个自定...

  • JSONP的劫持

    关于 JSONP JSONP 全称是 JSON with Padding ，是基于 JSON 格式的为解决跨域请求...

  • 关于jsonp劫持

    关于jsonp JSONP 全称是 JSON with Padding ，是基于 JSON 格式的为解决跨域请求资...

  • 关于JSONP

    用 img 发送请求 只能用 get 方法，只能以图片的形式展示 后台 用 script 方法请求 script ...

  • jsonp原理

    什么是JSONP？ 先说说JSONP是怎么产生的： 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里...

  • 关于JSONP技术

    0，什么是数据库？文件系统是数据库，MYSQL是数据库，MYSQL是一个软件，用来做数据库。 1.先简单了解一下后...

  • JSONP、JQuery发送AJAX、JSONP请求

    1.JSONP 2.JQuery发送AJAX、JSONP请求 1.JSONP JSONP利用JavaScript...

  • JS-18day

    1、jsonp公开接口 2、jQuery-jsonp 3、jsonp

  • 2018-12-10

    节点操作 ajax jsonp jQuery-jsonp jsonp公开接口

  • jsonp原理详解

    什么是JSONP？ 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来...

网友评论

      本文标题：关于JSONP

      本文链接：https://www.haomeiwen.com/subject/hliitqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|关于JSONP|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！