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>