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.
I. Problem ReproductionDirectory
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
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 addressBecause 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 responseWe 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-cache7: 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
