概述
数据库是用来长久储存数据的。
发送请求
form 表单提交
缺点：刷新页面 + 用户后退 + 用户刷新 = 数据变动
form + iframe 提交
form 表单提交到 iframe 中，页面不会刷新。
缺点：用户刷新页面 ==> 数据变动
JS动态创建 img 标签
```
let img = document.createElement('img');
img.src = '路径'
img.onload = function(){} ==> HTTP状态码
img.onerror = function(){} ==> HTTP状态码
```
通过路径，在 Nodejs 中设置成功或者失败，之后返回状态码，前端通过返回的HTTP状态码，进而来判断成功失败。
动态创建 script 标签
```
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：
response.write(` callback.call(undefined,' success ') `);
JS:
window.callback = function(){} //返回之后进行处理
script.src = http://....../路径?callback = xxx
版本二
Nodejs
response.write(` ${ query.callback }.call(undefined,{
"success": true,
"left": ${ newAmount }
}) `)
返回的数据是 JSON 数据
特点：
- 请求方创建
script，src属性指向响应方 - 响应方根据查询参数，构造形如 xxx.call(undefined,"传给前端的数据") 这样的响应。
JSONP
什么是 JSONP
请求方：前端（浏览器）
响应方：后端（服务器）
- 请求方创建
script，src指向响应方，同时传入一个查询参数 ?callback = 随机数 - 响应方根据查询参数 callback ，构造形如
随机数.call(undefined,"传给前端的数据")这样的响应 - 浏览器接收到响应，就会执行
随机数.call(undefined,"传给前端的数据") - 请求方获取到数据
完整代码
JS
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:
button.addEventListener('click',(event) => {
$.ajax({
url: 'http://....../路径'，
dataType: 'jsonp',
success: function( response ){
// do something
}
})
})
套路：为什么 JSONP 不支持 POST 请求
JSONP 是动态创建 script 标签 + 传入 callback 查询参数，script 标签，只能发送 GET 请求，不能使用 POST。
相关知识点
如果后端没有写
response.write(` ${ query.callback }.call(undefined,{
"success": true,
"left": ${ newAmount }
}) `)
前端虽然有响应内容，但是使用不到
