js实现页面刷新计数原理

JavaScript040

js实现页面刷新计数原理,第1张

1:首先要有思路,比如要计数,那一定要做的就是记着上次的个数,然后在原有基础上加一;

2:如何实现,在页面加载后实现,有哪些方法?

思路1:当浏览器加载完后执行一个方法来处理计数?

浏览器加载完数据:window.onload()

思路2:如可获取上次页面打开的个数?

window给我们提供了一种方法:window.name 当前window的名称;

实现:

刷新:

页面本身是不具备保存历史数据的功能的,需要借助其它手段来实现,常用方法如下:

异步更新页面。这种方法实际上页面是没有刷新的,通过AJAX导步获取信息来更新页面,这样可以保留原页面需要保留的数据。一些网站的发表评论后,评论内容更新,用的就是这个方法。

使用COOKIE保存。把需要保存的数据存储到COOKIE中,页面更新时,读取COOKIE渲染到页面上。比较常见的如:登录框记录用户名,下次登录无须重新输入。但COOKIE存储的数据量有限,不适合大的数据存储。

服务器端保存数据。与COOKIE保存类似,只不过内容是保存在服务器端,利用会话机制在页面更新时从服务器读取内容重新渲染。这是一种常见的而保险的方法。像一些文本编辑器,保存草稿等,就是通过这样的方式实现的

页面的这种无操作实时刷新,一般是首先页面一加载完毕就去后台请求一次数据,显示在页面上。然后在jsp页面上通过js的定时调用ajax方法每隔固定的时间去后台请求数据刷新页面。

<script type="text/javascript">

var reftime = 10000//默认每隔10秒向后台发送请求

var taskId

//页面加载完毕调用此函数

function myStart(){

loadData()

taskId = setInterval(loadData,reftime)//每隔reftime调用loadData方法刷新页面

}

function loadData(){

$.ajax({

type: "POST",

url: "<%=path%>/three",

dataType: "xml",

data:{"data",""},

success: function(returnedData){

//请求成功将数据更新页面即可。

}

})

}

function setref(){

var timeValue = document.getElementById('miss').value

if(timeValue == "" || isNaN(timeValue)){

alert("参数设置有误")

}else if(timeValue < 10 || timeValue > 60){

alert("参数设置有误")

}else{

alert("刷新频率成功更新为" + timeValue + "秒")

reftime = timeValue * 1000

clearTimeout(taskId)

page = 1

myStart()

}

}

</script>