前端局部刷新的几种方式

1. 通过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('失败')
    }
})

2. 用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()
}
...

3. JSONP。JSONP是实现跨域发起http请求的方式之一。由于同源策略,一般来说页面无法与非同源服务器进行沟通,但

你可能感兴趣的:(前端局部刷新的几种方式)