js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();)

时间:2023-08-22 22:45:19
js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();)

js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();)

一、总结

js中的随机数Math.random

js中取得日期的毫秒数:new Date().getTime();

二、js进阶解决浏览器缓存不能自动更新的问题

ajax1.js

 function ajax(url,funSucc,fnFaild){

     var xhr=new XMLHttpRequest();

     url=url+'?'+new Date().getTime();  //1、在url上带上一个参数,可以是日期,或者是随机数   2、在ajax这里带的话,浏览器的地址栏和原来是一样的

xhr.open('GET',url,true); xhr.send(null); xhr.onreadystatechange=function(){ if (xhr.readyState==4) { if (xhr.status==200) { funSucc(xhr.responseText) }else{
if (fnFaild){
fnFaild(xhr.statusText)
} }
}
} }

html测试代码

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax01</title>
<style type="text/css">
div{
background: green;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript" src="ajax1.js"></script>
</head>
<body>
<input type="button" id="btn" value="测试按钮">
<div id="div1"></div>
<script>
var btn=document.getElementById('btn');
var div1=document.getElementById('div1');
btn.onclick=function (){
ajax('hero.txt',function(str){
div1.innerHTML=str
},function(s){
alert(s)
})
}
</script>
</body>
</html>