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

一、总结

js中的随机数Math.random

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

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

ajax1.js

 1 function ajax(url,funSucc,fnFaild){
 2 
 3 
 4     var xhr=new XMLHttpRequest();
 5 
 6     url=url+'?'+new Date().getTime();  //1、在url上带上一个参数，可以是日期，或者是随机数   2、在ajax这里带的话，浏览器的地址栏和原来是一样的
 7 
 8     xhr.open('GET',url,true);
 9 
10     xhr.send(null);
11 
12     xhr.onreadystatechange=function(){
13 
14         if (xhr.readyState==4) {
15 
16             if (xhr.status==200) {
17 
18                 funSucc(xhr.responseText)
19 
20 
21             }else{
22                 if (fnFaild){
23                      fnFaild(xhr.statusText)
24                 }
25 
26             }
27         }
28     }
29 
30 }

html测试代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>ajax01</title>
 6   <style type="text/css">
 7     div{
 8         background: green;
 9         width: 300px;
10         height: 200px;
11       }
12   </style>
13   <script type="text/javascript" src="ajax1.js"></script>
14 </head>
15 <body>
16   <input type="button" id="btn" value="测试按钮">
17   <div id="div1"></div>
18   <script>
19   var btn=document.getElementById('btn');
20   var div1=document.getElementById('div1');
21   btn.onclick=function (){
22     ajax('hero.txt',function(str){
23         div1.innerHTML=str
24     },function(s){
25       alert(s)
26     })
27   }
28   </script>
29 </body>
30 </html>