AJAX cache problem in IE
Few days back I was working on a requirement where in a webpage one table was getting populated through AJAX. This table was getting refreshed every 5 mins as it was showing some real time data being processed in back end. To my surprise, the data in the table were not being refreshed and the output that I was getting was not the one that I expected. Hence I tried to call the URL manually through browser. Say for example I was calling GetData.jsp from my AJAX code, so I copy/pasted this URL in browser and called it. This time I was getting the desired data in the browser. Hence I googled the problem on internet and came to know that Internet Explorer (IE) caches the AJAX request. So if I make ajax queries with same URL, it tends to give me same result/output as IE caches the data that it gets from first query. To overcome this problem, I used a simple hack. I appended a random number with my URL and voila, it worked. For example, suppose below is my AJAX query. In this I am calling a URL GetData.jsp and passing one parameter requestNo. 
var url = "GetData.jsp?requestNo=" + req;
xhr.open("GET", url, true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);

Code language: JavaScript (javascript)
I changed the above code into: 
var url = "GetData.jsp?requestNo=" + req  + "&random=" + Math.random();
xhr.open("GET", url, true);
xhr.onreadystatechange = handleHttpResponse;
xhr.send(null);

Code language: JavaScript (javascript)
Note that, I appended one more parameter with the URL which is random and assigned Math.random() with it. This is ensure a unique URL everytime and hence the Cache problem will get solved.

jQuery load() method issue with Internet Explorer

If you are using jQuery load() function to load content of a URL into a DIV then you may face issue in IE. Sometimes IE doesn’t load anything in the DIV. 
$("#mydiv").load("student.html");

Code language: JavaScript (javascript)
You may want to add random url parameter to the load method so that IE doesn’t cache the content and it is properly loaded in the DIV. 
$("#mydiv").load("student.html&random=" + Math.random()*99999);

Code language: JavaScript (javascript)

Disable Cache in jQuery

Best way to avoid caching is by disabling it through jQuery setup. Following code snippet does this: 
$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Code language: JavaScript (javascript)
Try to use this method of disabling cache in case you using different Ajax loading techniques such as .load(), .getJSON() etc.

View Comments

  • @Jigisha
    Thanks for the comment. Of course new Date().getTime() can be used instead of Random number. And there is one more way. Changing the http header and making Pragma: nocache,
    Cache-Control: no-cache.
    In ASP you can use.
    //HTTP 1.1
    //HTTP 1.0

    In Java/JSP
    response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
    response.setHeader("Pragma","no-cache"); //HTTP 1.0

    In PHP
    header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1

    Also you can use html META tag. Add following tag in head of your html page.
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

    Cheers,
    Viral

  • Yeah... the added query parameter is a major hack and NOT the way to solve this problem. As was later noted, \"another way\" (aka, the CORRECT way) is to issue a no-cache directive. This is the purpose of the directive(s). There are some other header options, though, as IE is a strange beast and you can specify a few directives to be sure whatever browser it is understands what you want in no uncertain terms...

    response.addHeader(“Pragma”, “no-cache”);
    response.addHeader(“Cache-Control”, “no-cache”);
    response.addHeader(“Cache-Control”, “must-revalidate”);
    response.addHeader(“Expires”, “Mon, 8 Aug 2006 10:00:00 GMT”); // some date in the past

    This addresses the cache concern without all the potential side effects related to having unpredictable URLs and using a feature not intended to address this issue. Use the right tool for the job and your life will be easier in the long run.

    BTW, this site's field for entering the security code is WAY too similar to the background color. I couldn't find it for two post attempts. Yeesh. Put a border around it like every other field!! Design people! :)

  • Hi Alex,
    Thanks for the comment.
    I have changed the security field (CAPTCHA) to more readable field. Changed the background to lighter shade.

  • Try to use xhr.open("POST", url, true). Different URLs cannot prevent from caching the useless data.

  • Hi
    I am new one for here...i am using one concept ..but one headache for me using in PHP + AJAX .Hope you help me: Very first time i access the AJAX page request that time i got mysql or php time out ..so i got not completed request from server ( like ajax bad response). After alert i do the same action ..but this time working for me ...first time i access i got this kind of issue...any prob with ajax backend pages ..can i make any timeout concept or mysql timeout settings or ..cache settings .please your help ..is precious for me

    Thanks
    John

  • Hi,
    I tried you functions above, but those didn't solve my issue.
    Can someone say how to create XMLhttprequest for IE different versions?

Leave a Comment
Share
Published by
Gaurav Patel
Tags: AJAX cache cache problem internet explorer
16 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

5 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

5 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

5 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

5 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago