JSONP技术栈

Json 前端之家
前端之家收集整理的这篇文章主要介绍了JSONP技术栈，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

简单的前后端交互

前面学习了这么多，都是在和页面打交道，不管是HTML、CSS、JavaScript，DOM，都没有跑出浏览器，那今天来学习下和后台交互。

当我点击付款按钮时，页面的数值会减小；当我刷新页面时，内容不会改变，该怎么实现呢？

先写一个简单的node.js脚本,让页面能够正常运行

  1. 创建一个文件夹里面创建两个文件
  2. 新建一个脚本文件
  3. 新建一个index.html文件
  4. 打开服务器,就可以看到自己的页面了

脚本文件

var http = require('http')
  var fs = require('fs')
  var url = require('url')
  var port = process.argv[2]
  if(!port){
      console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
      process.exit(1)
  }
    
  var server = http.createServer(function(request,response){
  var parsedUrl = url.parse(request.url,true)
  var pathWithQuery = request.url 
  var queryString = ''
  if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
  var path = parsedUrl.pathname
  var query = parsedUrl.query
  var method = request.method


  /******** 从这里开始看，上面不要看 ************/

  if(path === '/'){
    var string = fs.readFileSync('./index.html','utf8')
    response.setHeader('Content-Type','text/html;charset=utf-8')
    response.write(string)
    response.end()
  }else if(path === '/css/style.css'){
    var string = fs.readFileSync('./css/style.css','text/css')
    response.write(string)
    response.end()
  }else if(path === '/js/main.js'){
    var string = fs.readFileSync('./js/main.js','text/javascript;charset=utf-8')
    response.write(string)
    response.end()
  }else{
    response.statusCode = 404
    response.setHeader('Content-Type','text/html;charset=utf-8')
    response.end('找不到对应的路径,你需要自行修改 index.js')
  }
  
  /******** 代码结束，下面不要看 ************/
})

server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

HTML 文件

<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
</head>
<body>
    <h5>你的余额是<span id="amount">100</span></h5>
    <button id="button">付款</button>
    <script>
        let button = document.getElementById('button')
        let amount = document.getElementById('amount')
        
        button.addEventListener('click',function(){
            amount.textContent = +amount.textContent - 1
            console.log(1)
        })
    </script>
</body>
</html>

当我们点付款的时候，100会往下减小，但是当我们刷新页面的时候，又变成了100。

这里我们只是在浏览器上面操作页面内容，数据没有长久的存储在数据库里面，所以当我们刷新页面时，它又回到初始状态，这显然不是我们要的效果。

我们该怎么解决这个问题呢?

用占位符替换页面数据

我们在刚才的当前文件夹中新建一个文件，作为我们的数据库，现在我们把100元写在数据库里。

数据库简单的讲就是一个能长久存储数据的地方，文件是数据库最简单的形式。

touch db
echo '100' > db

index.html中的100用一个占位符替代，这个占位符要和页面中其他变量不重复，实际上页面上的数据，前端是不需要知道的，用一个占位符站位即可，发送请求，后端程序员去读数据库里的内容，返回给前端。

<span id="amount">&&&amount&&&</span>

在脚本中if(path === '/index.html')里加一个替换占位符语句。

var amount = fs.readFileSync('./index','utf8')        //文件中的数据类型是String
string = string.replace('&&&amount&&&',amount)

重启服务器后，刷新页面后我们看到的100是数据库里的数据，当我们点击付款时，变化的是数据库里面的数据，和前端没有关系，但是当我们刷新页面后，依旧回到初始状态，没有保存最新的数据。

我点付款的时候应该发送一个请求告诉服务器，请把数据库里的100变成99，然后刷新页面；我不对页面做操作改变它的数据了，那我点付款的时候，发起一个请求，应该怎么做呢？

可以发请求的标签有img、link、script、form表单，当我们点击按钮应该发送POST请求，因为是更新数据库内容，所以这里只有form表单能发送POST请求。

form表单发请求

<form action="pay" method="post">
    <input type="submit" value="付款">
</form>

在服务器里面增加一个/pay请求路径。

if(path === '/pay' && method.toUpperCase() === 'POST'){
    var amount = fs.readFileSync('./db','utf8')
    var newAmount = amount - 1
    fs.writeFileSync('./db',newAmount)
    response.write('success')        //成功后给用户返回
    response.end()
}

