Home / AJAX

Increasing Performance Using the Microsoft Ajax CDN

RSS
Modified on 2009/12/21 20:39 by Erik Reitan Categorized as Uncategorized
The Microsoft Ajax Content Delivery Network (CDN) enables you to easily add Microsoft Ajax Library and jQuery scripts to your Web applications. You can start using the Microsoft Ajax Library or jQuery simply by adding a script tag to your page that point to the script files on Ajax.Microsoft.com. Alternatively, you can use the EnabledCdn property of the ScriptManager server control to enable the Microsoft Ajax Library for your Web application.

CDNs are used to cache and deliver all types of content, which can include images, videos, CSS and JavaScript files. Using a CDN can significantly improve a Website's end-user performance, because it enables browsers to more quickly retrieve and download content.

By taking advantage of the Microsoft Ajax CDN, you can significantly improve the performance of your Ajax applications. The contents of the Microsoft Ajax CDN are cached on servers located around the world. In addition, the Microsoft Ajax CDN enables browsers to reuse cached JavaScript files for Web sites that are located in different domains.

Microsoft Ajax CDN Benefits

When the browser requests the Ajax script libraries, the browser will be automatically served by the CDN. Benefits of using the Microsoft Ajax CDN include the following:
  • Requests to the Microsoft Ajax CDN will be processed by the CDN server faster than if the request went to a standard Web server, making the end-user's page load much more quickly.
  • You do not have to pay for the bandwidth of this file because the file comes from a Microsoft server.
  • The script files can be easily cached across multiple Web sites, which means the script files may not need to be downloaded if the user has previously navigated to a Web site that requested the file.

Using the Microsoft Ajax CDN

In addition to allowing you to reference script files directly using a script element, ASP.NET 4 makes it easy to use the Microsoft Ajax CDN from ASP.NET Web Forms applications that use the ScriptManager server control.

The ASP.NET 4 ScriptManager control includes a new property named EnableCdn. When you assign the value of true to this property, your application will use the Microsoft Ajax CDN to request Microsoft Ajax Library files automatically:
<asp:ScriptManager ID="ScriptManager1" EnableCdn="true" runat="server">
</asp:ScriptManager>
When you enable the Microsoft Ajax CDN with the ScriptManager, your application will retrieve all JavaScript files that it normally retrieves from the System.Web.dll or System.Web.Extensions.dll assemblies from the CDN instead. This includes both the JavaScript files within Microsoft Ajax, as well as the built-in Web Forms JavaScript files, such as the WebUIValidation.js file for client-side validation, and the JavaScript files for controls such as TreeView, Menu, and others.

This provides end-user performance improvements, and means that users accessing your ASP.NET Website will not need to re-download these files if they have visited another ASP.NET Website that uses the CDN.

Using Microsoft Ajax with the CDN

You can use the Microsoft Ajax Library from the Microsoft Ajax CDN by adding script elements to a page in your Web application. For instance, if you wanted to add Microsoft Ajax Beta script files, you could add the following script elements to your Web page:
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjax.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js" type="text/javascript"></script>

The Microsoft Ajax CDN also includes debug versions of these scripts that you can use while developing a Microsoft Ajax application. For instance, if you wanted to add the debug version of the Microsoft Ajax Beta script files, you could add the following script elements to your Web page:
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.debug.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.debug.js" type="text/javascript"></script>
<script src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>

The following example is a complete sample page that illustrates how you can display a set of product records using the Microsoft Ajax DataView control, using script elements that get the Microsoft Ajax Library from the CDN.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Microsoft AJAX from CDN</title>
        <style type="text/css">
            .sys-template
            {
                display:none;
            }
        </style>
        
        <script type="text/javascript" 
               src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjax.debug.js"></script>
        <script type="text/javascript" 
               src="http://ajax.Microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.debug.js"></script>
        <script type="text/javascript">
        
            function pageLoad() {
                var products = [
                    {Name: 'Telephone', UnitPrice: 12.33},
                    {Name: 'Comb', UnitPrice: 3.28},
                    {Name: 'Laptop', UnitPrice: 422.99}            
                ];
                    
                $create(
                    Sys.UI.DataView, 
                    {data:products}, 
                    null, 
                    null, 
                    $get('productList')
                );
            }
        
        </script>
    </head>

<body xmlns:dataview="javascript:Sys.UI.DataView" xmlns:sys="javascript:Sys">

<h1>Products</h1>

<ul id="productList" class="sys-template"> <li>{{Name}} - {{UnitPrice}}</li> </ul>

</body> </html>

Using jQuery with the Microsoft Ajax CDN

You can download jQuery scripts from the Microsoft Ajax CDN and use them in your Web application by adding the following script element to a Web page:
<script src="http://ajax.Microsoft.com/ajax/jquery-1.3.2.js" type="text/javascript"></script>

The Microsoft Ajax CDN also includes the minified version of the jQuery script, which you can get using the following element:
<script src="http://ajax.Microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

The following sample page uses the Microsoft Ajax CDN version of the jQuery library to display the contents of a div element when a button is clicked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery from Microsoft AJAX CDN</title>
        <script src="http://ajax.Microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript"> $( domReady ); function domReady() { $('#btn').click( showMessage ); } function showMessage() { $('#message').fadeIn('slow'); } </script> </head> <body>

<button id="btn">Show Message</button>

<div id="message" style="display:none">

<h1>Hello from jQuery!</h1>

</div>

</body> </html>