前端页面刷新
目录
前端页面刷新
之前在做前端项目的时候经常会碰到页面状态发生改变的情况。比如：在设备解绑、解冻，或者是对用户信息进行创建、编辑、删除等操作后。原则上来说页面应该实时显示最新的信息，但是页面是通过ajax请求与数据库中的数据进行同步的。 这种情况下我们必须在这个操作的ajax回调函数中主动对页面信息进行刷新。
所谓刷新其实就行重新向后台请求数据，并将最新数据展示出来。最初我才用的刷新方法是刷新浏览器窗口的方式对数据进行同步，即window.location.reload()方法。但是这么做的弊端就是整个页面都会刷新，当前页面可能存在多个ajax请求，当整个页面刷新时，这些ajax请求都会重新发送，页面也会重新渲染，速度和性能上都不太好。
因此我又改进了我的方法。我将每个ajax请求封装到特定的function中，在我的回调函数中只调用受到影响的数据的ajax请求。这么一来不但提高了响应速度，而且页面也不会出现闪一下的状况。代码如下：`ajax(
url,
data,
function(data) {
setTimeOut(function(){
$this.doQuery();
},300);
}
);`
加入timeout函数是为了在请求新数据前进行其他操作，比如显示提示信息等。若不需要，可以省去。doQuery()是我封装的一个ajax请求函数，可根据自身需要改写。
下面是一些刷新页面的方法：
window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象（用于框架）
opener.location.reload()刷新父窗口对象（用于单开窗口）
top.location.reload()刷新最顶端对象（用于多开窗口）