AJAX如何解决老版本IE浏览器导致的get请求造成的缓存问题导致内容无法实时刷新------AJAX

待我称王封你为后i 2024-02-18 09:17 40阅读 0赞

>     AJAX在浏览器当中发送异步请求,请求之间是独立的,谁也不用等谁
>     类似于多线程并发,不会出现页面清空然后展示新的页面的效果
>     实现局部刷新(靠多种技术一起做到的,而不是一个技术叫ajax)
>     它是异步的(类似于多线程)
>     在AJAX的请求以及响应中完全依靠的是XMLHttpRequest对象
>     XMLHttpRequest对象的readyState属性记录了XMLHTTPREQUEST对象的状态
>     这个ReadyState属性的对应值有
>     0请求未初始化
>     1服务器连接已建立
>     2请求已收到
>     3正在处理请求
>     4请求已完成且响应已就绪
>     因此我们说当XMLHttpRequest对象的readyState属性变成4的时候
>     表示这个AJAX请求和响应已经全部完成
>     对于低版本的IE浏览器来说,ajax的get请求可能会走缓存,但是现代浏览器都没有这个问题了
>     什么是ajax的get请求缓存问题呢?
>     post请求不会被浏览器缓存,没有缓存问题
>     get请求直接从浏览器缓存获取资源,不需要从服务器重新加载资源,速度较快,用户体验好
>     缺点是无法实时获取最新浏览器资源
>     什么时候会走缓存,1get请求,2请求路径已经被浏览器缓存过了,路径没变化的情况会走缓存
>     如何解决低版本的ajax缓存问题
>     对于低版本的IE浏览器才有这样的缓存问题,可以采用URL时间戳来解决
>     我们需要给请求加一个时间戳
>     也可以使用随机数,或者随机数加上时间戳拼接到我们的请求内
> 
>     AJAX在浏览器当中发送异步请求,请求之间是独立的,谁也不用等谁
>     类似于多线程并发,不会出现页面清空然后展示新的页面的效果
>     实现局部刷新(靠多种技术一起做到的,而不是一个技术叫ajax)
>     它是异步的(类似于多线程)
>     在AJAX的请求以及响应中完全依靠的是XMLHttpRequest对象
>     XMLHttpRequest对象的readyState属性记录了XMLHTTPREQUEST对象的状态
>     这个ReadyState属性的对应值有
>     0请求未初始化
>     1服务器连接已建立
>     2请求已收到
>     3正在处理请求
>     4请求已完成且响应已就绪
>     因此我们说当XMLHttpRequest对象的readyState属性变成4的时候
>     表示这个AJAX请求和响应已经全部完成
>     对于低版本的IE浏览器来说,ajax的get请求可能会走缓存,但是现代浏览器都没有这个问题了
>     什么是ajax的get请求缓存问题呢?
>     post请求不会被浏览器缓存,没有缓存问题
>     get请求直接从浏览器缓存获取资源,不需要从服务器重新加载资源,速度较快,用户体验好
>     缺点是无法实时获取最新浏览器资源
>     什么时候会走缓存,1get请求,2请求路径已经被浏览器缓存过了,路径没变化的情况会走缓存
>     如何解决低版本的ajax缓存问题
>     对于低版本的IE浏览器才有这样的缓存问题,可以采用URL时间戳来解决
>     我们需要给请求加一个时间戳
>     也可以使用随机数,或者随机数加上时间戳拼接到我们的请求内

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>Title</title>
>     </head>
>     <body>
>       <script type="text/javascript">
>         window.onload = function ()
>         {
>           document.getElementById("btn").onclick = function ()
>           {
>             var ajax = new XMLHttpRequest();
>             ajax.onreadystatechange = function ()
>             {
>               if(ajax.readyState === 4)
>               {
>                 if(ajax.status === 200)
>                 {
>                   document.getElementById("mySpan").innerHTML = ajax.responseText;
>                 }
>                 else
>                 {
>                   alert(ajax.status);
>                 }
>               }
>             }
>             //开启通道
>             var username = document.getElementById("username").value;
>             var userCode = document.getElementById("userCode").value;
>             //设置时间戳
>             var time = new Date();
>             ajax.open("GET","/ajax/ajaxRequest2?username="+username+"&userCode=" + userCode + "&当前时间戳" + time.getTime(),true);
>             //get请求提交数据是在请求行上提交,直接以URL?name=value&name=value&name=value格式提交
>             ajax.send();
>             //这个是HTTP协议规定的
>           }
>         }
>       </script>
>       用户名<input type="text" name="username" id="username">
>       账号<input type="text" name="userCode" id="userCode">
>       <br>
>       <button id="btn">发送AJAX</button>
>       <br>
>       <span id="mySpan"></span>
>     </body>
>     </html>
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <title>Title</title>
>     </head>
>     <body>
>       <script type="text/javascript">
>         window.onload = function ()
>         {
>           document.getElementById("btn").onclick = function ()
>           {
>             var ajax = new XMLHttpRequest();
>             ajax.onreadystatechange = function ()
>             {
>               if(ajax.readyState === 4)
>               {
>                 if(ajax.status === 200)
>                 {
>                   document.getElementById("mySpan").innerHTML = ajax.responseText;
>                 }
>                 else
>                 {
>                   alert(ajax.status);
>                 }
>               }
>             }
>             //开启通道
>             var username = document.getElementById("username").value;
>             var userCode = document.getElementById("userCode").value;
>             //设置时间戳
>             var time = new Date();
>             ajax.open("GET","/ajax/ajaxRequest2?username="+username+"&userCode=" + userCode + "&当前时间戳" + time.getTime(),true);
>             //get请求提交数据是在请求行上提交,直接以URL?name=value&name=value&name=value格式提交
>             ajax.send();
>             //这个是HTTP协议规定的
>           }
>         }
>       </script>
>       用户名<input type="text" name="username" id="username">
>       账号<input type="text" name="userCode" id="userCode">
>       <br>
>       <button id="btn">发送AJAX</button>
>       <br>
>       <span id="mySpan"></span>
>     </body>
>     </html>