关于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

用 img 发送请求

用 script 方法请求

请求另一个网站的 script

JASONP

JSONP为什么不支持 POST 请求

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读