The MicrosoftAjax.js file is the most important client side JavaScript file in the MS AJAX framework. This contains all the primary/basic functionality of MS AJAX.

What this file contains can be categorized into the following:

• Extensions to the native JavaScript objects
• Object oriented functionality via Type class
• Sys namespace
• Some important global variables / shortcuts

Extensions to the JavaScript objects

The standard JavaScript as implemented in the browsers comes with several built-in objects. In MicrosoftAjax.js file, these objects are extended with additional functionality.

Figure 1: Extensions to System and JavaScript objects in MS AJAX

For example, the built-in String object in JavaScript comes with a lot of functionality: substring, toLowerCase, toUpperCase, split, search, replace, length, etc. The MS AJAX adds some nice additional methods like trim/trimStart/trimEnd, format, etc.

Following are the built-in JavaScript objects that are extended by MS AJAX. These objects can be further sub-divided into two sub-categories:

System/Language-type objects
window
Function
Object
Error

Widely used Application-type objects
Array
Boolean
Number
String
Date
RegEx

In the above list of objects, window is a DOM object that sits at the root of everything on the page displayed inside a web browser. Function and Object are JavaScript language concepts that provide some of the object oriented functionality.

The second list above contains the objects that hold the application related information. A String object, for example, might hold the name of a customer.

Object-Oriented functionality via Type class/object

Type object is created with the raw JavaScript concepts to add namespace, class, and other object-oriented concepts to the MS AJAX library. The methods in Type itself are added by using the JavaScript’s concept of prototype.

Figure 2: The primary methods in the Type class that facilitate object-oriented functionality

• registerNamespace
• registerClass
• registerInterface
• registerEnum

In addition to the above methods, you have several helper methods. The Type object/class is a global object. This class is NOT registered with registerClass method, because, this is THE object that contains the registerClass method. Once this object is loaded, new namespaces and classes can be created using the registerNamespace and registerClass methods.

Sys Namespace

Now that the basic JavaScript objects have been extended and the object-oriented concepts (namespace, class, interface, enum) have been added via the global Type class, it’s time to add new application-type functionality using those objects and methods.

The primary new functionality added in MicrosoftAjax.js file comes from the objects and namespaces contained in the Sys namespace. The Sys namespace contains the following namespaces:

• UI
• Net
• Services
• Serialization

These namespaces each have several classes, interfaces, and enumerations. Let’s take a quick look at the important classes in each of these namespaces.

Figure 3: The Sys namespace and some important classes (not all the classes in every namespace are included)
 

Sys Namespace

The root Sys namespace itself has several classes, in addition to the classes in the contained namespaces. The important classes in this namespace are:

Application
In the MicrosoftAjax.js file, _Application class is defined; and then the Sys.Application is initialized as an object of that class. Hence, only one instance of the Application will be available.

Sys.Application = new Sys._Application();

Component
The basic component creation and disposal functionality comes from this class. The global variable $create also comes from this class:
var $create = Sys.Component.create = function Sys$Component$create(type, properties, events, references, element) {

As you can see below, the Component class is the base class for Behavior and Control classes:

Sys.UI.Behavior.registerClass(’Sys.UI.Behavior’, Sys.Component);
Sys.UI.Control.registerClass(’Sys.UI.Control’, Sys.Component);

Debug
The debug class provides the basic debugging functionality from the CLIENT side. You can assert certain condition is true. And traceDump can be used to dump an object.

EventHandlerList
This class is heavily used in the MS AJAX Custom Controls via statements like the following (example is from a rating control):

this.get_events().addHandler("Rated", handler);
this.get_events().removeHandler("Rated", handler);

In the above statements, get_events() method is from the Component class and returns an EventHandlerList object.

StringBuilder
StringBuilder is like the StringBuilder you are familiar with from the server-side .Net class library. You can use append() or appendLine() methods to build long strings and then once you are ready you can use toString() method to get the string out of that.

UI Namespace
The important classes in the Sys.UI namespace are: DomEvent, DomElement, and Control.

DomEvent
The handler methods from this class are heavily used from the global short cuts: $addHandler, $removeHandler, etc. For example, you can add handlers for focus, blur, keydown via the following statements:

$addHandler(element, "focus", this._focusHandler);
$addHandler(element, "blur", this._blurHandler);
$addHandler(element, "keydown", this._keyDownHandler);

DomElement
This class has the famous getElementById method which is available as the shortcut $get. This shortcut is used heavily, for example:

var element = $get(id);

Control
This is the base class for creating client-side custom controls.

Net Namespace
This contains the client-side classes to communicate with the server. You would want to communicate with the server if you want to call a web service there; or, if you are posting the data back to the server and want to get the results asynchronously.

WebServiceProxy
The Invoke method in this class can be used invoke a particular method from a particular webservice on the server and have a callback method interpret the returned results. For example, the AutoCompleteExtender uses following call to get the matches from the server as the user types in text into the autocomplete extender textbox.

Sys.Net.WebServiceProxy.invoke(this.get_servicePath(), this.get_serviceMethod(), false,
{ prefixText : this._currentPrefix, count: this._completionSetCount },
Function.createDelegate(this, this._onMethodComplete),
Function.createDelegate(this, this._onMethodFailed),
text);

XMLHttpExecutor
This class contains the piece of code that is the essence of AJAX – the open() method on the XMLHttpRequest which will call onreadystatechange once the server responds. The executeRequest method in the XMLHttpExecutor contains this iconic AJAX code that’s there in all the AJAX books. Ironically, with MS AJAX, you will never use this code directly.

Important Global Variables / Shortcuts

And finally, as the methods and classes are being defined, MicrosoftAjax.js file also defines some global variables for the important methods. For example, $addHandler is a global variable that is to be used as a shortcut for the addHandler method in Sys.UI.DomEvent class:

var $addHandler = Sys.UI.DomEvent.addHandler = function Sys$UI$DomEvent$addHandler(element, eventName, handler) {

Other global variables include:
Event Handlers - $addHandler, $addHandlers, $removeHandler, $clearHandlers
Components / Elements - $create, $find, $get

Related Articles

To see where the client-side JavaScript files are installed:
How are the client side JS files for MS AJAX organized?