How can I prevent IE Caching from causing duplicate Ajax requests?

Question

We are using the Dynamic Script Tag with JsonP mechanism to achieve cross-domain Ajax calls. The front end widget is very simple. It just calls a search web service, passing search criteria supplied by the user and receiving and dynamically rendering the results.

Note - For those that aren’t familiar with the Dynamic Script Tag with JsonP method of performing Ajax-like requests to a service that return Json formatted data, I can explain how to utilise it if you think it could be relevant to the problem.

The service is WCF hosted on IIS. It is Restful so the first thing we do when the user clicks search is to generate a Url containing the criteria. It looks like this...

https://.../service.svc?criteria=john+smith

We then use a dynamically created Html Script Tag with the source attribute set to the above Url to make the request to our service. The result is returned and we process it to show the results.

This all works fine, but we noticed that when using IE the service receives the request from the client Twice. I used Fiddler to monitor the traffic leaving the browser and sure enough I see two requests with the following urls...

• Request 1: https://.../service.svc?criteria=john+smith
• Request 2: https://.../service.svc?criteria=john+smith&_=123456789

The second request has been appended with some kind of Id. This Id is different for every request.

My immediate thought is it was something to do with caching. Adding a random number to the end of the url is one of the classic approaches to disabling browser caching. To prove this I adjusted the cache settings in IE.

• I set “Check for newer versions of stored pages” to “Never” – This resulted in only one request being made every time. The one with the random number on the end.

• I set this setting value back to the default of “Automatic” and the requests immediately began to be sent twice again.

Interestingly I don’t receive both requests on the client. I found this reference where someone is suggesting this could be a bug with IE. The fact that this doesn’t happen for me on Firefox supports this theory.

1. Can anyone confirm if this is a bug with IE? It could be by design.
2. Does anyone know of a way I can stop it happening?

Some of the more vague searches that my users will run take up enough processing resource to make doubling up anything a very bad idea. I really want to avoid this if at all possible :-)

Answer 1

I just wrote an article on how to avoid caching of ajax requests :-)

It basically involves adding the no cache headers to any ajax request that comes in

public abstract class MyWebApplication : HttpApplication
{
    protected MyWebApplication()
    {
        this.BeginRequest += new EventHandler(MyWebApplication_BeginRequest);
    }

    void MyWebApplication_BeginRequest(object sender, EventArgs e)
    {
        string requestedWith = this.Request.Headers["x-requested-with"];
        if (!string.IsNullOrEmpty(requestedWith) && requestedWith.Equals(”XMLHttpRequest”, StringComparison.InvariantCultureIgnoreCase))
        {
            this.Response.Expires = 0;
            this.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            this.Response.AddHeader(”pragma”, “no-cache”);
            this.Response.AddHeader(”cache-control”, “private”);
            this.Response.CacheControl = “no-cache”;
        }
    }
}

Answer 2

See www.enhanceie.com/redir/?id=httpperf for further discussion.

Answer 3

I eventually established the reason for the duplicate requests. As I said, the mechanism I chose to use for making Ajax calls was with Dynamic Script Tags. I build the request Url, created a new Script element and assigned the Url to the src property...

var script = document.createElement(“script”);
script.src = https://....”;

Then to execute the script by appending it to the Document Head. Crucially, I was using the JQuery append function...

$(“head”).append(script);

Inside the append function JQuery was anticipating that I was trying to make an Ajax call. If the type of element being appended is a Script, then it executes a special routine that makes an Ajax request using the XmlHttpRequest object. But the script was still being appended to the document head, and being executed there by the browser too. Hence the double request.

1. The first came direct from the script – the one I intended to happen.
2. The second came from inside the JQuery append function. This was the request suffixed with the randomly generated query string argument in the form “&_=123456789”.

I simplified things by preventing the JQuery library side effect. I used the native append function...

document.getElementByTagName(“head”).appendChild(script);

One request now happens in the way I intended. I had no idea that the JQuery append function could have such a significant side effect built in.