前端局部刷新的几种方式

ゝ一纸荒年。 2022-01-10 03:37 1181阅读 0赞

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请求的方式之一。由于同源策略，一般来说页面无法与非同源服务器进行沟通，但<script>标签是个例外，script标签不受同源策略的限制。基于这点，请求方在请求数据时，动态创建script标签，标签src指向请求地址，并且传一个callback参数。响应方处理完请求逻辑后，根据callback参数，返回执行名为callback参数值的方法的js代码，如：method.call(undefined,‘数据’);浏览器接收到响应后，会执行method.call(undefined,‘数据’);代码。

过程：

请求方：frank.com的前端程序员（浏览器）  
响应方：jack.com的后端程序员（服务器）  
            1. 请求方创建script、src指向响应方，同时传一个查询参数?callback = xxx  
            2. 响应方根据查询参数callback,构造形如  
                1. xxx.call(undefined,'你要的数据')  
                2. xxx('你要的数据')  
                这样的响应  
            3. 浏览器接收到响应，就会执行yyy.call("undefined","你要的数据");  
            4. 那么请求方就知道了他要的数据  
            这就是jsonp

4. 其他方法：link、iframe等

约定：

1. 参数名一般叫callback  
             2. 回调方法名一般用随机数

思考：JSONP为什么不支持post？

答：因为jsonp是通过动态创建script实现的，动态创建script的时候，只能用get，没有post。