前端局部刷新的几种方式-蒲公英云

前端局部刷新的几种方式

通过img标签请求，实现局部刷新。实现方式向页面插入一个img标签，监听其加载，加载成功则表示请求成功，做出相应的处理；加载补充表示请求补充，也作出相应的处理。

button.addEventListener(‘click’, (e)=>{
```
 let image = document.createElement('img')
 image.src = '/pay'
 image.onload = function(){ // 状态码是 200~299 则表示成功
     alert('成功')
 }
 image.onerror = function(){ // 状态码大于等于 400 则表示失败
     alert('失败')
 }
```
})

用script标签造get请求，实现原理与方法1类似，这种技术叫做 SRJ - Server Rendered JavaScript

button.addEventListener(‘click’, (e)=>{

 let script = document.createElement('script')
 script.src = '/pay'
 document.body.appendChild(script)
 script.onload = function(e){ // 状态码是 200~299 则表示成功
     e.currentTarget.remove()
 }
 script.onerror = function(e){ // 状态码大于等于 400 则表示失败
     e.currentTarget.remove()
 }

})

以上两种方式的后端代码(node)：

//后端代码
...
if (path === '/pay'){
    let amount = fs.readFileSync('./db', 'utf8')
    amount -= 1
    fs.writeFileSync('./db', amount)
    response.setHeader('Content-Type', 'application/javascript')
    response.write('amount.innerText = ' + amount)
    response.end()
}
...