当我点付款的时候，会看当前页面会跳转到/pay路径下的页面，表示成功了。

点击浏览器的返回上一页，刷新下当前页面，之前的100变成了99，无论怎么刷新或者重新打开，数据都是之前的操作过结束后的数据。

这里前端要写的就是form表单，后端如果发现是某个路径并且是POST请求，就去操作数据库。

这是旧时代的操作，form表单一旦提交了都会刷新当前页面，给用户造成了不好的体验。有个程序员想出了用iframe解决页面刷新的问题，操作成功后在iframe打卡@R_656_404@面。

iframe 表单刷新页面

<form action="pay" method="post" target="success">
    <button id="button">付款</button>
</form>
<iframe name="success" src="about:blank" frameborder="0"></iframe>

有个程序员觉得页面中多出一个东西总是怪怪的，绞尽脑汁又想出了动态创建img标签的方法

动态创建img标签发送请求

有洁癖的程序员总是能想出更好的解决方法，接着来看下动态创建img标签的发送请求的方法。

脚本中增加/pay路径下应该这样写

if(path === '/pay'){
      var string = fs.readFileSync('./db','utf8')
    var newAmount = string - 1
    if(Math.random() > 0.5){
        fs.writeFileSync('./db',newAmount)
        response.setHeader('Content-type','image/jpeg')
        response.statusCode = 200
        response.write(fs.readFileSync('./1.jpeg'))
    }else{
        response.statusCode = 400
        response.write('alert("fail")')
    }
    response.end()
  }

因为img标签，只能发送GET请求，所以这里就不做method判断了。

JS 文件

button.addEventListener('click',function(e){
    let image = document.createElement('img')
    image.src = '/pay'
    img.onload = function(){
        alert('success')
        window.location.reload()
    }
    img.onerror = function(){
        alert('fail')
    }
})

onload和onerror是提示用户成功了还是失败，在onload里面加上一个window.location.reload()成功后会自动刷新页面。

动态创建img标签的方法，必须要返回真实的图片，浏览器才能知道操作成功了，不然onload一直不会成功，虽然数据库已经修改成功了，但浏览器只要没接收到图片，就会执行onerror，这也是它的局限所在——必须要返回真是图片。

同时刷新页面会造成浏览器重新渲染，所以当浏览器接收到响应时，前端应该在页面上自动减1，用户并不会知道这中间发生了什么。

动态创建script标签——SRJ方案

用a标签发送请求太浪费资源了，这时又有人想出了用script标签发请求，这就是优秀程序员和普通程序员之间的差距啊。

下面来看看是怎么实现的：

button.addEventListener('click',function(){
    var script = document.createElement('script')
    script.src = '/pay'
    document.body.appendChild(script)    //必须要将创建出来的Script放在页面中才可以
    script.onload = function(){
        alert('sucess')
    }
})

/pay路径下的代码

if(path === '/pay'){  
      var string = fs.readFileSync('./db','utf8')
    var newAmount = string - 1
    fs.writeFileSync('./db',newAmount)
    response.setHeader('Content-type','application/js')
    response.statusCode = 200
    response.write('alert("success1")')
    response.end()
  }

当我点付款时，成功后首先执行脚本里面的script，执行完了之后才执行main.js内的onload。

因为脚本中的script先执行，所以main.js里面就不需要提示用户了，直接后台给提示内容就可以了。

如下：

response.write(`alert("success")
amount.innerText = amount.innerText -1`)    //ES6字符串方法

到这里聪明的你应该也发现了一个问题，当我点付款时，不管成功与否都会创建一个script，对于程序员来说是无法接受的，所以要用onload和onerror去监听，不管成功与否都将它删除掉。这里虽然删掉了但它还是在内存中。

script.onload = function(e){
    e.currentTarget.remove()
}
script.onerror = function(e){
    e.currentTarget.remove()
}

动态创建script方法发送请求叫做——SRJ方案（全称 Server rendered javascript），在 ajax 出来以前，无刷新局部更新页面内容的最好的方案。

请求另一个网站的script

在页面中引入一个script时，一定要在当前域名吗？

NO！！！我们在页面中引入的各种库，不都是引入别人的网站的script嘛

