Home / AJAX

HOW TO Load Required Scripts

RSS
Modified on 2009/12/04 17:19 by Stephen Walther Categorized as Uncategorized
The ASP.NET Ajax Library's Script Loader provides a flexible way to load scripts required by a page as well as any dependencies that may be needed. Because it loads scripts in parallel the page's load time is minimized and the amount of code needed to load scripts, their dependencies and components is significantly reduced. To load ASP.NET Ajax Library or jQuery scripts a collection called Sys.scripts (defined in the ASP.NET Ajax Library's Start.js file) can be used along with a call to Sys.require. Each script in the Sys.scripts collection has an alias that references a physical script. For example, to load the MicrosoftAjaxApplicationServices.js scripts which provides access to ASP.NET membership, profile and roles services, the Sys.scripts.ApplicationServices reference can be used:
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>

<script type="text/javascript">

Sys.require([Sys.scripts.ApplicationServices], function() { //Application services loaded });

</script>


When the page loads the Sys.require code will cause MicrosoftAjaxApplicationServices.js to be loaded as well as any scripts that it depends on. Figure 1 shows the different scripts that are loaded when this code is run.

Image

Figure 1. The Script Loader can load a script and all of its dependencies.

Multiple Sys.scripts values can be passed to Sys.require when different scripts are needed. The following example demonstrates how to use Sys.require to load MicrosoftAjaxApplicationServices.js, MicrosoftAjaxTemplates.js and jQuery.js:
<script src="Scripts/AjaxLibrary/Start.js" type="text/javascript"></script>

<script type="text/javascript">

Sys.require([Sys.scripts.ApplicationServices, Sys.scripts.Templates, Sys.scripts.jQuery], function() { //Application services, templates and jQuery now available });

</script>


The Script Loader is able to load all ASP.NET Ajax Library scripts as well as jQuery and jQuery Validation scripts. The script aliases recognized by Sys.scripts are shown in Table 1.

Sys.scripts Value Script Description
AdoNet MicrosoftAjaxAdoNet.js Allows client-side code to interact with ADO.NET Data Services.

ApplicationServices

MicrosoftAjaxApplicationServices.js Provides access to ASP.NET profile, authentication and role services.
ComponentModel> MicrosoftAjaxComponentModel.js Provides behavior and component functionality.
Core MicrosoftAjaxCore.js Base script that contains core ASP.NET Ajax Library functionality and JavaScript language enhancements.
DataContext MicrosoftAjaxDataContext.js Contains the DataContext and AdoNetDataContext client-side classes.
Globalization MicrosoftAjaxGlobalization.js Contains language globalization functionality for dates, times and numbers.
History MicrosoftAjaxHistory.js Provides browser history functionality for Ajax applications.
jQuery jquery-1.3.2.min.js Minified jQuery library script.
jQueryValidate jquery.validate.min.js Minified jQuery Validate script used to validate form elements.
Network MicrosoftAjaxNetwork.js Contains core networking features used to communicate with remote sites and services.
Serialization MicrosoftAjaxSerialization.js Provides object serialization and deserialization functionality.
Templates MicrosoftAjaxTemplates.js Provides client-side template rendering functionality.
WebServices MicrosoftAjaxWebServices.js Contains a web service proxy class used to call web services.

Table 1. Sys.scripts aliases and the scripts that they referece.

Figure 2 shows the relationships between each of the ASP.NET Ajax Library scripts.

Image

Figure 2. ASP.NET Ajax Library scripts and their dependencies.

How does the Script Loader know which scripts to load and all the dependencies? Each of the aliases shown in Table 1 is defined in Start.js as well as any dependencies that a given script may have. An example of how relationships are defined between scripts in Start.js is shown next.


loader.defineScripts({ releaseUrl: "%/MicrosoftAjax" + "{0}.js", debugUrl: "%/MicrosoftAjax" + "{0}.debug.js", executionDependencies: ["Core"] }, [{ name: "Core", executionDependencies: null, isLoaded: !!window.Type }, { name: "ComponentModel", isLoaded: !!Sys.Component, plugins: [{name: "setCommand", description: "Causes a DOM element to raise a bubble event when clicked.", plugin: "Sys.UI.DomElement.setCommand", parameters: [{name: "commandSource", description: "The DOM element that causes the event when clicked."}, {name: "commandName", description: "The name of the command to raise."}, {name: "commandArgument", description: "Optional command argument."}, {name: "commandTarget", description: "DOM element from which the command should start bubbling up."}]}] }, { name: "History", executionDependencies: ["ComponentModel", "Serialization"], isLoaded: !!(Sys.Application && Sys.Application.get_stateString) }, { name: "Serialization", isLoaded: !!Sys.Serialization }, { name: "Network", executionDependencies: ["Serialization"], isLoaded: !!(Sys.Net && Sys.Net.WebRequest) }, { name: "WebServices", executionDependencies: ["Network"], isLoaded: !!(Sys.Net && Sys.Net.WebServiceProxy) }, { name: "ApplicationServices", executionDependencies: ["WebServices"], isLoaded: !!(Sys.Services && Sys.Services.RoleService && Sys.Services.RoleService.get_path) }, { name: "Globalization", isLoaded: !!Number._parse }, { name: "AdoNet", executionDependencies: ["WebServices"], components: ["Sys.Data.AdoNetServiceProxy"], isLoaded: !!(Sys.Data && Sys.Data.AdoNetServiceProxy) }, { name: "DataContext", // TODO: Create new script, AdoNetDataContext.js, so you dont need all of AdoNet to get DataContext // webforms scenarios though: to use you'd need AdoNet.js, DataContext.js, AdoNetDataContext.js, Templates.js executionDependencies: ["ComponentModel", "Serialization", "WebServices", "AdoNet"], components: ["Sys.Data.DataContext", "Sys.Data.AdoNetDataContext"], isLoaded: !!(Sys.Data && Sys.Data.DataContext) }, { name: "Templates", executionDependencies: ["ComponentModel", "Serialization"], behaviors: ["Sys.UI.DataView"], plugins: [{name:"bind", plugin: "Sys.Binding.bind", parameters: ['target',{name:'property',type:'String'},'source',{name:'path',type:'String'},'options']}], isLoaded: !!(Sys.UI && Sys.UI.Template) }, // Composite Scripts { name: "MicrosoftAjax", releaseUrl: "%/MicrosoftAjax.js", debugUrl: "%/MicrosoftAjax.debug.js", executionDependencies: null, contains: ["Core", "ComponentModel", "History", "Serialization", "Network", "WebServices", "Globalization"] } ]);

loader.defineScripts(null, [ { name: "jQuery", releaseUrl: ajaxPath + "jquery/jquery-1.3.2.min.js", debugUrl: ajaxPath + "jquery/jquery-1.3.2.js", isLoaded: !!window.jQuery }, { name: "jQueryValidate", releaseUrl: ajaxPath + "jquery.validate/1.5.5/jquery.validate.min.js", debugUrl: ajaxPath + "jquery.validate/1.5.5/jquery.validate.js", dependencies: ["jQuery"], isLoaded: !!(window.jQuery && jQuery.fn.validate) } ]);

The first loader.defineScripts call defines all the ASP.NET Ajax Library scripts and their dependencies. Once those are defined the jQuery and jQuery Validation scripts are also defined. When Sys.require is used in a page the Script Loader analyzes this metadata to determine if a script has any dependencies and then loads the appropriate script(s). This same pattern can be followed to load custom scripts and their dependencies. If the Script Loader finds that a particular script contains other scripts (a composite script) it will use script combining to minimize the number of network calls.