jQuery getScript() cache busting parameters

By default, the cache is set to false. It means when you use the jQuery getScript to download external resources, it will not cache the resources. Instead, it will append a cachebusting parameters (?_=timestamp) at the end of the requesting url in order to trick the external server, hey it’s a new request, please give me a new copy of the resource. Thus, every time when this jQuery getScript() is executed, it will download a new copy of the resource. This is good for resources that changes very often but not good for resources that don’t change often because it will add page load time even if it is a very small file to download.

For example, assume the code below are in the head of a html page. It is requesting a javascript from an url. If you are using chrome, you can right click, select Inspect Element, select Network tab, and the reload the page, you will see it is requesting http://itools.codexpedia.com/clock/codexpedia_clock.js?_=1414719707971 with the extra cachebusting parameter(?_=1414719707971).

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$.getScript( "http://itools.codexpedia.com/clock/codexpedia_clock.js" )
		.done(function( script, textStatus ) {
		console.log( textStatus );
		})
		.fail(function( jqxhr, settings, exception ) {
		$( "div.log" ).text( "Triggered ajaxError handler." );
	});
</script>

To remove the cachebusting parameter so that the resource can be cached in order reduce load time, all we need to do is to set the cache to true in the jQuery ajaxSetup. $.ajaxSetup({cache:true});

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$.ajaxSetup({cache:true});
$.getScript( "http://itools.codexpedia.com/clock/codexpedia_clock.js" )
		.done(function( script, textStatus ) {
		console.log( textStatus );
		})
		.fail(function( jqxhr, settings, exception ) {
		$( "div.log" ).text( "Triggered ajaxError handler." );
	});
</script>