那这样的话，是不是可以操作别人网站的/pay，所以GET请求太不安全，太容易伪造了，所以大部分的/pay都用POST请求去做。

PORT=8002 node index.js 可以开多个端口

SRJ方案前后端耦合太紧密了，需要后端对页面了解太清楚。

其实前端提供一个xxx() API就可以了。

response.write(`
xxx.call(undefined,'success')
`)

前端提供 API 的方法，其实解耦还没有解的很干净，我们在设置script的src时可以直接设置请求参数，脚本只需要取这个参数就可以了，至于具体叫什么名字不重要

script.src = 'http://baidu.com:8002/pay?callbackName=xxx'
response.write(`
    ${query.callbackName}.call(undefined,'success')
`)

到这里已经是很好的方案了，但是有一个问题是，调用函数传递的参数，前端怎么知道呢？如果不确定，到时候出了问题就要各自扯皮了，这时候JSON应运而出。

JSONP方案

JSONP用JSON的格式进行参数传递，解决了两个网站之间的交流。至于为什么叫JSONP，应该是大括号左边的叫做左padding，右边的叫做右padding，连接起来就叫做JSONP。

${query.callbackName}.call(undefined,{
    "success": true
    "left": ${newAmount}
})

用文字叙述 JSONP

请求方:qq.com的前端程序员(浏览器)
响应方:baidu.com的后端程序员(服务器)

  1. 请求方创建script,src指向相应方同事传一个查询参数 ?callbackName=xxx
  2. 响应方根据查询参数callbackName,构造形如xxx.call(undefined,'你要的数据')这样的响应
  3. 浏览器接收到响应，xxx.call(undefined,'你要的数据')
  4. 那么请求方就知道了它要的数据

这就是JSONP

约定:

  1. callbackName -> callback
  2. xxx -> 随机数

按照约定写一下

button.addEventListener('click',funcion(e){
    let script = document.createElement('script')
    let functionName = parseInt(Math.random()*1000000)        //这个函数名是随机数
    window[functionName] = function(result){    //result是服务器返回的结果
        if(result === 'success'){
            amount.innerText = amount.innerText - 1
        }
    }

    script.src = 'http://baidu.com:8002?callback=' + functionName    //写在参数里面
    document.body.appendChild(script)
    script.onload = function(e){
        e.currentTarget.remove()
        delete window[functionName]    //如果成功了要干掉这个函数
    }
    script.onerror = function(e){
        alert("false")
        e.currentTarget.remove()
        delete window[functionName]    //如果失败了也要干掉这个函数

    }
})

jQuery实现

用jQuery就能非常方便的使用

button.addEventListener('click',function(){
    $.ajax({
        url: "http://baidu.com:8002/pay"
        dataType: "JSONP"
        success:function(response){
            console.log(response)
        }
    })
})

JSONP为什么不支持POST请求

  1. 因为JSONP是通过动态创建script实现的
  2. 动态创建script只有GET请求没有POST请求
原文链接：/json/288569.html

猜你在找的Json相关文章

jsonp
　　jsonp需要在页面中添加一个<script>元素，由该元素来从其他服务器加载json数据。...
jsonp跨域
<script> var testApi = "地址"; $.ajax({ url:testApi,//可以不是本地域名...
MVC上的jsonp扩展，解决跨域访问问题
总是有人会遇到跨域问题，然后有个jsonp的解决方案，MVC中代码如下： public class JsonpR...
fastjson反序列化json对象时保留null值的key
最近开发中遇到调用第三方web_api的功能，后端在处理json数据时使用fastjson来做反序列化，...
JsonCpp 的使用
JSON全称为JavaScript ObjectNotation，它是一种轻量级的数据交换格式，易于阅读、编写、解...
jsonp
var newScript = document.createElement(‘script‘); newScript.setAtt...
jsonp 跨域
$.ajax({ url:"http://192.168.100.47:8080/ais-connect/data/newai...
JSONArray 去重
前台说 只能传给我这样的数据 [     {         "labelName":"皮肤颜...
FastJson的坑
1.list中放入同一个对象，会出现内存地址引用{"$ref":"#[0]"}，后台可以识...
fastJson转换对象与字符串
static class TempClass{ private String name; private int age; public String getName(...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作