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

旧约Alatus

已于 2023-11-12 17:27:23 修改

阅读量264

点赞数 6

分类专栏：前端计算机网络 AJAX 文章标签： javascript 前端 ajax react.js node.js js vue.js

于 2023-11-12 16:18:45 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134362134

版权

前端同时被 3 个专栏收录

329 篇文章 2 订阅

订阅专栏

计算机网络

131 篇文章 0 订阅

订阅专栏

AJAX

45 篇文章 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>