Why you should explicitly set cache = false in jQuery Ajax

Introduction

AJAX is one of the best invention happened for user experience improvement. AJAX helps to dynamically manipulate content on user’s browser without reloading the webpage. Now days, it is very common to use AJAX in load/add/update/delete content from server to client’s machine.

Scenario

For all jQuery AJAX requests, default option is cache = true for all datatype except datatype = ‘script’ or ‘jsonp’. Different browser have different default policy on caching ajax requests. Consider below scenario to understand my point on why you should explicitly set cache=false in ajax request.

Step 1: Make an AJAX request to get existing student’s information from the server and show it in a form to modify.
Step 2: If a user update and saves students data, then make an AJAX request to update existing student’s data. Moreover perform Step 1 to ensure it fetches latest data from the server.

Problem

In my case the problem was in Internet Explorer 11.0 on Windows 7. If a user performs Step 2 then also it was showing student’s information which was fetched in Step 1. The ugly part of the whole story is that the program was working right even on Internet Explorer 11.0 on Windows 10. This is very hard to find out on developer’s environment because no developer uses Internet Explorer and Windows 7 in today’s date. The reason behind the problem is because Internet Explorer was caching ajax requests from step 1. Caching was avoiding to make fresh ajax request to get latest student information from the server when a user performs step 2. The solution to above problem is to explicitly set cache = false.

Method 1 : use ajaxSetup to set cache=false when page loads

ajaxSetup sets default values to all future ajax requests.

        $(document).ready(function(){
            
            // Set cache = false for all jquery ajax requests.
            $.ajaxSetup({
                cache: false,
            });
        
        }
    

Method 2 : Set cache=false explicitly in $.ajax request

We can set cache=false in $.ajax option settings.

        // Set cache = false for all jquery ajax requests.
        $.ajax({
            url : "/rest/getStudents",
            method : "GET",
            cache : false
        })
        .done(function(data){
            console.log("Successfully fetched data.");
        })
        .fail(function(data){
            console.log("Error in fetching data");
        })
    

Method 3 : Set cache=false explicitly in $.get request

We can set cache=false in $.get option settings.

        // Set cache = false for all jquery ajax requests.
        $.get({
            url : "/rest/getStudents",
            cache : false
        })
        .done(function(data){
            console.log("Successfully fetched data.");
        })
        .fail(function(data){
            console.log("Error in fetching data");
        })
    

Method 4 : Appending timestamp to all ajax requests

We can set timestamp as a querystring to all ajax requests. $.now() gives a number representing current time in microseconds.

        // Set cache = false for all jquery ajax requests.
        $.ajax({
            url : "/rest/getStudents?t="+$.now(),
            method : "GET",
        })
        .done(function(data){
            console.log("Successfully fetched data.");
        })
        .fail(function(data){
            console.log("Error in fetching data");
        })
    

Conclusion

Developer should set cache=false to each ajax request to avoid catastrophic effect in production environment for support to legacy browsers and operating systems.

References

Ajax Setup
jQuery Ajax