数据库
- 文件系统是一种数据库
- MySQL是一种数据库
局部刷新怎么做
方案一: 用图片造GET请求
button.addEventListener('click', (e)=>{
let image = document.createElement('img')
image.src = '/pay'
image.onload = function(){ // 状态码是 200~299 则表示成功
alert('成功')
}
image.onload = function(){ // 状态码大于等于 400 则表示失败
alert('失败')
}
})
复制代码
后端代码:
var amount = fs.readFileSync('./db','utf-8')
var newAmount = amount - 1
fs.writeFileSync('./db',newAmount)
response.setHeader('Content-Type','image/jpg')
response.statusCode = 200
response.write(fs.readFileSync('./dog.jpg')) // 响应一个真图片欺骗浏览器
response.end()
复制代码
- 弊端:后台需要返回一个真的图片欺骗浏览器
方案二: 用script造GET请求
button.addEventListener('click', (e)=>{
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script) // 将script标签加入body,否则会加载失败
script.onload = function(e){ // 状态码是 200~299 则表示成功
e.currentTarget.remove() // 删掉这个script标签
}
script.onload = function(e){ // 状态码大于等于 400 则表示失败
e.currentTarget.remove()
}
})
复制代码
后端代码:
if (path === '/pay'){
let amount = fs.readFileSync('./db', 'utf8') // 读取db文件里的数据
amount -= 1
fs.writeFileSync('./db', amount) // 将运算后amount的写入db文件
response.setHeader('Content-Type', 'application/javascript')
response.write('amount.innerText = amount.innerText - 1')
response.end()
}
复制代码
这种技术叫做SRJ: Server Rendered JavaScript
JSONP
请求方:frank.com 的前端程序员(浏览器) 响应方:jack.com 的后端程序员(服务器)
- 请求方创建 script,src 指向响应方,同时传一个查询参数 ?callbackName=yyy
- 响应方根据查询参数callbackName,构造形如yyy.call(undefined, '你要的数据')这样的响应
- 浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据')
- 那么请求方就知道了他要的数据
这就是JSONP,动态标签跨域请求技术。
方案三
button.addEventListener('click', (e)=>{
let script = document.createElement('script')
let functionName = 'frank'+ parseInt(Math.random()*10000000 ,10)
window[functionName] = function(){ // 每次请求之前搞出一个随机的函数
amount.innerText = amount.innerText - 0 - 1
}
script.src = '/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e){ // 状态码是 200~299 则表示成功
e.currentTarget.remove()
delete window[functionName] // 请求完了就干掉这个随机函数
}
script.onload = 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()
}
复制代码
JSONP的一些约定
- callbackName约定写成callback
- 函数名yyy写成一个随机数frank1231321564()
终极方案,用jQuery写
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
$.jsonp()
复制代码
JOSNP为什么不支持POST请求
- 因为是JOSNP通过动态创建script实现的
- 动态创建script的时候只能用get,不能用post