But wait a minute, what about if the CDN fails, due to an un-reliable internet connection? The pages will break without any JQuery or ASP.NET AJAX.
So, how do I avoid it? It's simple. We can always have a fallback mechanism in place for worst scenarios.
Solution for ASP.NET 4.5 Developers
ASP.NET 4.5 framework already includes the fallback mechanism for CDN outages. When using a
ScriptManager control in Web Forms, you can set
EnableCdn="True" and ASP.NET will automatically change the
<script> tags from using local scripts to using CDN-served scripts with local fallback checks included.
In the aspx page, we have to do this:
<asp:ScriptReference Name="jquery" />
In the global.ascx, we can add the
script mappings, like this:
string str = "2.0.0";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
Path = "~/Scripts/jquery-" + str + ".min.js",
DebugPath = "~/Scripts/jquery-" + str + ".js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".js",
CdnSupportsSecureConnection = true,
LoadSuccessExpression = "window.jQuery"
And the output will look like this:
Here’s a generic solution for rest: in your page header, include the CDN reference, then check for a type or variable that should be present after a script load, and if it’s undefined, you can write out a reference to a copy that you’re hosting. Here’s how it looks:
Or, we can use this:
<script>window.jQuery || document.write(("/Scripts/jquery-2.0.0.min.js")%>">\x3C/script>')</script>
Or, if you want to specify multiple CDN, this is how you can:
<script> window.jQuery || document.write(src="http://www.codeproject.com/ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js">
\x3C/script><!-- fallback to local file -->
<script> window.jQuery || document.write(<%=ResolveClientUrl("/Scripts/jquery-2.0.0.min.js")%>">
One easy way to test is to mangle the CDN references. You’ll get a HTTP 404 error due to the bad reference, but the fall-back reference will be loaded. You can verify this using FireBug.