IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法

最新推荐文章于 2021-08-05 16:47:08 发布

Jack丶Fan

最新推荐文章于 2021-08-05 16:47:08 发布

阅读量6.5k

点赞数 2

分类专栏： Ajax 文章标签： ie 8 jquery ajax 浏览器缓存

本文链接：https://blog.csdn.net/DeveloperFanyl/article/details/48734373

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在测试兼容性问题的时候发现，使用Ajax的GET请求向后台获取响应结果时，如果是IE8浏览器，第一次发送请求时会得到正常的返回结果，然后当再去发送相同请求访问后台时，得到的结果总是第一次请求返回的结果。IE11、Chrome、Firefox都是正常的，只有IE8会出现这种现象。

为了重现遇到的这种现象，自己动手写了一个非常简单的小例子。

/**
 * 获取当前时间
 * @param request
 * @return
 */
@RequestMapping(value="/getRealTime")
@ResponseBody
public ResultBean<String> getCalendarInfo(HttpServletRequest request) {
    ResultBean<String> result = new ResultBean<String>();
    Date now = new Date();
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    result.setProperties(true, "获取当前时间成功", sdf.format(now));
    return result;
}

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Ajax测试</title>
        <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
        <script>
            $(function(){
                $(".js_btn").click(function(){
                    $.ajax
                    ({
                        type:'GET',
                        url:'getRealTime',
                        dataType:'json',
                        success:function(d){
                            if(d.isSuccess){
                                $(".js_text").val(d.data);
                            }
                        },
                        error:function(){
                            alert("请求超时！");
                        }
                    })
                })
            })
        </script>
    </head>
    <body>
        <div>
            <input type="text" class="js_text" value="" />
            <input type="button" class="js_btn" value="获取当前时间" />
        </div>
    </body>
</html>

在IE8下首次运行结果如下图。之后再去点击“获取当前时间”时，得到的结果都和第一次点击一样。

这里写图片描述

在不断测试后发现，出现这种现象是因为IE8浏览器的缓存问题，在清除缓存后重新点击，这时候就会返回正常的结果显示在页面上。IE8浏览器的缓存机制会将第一次发送请求的响应返回的结果保存下来，之后我们再去发送相同的请求时IE8会将第一次请求保存下来的结果反复的使用。

翻阅资料并加上自己测试验证后，总结出了两种可用的解决办法。

第一种解决办法：

在Ajax方法中增加一条发送到服务器的数据，该数据为Math对象方法random()生成的 0 ~ 1 之间的随机数，服务器端不对数据做任何处理。

    data:{r:Math.random()}

修改后的JS代码如下：

<script>
    $(function(){
        $(".js_btn").click(function(){
            $.ajax
            ({
                type:'GET',
                url:'getRealTime',
                data:{r:Math.random()},
                dataType:'json',
                success:function(d){
                    if(d.isSuccess){
                        $(".js_text").val(d.data);
                    }else{
                        alert(d.message);
                    }
                },
                error:function(){
                    alert("请求超时！");
                }
            })
        })
    })
</script>

每次执行请求的内容如下：

这里写图片描述

点击“获取当前时间”后，每次向服务器端发送的请求内容并不一样，这样一来IE8就不会去获取上次请求返回的结果，而是重新向后台发送新的请求，这样就解决了IE8每次发送相同请求Ajax时都会首先读取缓存中内容的问题。

第二种解决办法：

使用jQuery.ajaxSetup(name:value, name:value, …) 方法设置全局 AJAX 默认选项。
　

通过这种办法可以设置让Ajax发送请求后得到响应返回的结果不写入浏览器的缓存中。

    $.ajaxSetup({ cache:false });

修改后的JS代码如下：

<script>
    $(function(){
        $.ajaxSetup({ cache:false });
        $(".js_btn").click(function(){
            $.ajax
            ({
                type:'GET',
                url:'getRealTime',
                dataType:'json',
                success:function(d){
                    if(d.isSuccess){
                        $(".js_text").val(d.data);
                    }else{
                        alert(d.message);
                    }
                },
                error:function(){
                    alert("请求超时！");
                }
            })
        })
    })
</script>

每次执行请求的内容如下：

这里写图片描述

我们可以看到，这样做原理其实和第一种方式差不多，在设置Ajax返回数据不写入缓存后，每次点击“获取当前时间”后，向服务器端发送的请求内容也是不一样的，同理，这样做也可以解决了IE8每次发送相同请求Ajax时都会首先读取缓存中内容的问题。

Jack丶Fan

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法

最近在测试兼容性问题的时候发现，使用Ajax的GET请求向后台获取响应结果时，如果是IE8浏览器，第一次发送请求时会得到正常的返回结果，然后当再去发送相同请求访问后台时，得到的结果总是第一次请求返回的结果。IE11、Chrome、Firefox都是正常的，只有IE8会出现这种现象。
复制链接

扫一扫