您的位置：首页 > 编程技术 > ASP.NET  >  如何解决Ajax请求结果的缓存问题说明

如何解决Ajax请求结果的缓存问题说明

 更新时间：2021年9月22日 10:16  点击：1720

在默认情况下，IE会针对请求地址缓存Ajax请求的结果。换句话说，在缓存过期之前，针对相同地址发起的多个Ajax请求，只有第一次会真正发送到服务端。在某些情况下，这种默认的缓存机制并不是我们希望的（比如获取实时数据），这篇文章就来简单地讨论这个问题，以及介绍几种解决方案。
目录
一、问题重现
二、通过为URL地址添加后缀的方式解决问题
三、通过JQuery的Ajax设置解决问题
四、通过定制响应解决问题
一、问题重现
我们通过一个ASP.NET MVC应用来重现IE针对Ajax请求结果的缓存。在一个空ASP.NET MVC应用中我们定义了如下一个默认的HomeController，其中包含一个返回当前时间的Action方法GetCurrentTime。

复制代码 代码如下:

 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public string GetCurrentTime()
        {
           return DateTime.Now.ToLongTimeString();
       }
   }

默认Action方法Index对应的View定义如下。我们每隔5秒钟利用JQuery的方法以Ajax的方式调用GetCurrentTime操作，并将返回的结果显示出来。
复制代码 代码如下:

 <!DOCTYPE html>
    <html>
        <head>
            <title>@ViewBag.Title</title> 
            <script type="text/javascript" src="@Url.Coutent(“~/Scripts/jquery-1.7.1.min.js”)"></script>
            <script type="text/javascript">
                $(function () {
                    window.setInterval(function () {
                        $.ajax({
                           url:'@Url.Action("GetCurrentTime")',
                           success: function (result) {
                               $("ul").append("<li>" + result + "</li>");
                           }
                       });
                   }, 5000);
               });
           </script>
       </head>
       <body>
           <ul></ul>
       </body>
   </html>

采用不同的浏览器运行该程序会得到不同的输出结果，如下图所示，Chrome浏览器中能够显示出实时时间，但是在IE中显示的时间都是相同的。

二、通过为URL地址添加后缀的方式解决问题
由于IE针对Ajax请求的返回的结果是根据请求地址进行缓存的，所以如果不希望这个缓存机制生效，我们可以在每次请求时为请求地址添加不同的后缀来解决这个问题。针对这个例子，我们通过如下的代码为请求地址添加一个基于当前时间的查询字符串，再次运行程序后IE中将会显示实时的时间。

复制代码 代码如下:

    <!DOCTYPE html>
    <html>
        <head>       
            <script type="text/javascript">
                $(function () {
                    window.setInterval(function () {
                        $.ajax({
                            url:'@Url.Action("GetCurrentTime")?'+ new Date().toTimeString() ,
                            success: function (result) {
                               $("ul").append("<li>" + result + "</li>");
                           }
                       });
                   }, 5000);
               });
           </script>
       </head>
   </html>

三、通过jQuery的Ajax设置解决问题
实际上jQuery具有针对这个的Ajax设置，我们只需要按照如下的方式调用$.ajaxSetup方法禁止掉Ajaz的缓存机制。

复制代码 代码如下:

 <!DOCTYPE html>
    <html>
        <head>       
            <script type="text/javascript">
                $(function () {
                    $.ajaxSetup({ cache: false });

                    window.setInterval(function () {
                        $.ajax({
                            url:'@Url.Action("GetCurrentTime")',
                           success: function (result) {
                               $("ul").append("<li>" + result + "</li>");
                           }
                       });
                   }, 5000);
               });
           </script>
       </head>
   </html>

实际上jQuery的这个机制也是通过为请求地址添加不同的查询字符串后缀来实现的，这可以通过Fiddler拦截的请求来证实。

