概述

数据库是用来长久储存数据的。

发送请求

form 表单提交

缺点：刷新页面 + 用户后退 + 用户刷新 = 数据变动

form + iframe 提交

form 表单提交到 iframe 中，页面不会刷新。
缺点：用户刷新页面 ==> 数据变动

JS动态创建 img 标签

1
2
3
4
 
let img = document.createElement('img');
img.src = '路径'
img.onload = function(){}  ==>  HTTP状态码
img.onerror = function(){}  ==>  HTTP状态码

通过路径，在 Nodejs 中设置成功或者失败，之后返回状态码，前端通过返回的HTTP状态码，进而来判断成功失败。

动态创建 script 标签

1
2
3
4
5
 
let script = document.createElement('script');
script.src = '路径';
document.body.appendChild(script);
script.onload = function(){}
script.onerror = function(){}
  • 通过设置响应头中的类型进而来确定返回内容的格式（第四部分），从而保证返回的是 JavaScript 代码。
  • 当创建 script 标签插入 body 后，返回的内容会立即执行，之后再去执行 onload 和 onerror 事件，所以说 onload 可以进行删除， 之后将处理逻辑交给后端（处理逻辑中应该包括使用完 script 标签之后立刻删除），但是此时前后端耦合。
  • script 的 src 属性可以访问其他地址

JSONP

动态创建 script 并调用前端传给后端的 callback 技术

版本一

#####Nodejs：

1
 
response.write(` callback.call(undefined,' success ') `);

JS:
1
2
 
window.callback = function(){}  //返回之后进行处理
script.src = http://....../路径?callback = xxx

版本二

Nodejs
1
2
3
4
 
response.write(` ${ query.callback }.call(undefined,{
    "success": true,
    "left": ${ newAmount }
}) `)

返回的数据是 JSON 数据
特点：

  • 请求方创建 script ，src 属性指向响应方
  • 响应方根据查询参数，构造形如 xxx.call(undefined,”传给前端的数据”) 这样的响应。

JSONP

什么是 JSONP

请求方：前端（浏览器）
响应方：后端（服务器）

  1. 请求方创建 script ，src 指向响应方，同时传入一个查询参数 ?callback = 随机数
  2. 响应方根据查询参数 callback ，构造形如 随机数.call(undefined,"传给前端的数据") 这样的响应
  3. 浏览器接收到响应，就会执行 随机数.call(undefined,"传给前端的数据")
  4. 请求方获取到数据

    完整代码

    JS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    		 
    button.addEventlistener('click', (e) => {
        let script = document.createElement('script');
        let functionName = 'bowen' + parseInt(Math.random()*100000,10);
        window[ functionName ] = function(result){
            if( result === 'success' ){
                // do something
            }else{
                // do something
            }
        }
        script.src = 'http://....../路径?callback = ' + functionName
        document.body.appendChild( script );
        script.onload = function(event){
            event.currentTarget.remove();
            delete window[ functionName ]
        }
        script.onerror = function(){
            alert('fail');
            event.currentTarget.remove();
            delete window[ functionName ]
        }
    })
jQ:
1
2
3
4
5
6
7
8
9
 
button.addEventListener('click',(event) => {
    $.ajax({
        url: 'http://....../路径'，
        dataType: 'jsonp',
        success: function( response ){
            // do something
        }
    })
})

套路：为什么 JSONP 不支持 POST 请求

JSONP 是动态创建 script 标签 + 传入 callback 查询参数，script 标签，只能发送 GET 请求，不能使用 POST。

相关知识点

如果后端没有写

1
2
3
4
 
response.write(` ${ query.callback }.call(undefined,{
    "success": true,
    "left": ${ newAmount }
}) `)

前端虽然有响应内容，但是使用不到