美文网首页
关于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