四、通过定制响应解决问题
我们可以通过请求的响应来控制浏览器针对结果的缓存，为此我们定义了如下一个名为NoCacheAttribute的ActionFilter。在实现的OnActionExecuted方法中，我们调用当前HttpResponse的SetCacheability方法将缓存选项设置为NoCache。该NoCacheAttribute特性被应用到GetCurrentTime方法后，运行我们的程序在IE中依然可以得到实时的时间。

复制代码 代码如下:

 public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [NoCache]

        public string GetCurrentTime()
       {
           return DateTime.Now.ToLongTimeString();
       }
   }
   public class NoCacheAttribute : FilterAttribute, IActionFilter
   {
       public void OnActionExecuted(ActionExecutedContext filterContext)
       {
         filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);
       }

       public void OnActionExecuting(ActionExecutingContext filterContext)
       {}
   }
 

实际NoCacheAttribute特性最终控制消息消息的Cache-Control报头，并将其设置为“no-cache”，指示浏览器不要对结果进行缓存。如下所示的是针对GetCurrentTime请求的响应消息：

复制代码 代码如下:

 HTTP/1.1 200 OK
    Server: ASP.NET Development Server/10.0.0.0
    Date: Thu, 03 Jan 2013 12:54:56 GMT
    X-AspNet-Version: 4.0.30319
    X-AspNetMvc-Version: 4.0
    Cache-Control: no-cache

    Pragma: no-cache
    Expires: -1
    Content-Type: text/html; charset=utf-8
   Content-Length: 10
   Connection: Close

   8:54:56 PM

静守己心，看淡浮华

[!--infotagslink--]

相关文章

  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20

  • JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法

    这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下...2016-04-19

  • jQuery+ajax简单实现文件上传的方法

    这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12

  • js实现ajax的用户简单登入功能

    这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-19

  • jquery Ajax实现Select动态添加数据

    这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-06-15

  • PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下，使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并展示在页面上。...2015-03-15

  • jQuery UI结合Ajax创建可定制的Web界面

    这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面，如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI，感兴趣的小伙伴们可以参考一下...2016-06-24

  • jquery+Ajax实现简单分页条效果

    这篇文章主要为大家详细介绍了jquery+Ajax实现简单分页条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-17

  • Bootstrap进度条与AJAX后端数据传递结合使用实例详解

    这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27

  • jquery ajax局部加载方法详解(实现代码)

    下面想就为大家带来一篇jquery ajax局部加载方法详解(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-05-14

  • jQuery Ajax全解析

    本文主要介绍了Ajax基本概念；Ajax的异步加载局部刷新功能的实现；通过XMLHttpRequest发送请求。具有很好的参考价值，下面跟着小编一起来看下吧...2017-02-19

  • 原生js实现对Ajax的封装(仿jquery)

    这篇文章主要为大家详细介绍了原生js实现对Ajax的封装，模仿jquery，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-26

  • js实现对ajax请求面向对象的封装

    这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下...2016-01-12

  • AngularJS Ajax详解及示例代码

    本文主要讲解AngularJS Ajax的知识，这里提供详细资料及代码示例，帮助学习AngularJS的朋友,有需要的小伙伴可以参考下...2016-08-24

  • jQuery ajax全局函数处理session过期后的ajax跳转问题

    这篇文章主要介绍了基于jQuery的全局ajax函数处理session过期后的ajax操作的相关资料,需要的朋友可以参考下...2016-06-12

  • 使用AJAX和Django获取数据的方法实例

    这篇文章主要给大家介绍了关于使用AJAX和Django获取数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-25

  • jQuery中通过ajax的get()函数读取页面的方法

    这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下...2016-03-01

  • jQuery Ajax File Upload实例源码

    这篇文章主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-09

  • 一步一步asp.net ajax类别Tree生成

    关于类别树的多级是一个刚接触ajax和多级类别很头痛的问题,针对那种商品种类繁多,级别层次多更是麻烦的问题,去年刚学asp.net,实验室的同学曾经这样做过,递归sql,现在看了惊心动魄...2021-09-22

  • django ajax发送post请求的两种方法

    这篇文章主要介绍了django ajax发送post请求的两种方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下...2020-04-30