About IE cache for Ajax request results

Source: Internet
Author: User

By default, IE caches the Ajax request results for the request address. In other words, before the cache expires, multiple Ajax requests initiated for the same address will only be sent to the server for the first time. In some cases, this default caching mechanism is not what we want (such as obtaining real-time data). This article will briefly discuss this issue and introduce several solutions.

Directory
I. Problem Reproduction
2. Solve the problem by adding a suffix to the URL address
Iii. Solve the problem through Ajax settings of JQuery
4. solving problems through custom response

I. Problem Reproduction

We use an ASP. net mvc application to reproduce the cache of IE Ajax request results. In an empty ASP. net mvc application, we define the next default HomeController, which contains an Action method GetCurrentTime that returns the current time.

   1: public class HomeController : Controller

   2: {

   3:     public ActionResult Index()

   4:     {

   5:         return View();

   6:     }

   7:  

   8:     public string GetCurrentTime()

   9:     {

  10:         return DateTime.Now.ToLongTimeString();

  11:     }

  12: }

The View corresponding to the Index of the default Action method is defined as follows. We use JQuery to call the GetCurrentTime operation in Ajax every five seconds and display the returned results.

   1: <!DOCTYPE html>

   2: 

   3:     

   4:         <title>@ViewBag.Title</title>  

   5:         <script type="text/javascript" src="@Url.Coutent(“~/Scripts/jquery-1.7.1.min.js”)"></script>

   6:         <script type="text/javascript">

   7:             $(function () {

   8:                 window.setInterval(function () {

   9:                     $.ajax({

  10:                         url:'@Url.Action("GetCurrentTime")',

  11:                         success: function (result) {

  12:                             $("ul").append("<li>" + result + "</li>");

  13:                         }

  14:                     });

  15:                 }, 5000);

  16:             });

  17:         </script>

  18:     

  19:     <body> 

  20:         <ul></ul>

  21:     </body>

  22: 

Running the program in different browsers produces different output results. As shown in, the real-time is displayed in Chrome, but the time displayed in IE is the same.

2. Solve the problem by adding a suffix to the URL address

Because the results returned by IE for Ajax requests are cached based on the request address, if you do not want this cache mechanism to take effect, we can add different suffixes to the request address in each request to solve this problem. In this example, we use the following code to add a query string based on the current time for the request address. After the program is run again, IE will display the real-time.

   1: <!DOCTYPE html>

   2: 

   3:     

   4:         <script type="text/javascript">

   5:             $(function () {

   6:                 window.setInterval(function () {

   7:                     $.ajax({

   8:                         url:'@Url.Action("GetCurrentTime")?'+ new Date().toTimeString() ,

   9:                         success: function (result) {

  10:                             $("ul").append("<li>" + result + "</li>");

  11:                         }

  12:                     });

  13:                 }, 5000);

  14:             });

  15:         </script>

  16:     

  17: 

 

Iii. Solve the problem through Ajax settings of jQuery

In fact, jQuery has Ajax settings for this purpose. We only need to call the $. ajaxSetup method as follows to disable the cache mechanism of Ajaz.

   1: <!DOCTYPE html>

   2: 

   3:     

   4:         <script type="text/javascript">

   5:             $(function () {

   6:                 $.ajaxSetup({ cache: false });
  
   7:                 window.setInterval(function () {

   8:                     $.ajax({

   9:                         url:'@Url.Action("GetCurrentTime")',

  10:                         success: function (result) {

  11:                             $("ul").append("<li>" + result + "</li>");

  12:                         }

  13:                     });

  14:                 }, 5000);

  15:             });

  16:         </script>

  17:     

  18: 

In fact, this mechanism of jQuery is implemented by adding different query string suffixes to the request address, which can be confirmed by requests intercepted by Fiddler.

4. solving problems through custom response

We can control the browser's result cache through the request response. Therefore, we define the next ActionFilter named NoCacheAttribute. In the OnActionExecuted method implemented, we call the SetCacheability method of the current HttpResponse to set the cache option to NoCache. After the NoCacheAttribute feature is applied to the GetCurrentTime method, running our program can still get real-time in IE.

   1: public class HomeController : Controller

   2: {

   3:     public ActionResult Index()

   4:     {

   5:         return View();

   6:     }

   7:  

   8:     [NoCache]
  
   9:     public string GetCurrentTime()

  10:     {

  11:         return DateTime.Now.ToLongTimeString();

  12:     }

  13: }

  14: public class NoCacheAttribute : FilterAttribute, IActionFilter

  15: {

  16:     public void OnActionExecuted(ActionExecutedContext filterContext)

  17:     {

  18:         filterContext.HttpContext.Response.Cache.SetCacheability(HttpCacheability.NoCache);

  19:     }

  20:  

  21:     public void OnActionExecuting(ActionExecutingContext filterContext)

  22:     {}

  23: }

The actual NoCacheAttribute feature controls the Cache-Control header of a message and sets it to "no-cache", indicating that the browser does not Cache the result. The Response Message for the GetCurrentTime request is as follows:

   1: HTTP/1.1 200 OK

   2: Server: ASP.NET Development Server/10.0.0.0

   3: Date: Thu, 03 Jan 2013 12:54:56 GMT

   4: X-AspNet-Version: 4.0.30319

   5: X-AspNetMvc-Version: 4.0

   6: Cache-Control: no-cache
  
   7: Pragma: no-cache

   8: Expires: -1

   9: Content-Type: text/html; charset=utf-8

  10: Content-Length: 10

  11: Connection: Close

  12:  

  13: 8:54:56 PM

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.