Wahlin on .NET

It's All About the Scripts

Simplify your work with JavaScript files and add cross-browser, AJAX-capable scripts into Web pages.

• By Dan Wahlin
• 05/29/2007

AJAX-enabled Web sites rely heavily upon JavaScript. Without JavaScript, Web pages that leverage AJAX are practically rendered useless. While writing JavaScript code is fairly straightforward, writing and managing cross-browser AJAX scripts can be challenging — this is where the ASP.NET AJAX Extensions really shine. In this column, I'll provide you with an introductory look at the ASP.NET AJAX ScriptManager control, and show how you can use it to simplify your work with JavaScript files and add cross-browser, AJAX-capable scripts into Web pages.

While the XMLHttpRequest object is critical to AJAX success, you must use JavaScript as a necessary partner. After all, without JavaScript, you would not be able to invoke the XMLHttpRequest object to make asynchronous requests from a browser to a server. The ASP.NET AJAX Framework relies on several JavaScript files and internal functions and methods to shield you from the complexities of using the XMLHttpRequest object and other browser objects and technologies.

JavaScript files used by the ASP.NET AJAX Framework are built into the System.Web.Extensions.dll assembly. This DLL file is placed in the GAC when you install the ASP.NET AJAX Extensions. You can use a tool such as Reflector to view the script resources embedded in the assembly; you can also find the scripts here:

C:\Program Files\Microsoft ASP.NET \ASP.NET 2.0 AJAX Extensionsv1.0.61025\MicrosoftAjaxLibrary \System.Web.Extensions\1.0.61025.0

Debug and release versions of the scripts are available at this location. The debug scripts are nicely formatted for easy reading and debugging, and the whitespaces are stripped out of the release scripts to minimize their size.

The ScriptManager control loads the scripts from the ASP.NET AJAX library. These scripts are required to support other AJAX controls and tasks performed in an AJAX-enabled Web page. The ScriptManager control also performs several other tasks such as loading debugged versions of a script, loading custom scripts and creating Web service client-side proxies.

You can define a basic ScriptManager control in an ASP.NET AJAX Web page using the following syntax:

<asp:ScriptManager id="sm" 
 runat="Server" />

The ScriptManager control relies on the ScriptResourceHandler HttpHandler (see my previous column on ASP.NET AJAX configuration) to access the scripts embedded in the System.Web.Extensions.dll assembly. The AJAX features needed by controls in a Web page determine which scripts are dynamically loaded from the assembly. Listing 1 shows an example of standard script output that's added to a Web page after the ScriptManager control executes.

The first script reference in Listing 1 loads a script file named MicrosoftAjax.js that contains the core functionality for ASP.NET AJAX Web pages. The second script reference loads a script file named MicrosoftAjaxWebForms.js that contains functionality for handling client-side events with a JavaScript class named PageRequestManager. The browser caches these scripts by default, which enhances the overall load time of pages that use the scripts on a frequent basis.

The ScriptManager control does more than load ASP.NET AJAX Framework scripts. You can use its Scripts property and associated ScriptReference control to load custom scripts as well. Listing 2 shows an example of how you can use the ScriptManager control to load a custom script named MyScript.js. Custom scripts are rendered during the ScriptManager's PreRender event and are immediately added after the first two script references in Listing 1.

It's important to note that custom scripts using the ScriptManager must notify the client-side ASP.NET AJAX Framework when they have finished loading. You can make sure this process occurs by adding this line of code at the bottom of your custom script file:

if (typeof(Sys) !== 'undefined') 
Sys.Application.notifyScriptLoaded();

In cases where you want to load custom scripts without using the ScriptManager control, you can use the standard HTML <script> tag. However, you'll want to ensure that your scripts are loaded at the appropriate time during your Web page's client-side life-cycle, especially if your scripts rely on functionality defined in ASP.NET AJAX library scripts.

The ScriptManager control loads core ASP.NET AJAX Framework scripts that add AJAX functionality into your Web pages. You must add the a ScriptManager control to a Web page anytime you want to use ASP.NET AJAX with new or existing ASP.NET Web pages. In future columns, I will provide additional details on how you can use the ScriptManager control to work with debug and release scripts, as well as generate client-side Web service proxies.