Recently, while working on a web application, we were seeing inconsistencies among browsers. Basically, we were updating some real-time statistics on a web page and, as usual, we developers did most of our testing in Chrome. I will say, in our defense, that QA missed the issue too!
The JQuery code running on our page was making web service calls to our application server every so often and updating the page with statistics returned from those calls. Unfortunately, we noticed that some browsers weren’t updating at the same frequency that we thought they should. One browser would show one value and sometimes another browser would show a different value concurrently.
The first step in figuring out what was going on was to look at the local console on the browsers for any errors. We didn’t see any errors that indicated a problem with our JavaScript or calls to our application server.
The second thing we did was to turn on network logging on the browsers. For Internet Explorer and Chrome, you can do this with the network capture tab in the developer tools.
After turning on network logging, we noted our update function was getting called appropriately for both IE and Chrome and that our calls were being made and getting responses.
The final thing we did was to review our JQuery code carefully. Doing that, we noticed what we thought was the problem—one of our web service calls doing an HTTP GET and returning JSON did not have caching turned off.
Our function getting called on a timer looked something like the code below. The line that wasn’t there, but should have been was the one in red that turns off caching (“cache: false”). After adding this, our problem was solved.
function updateStat() {
$.ajax({
url : "/api/1/services/get-stat.json",
cache: false,
dataType : 'json',
success: function(response) {
// do something
},
error: function(response) {
// handle error
}
});
}
Adding “cache: false” to the Ajax call actually causes an additional request parameter “_” to be added to the HTTP GET call. This request parameter includes a unique value that causes IE not to cache the response. See https://api.jquery.com/jquery.ajax/ for information on using the cache setting.
Additionally, you could also set “cache:false” globally using ajaxSetup (see https://api.jquery.com/jquery.ajaxsetup/), but that is not considered best practice.
For additional information or if you have questions about controlling caching of HTTP GET requests, contact us today.