JSONP技术栈

摘要：表单发请求付款在服务器里面增加一个请求路径。动态创建方法发送请求叫做方案全称，在出来以前，无刷新局部更新页面内容的最好的方案。

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

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

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

创建一个文件夹里面创建两个文件

新建一个脚本文件

新建一个index.html文件

打开服务器,就可以看到自己的页面了

  var http = require("http")
  var fs = require("fs")
  var url = require("url")
  var port = process.argv[2]
  if(!port){
      console.log("请指定端口号好不啦？
node 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","utf8")
    response.setHeader("Content-Type","text/css")
    response.write(string)
    response.end()
  }else if(path === "/js/main.js"){
    var string = fs.readFileSync("./js/main.js","utf8")
    response.setHeader("Content-Type","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 + " 成功
请用在空中转体720度然后用电饭煲打开 http://localhost:" + port)

    


    
你的余额是100
    付款
    

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

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

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

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

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

touch db
echo "100" > db

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

&&&amount&&&

在脚本中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请求。

在服务器里面增加一个/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打卡跳转页面。

    付款

有个程序员觉得页面中多出一个东西总是怪怪的，绞尽脑汁又想出了动态创建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，用户并不会知道这中间发生了什么。

用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时，一定要在当前域名吗？

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

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

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

请求方创建script ,src指向相应方同事传一个查询参数 ?callbackName=xxx

响应方根据查询参数callbackName,构造形如xxx.call(undefined,"你要的数据")这样的响应

浏览器接收到响应，xxx.call(undefined,"你要的数据")

那么请求方就知道了它要的数据

这就是JSONP

callbackName -> callback

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就能非常方便的使用

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

因为JSONP是通过动态创建script实现的

动态创建script只有GET请求没有POST请求