Overview of Popular JavaScript Frameworks - ASP.NET AJAX | 2

Overview of Popular JavaScript Frameworks - ASP.NET AJAX [con't]

Extending Client-side JavaScript with ASP.NET AJAX

Class Support

As in JavaScript, all classes in ASP.NET AJAX derive from Object. Related classes can be grouped by namespace using the Type.registerNamespace() and registerClass() methods. Here's an example that registers a namespace, creates a class, then registers the class with the namespace:

Remember that, in order to add ASP.NET AJAX functionality to a Web page, you must include a ScriptManager control to the page (not shown in the above example).

Personally, I feel that the class library features are a little weak in some areas. In my opinion, the use of getters and setters does an adequate job of emulating this OO pattern, but adding member properties to a class in JavaScript renders them public! Preceding them with an underscore is a good reminder that they are supposed to be private attributes, but there's nothing stopping a developer from circumventing the getters and setters. As we've seen in my Partial Function Application in JavaScript article, it's not that difficult to create private variables in JavaScript using variable declaration (var x;) and closures. Another oddity is that the registerClass() method acts on the object, but still requires its name as the first argument.

Extending a class is a fairly simple process, although less so than some of the other Frameworks we've seen. The first step is to call the initializeBase() method on the class in the constructor function. It accepts the class (the this pointer) as the first argument, and an array of arguments to pass on to the superclass's contructor. The registerClass() method requires the base class as the second parameter, in addition to the name of the class that we're registering. Here's some code that creates a child class of AutoMatic.Vehicle and overrides the toString() function to include its turbo property. We can access the parent's property using the callBassMethod() function:

The registerClass() method accepts an optional third parameter: an array of interfaces that the type implements. An interface is a logical structure that defines the input and output requirements of classes that implement it. This enables a function to interact with classes that implement the same interface regardless of what other functionality the class performs. Here's an Interface called IGasGuzzler that implements the wasteGas() method. If you wanted your class to contain this method, you would pass the interface as the third argument of its constructor. The following example does exactly that to add the IGasGuzzler interface to the Automatic.Car class we created above:

Notice that while adding the interface to a class will guarantee that its methods are implemented, it doesn't specify what they should actually do. That part is up to you!

Type Extensions

As mentioned in the Server Controls section, adding the ScriptManager control to your page automatically gives you access to a number of instance and Static Type methods that extend native JavaScript. Extensions are provided for the following types:

String
Boolean
Date
Array
Error
Number
Object

To give you an idea of what the extensions provide, let's take a look at the String type. Here you'll find the trimStart(), trimEnd() and trim() functions that are conspicuously absent from the native JavaScript String object. For those of you not familiar with the trim() function, it removes the leading and trailing whitespace from a string:

Examples of Static Type methods can be located in the Array class. Some useful functions you'll find here include Array.contains() and Array.forEach(). The Array.contains() method searches through an array to find an item, like a more basic version of the Unix grep() function. It accepts two arguments: the array, and the search object:

Keeping with the same array as in the last example, we'll use the static Array.forEach() method to create a string containing each element, along with its array index. It accepts three arguments: the array to affect, a function to apply to it and the context for calling function (i.e.: the object that the this pointer references):

Asynchronous Communications

With a name like ASP.NET AJAX, you know that the Framework excels in client-server calls. In fact, ASP.NET AJAX supports a number of asynchronous communications, including:

Web Services
HTTP Requests
Proxy Classes
XML and JSON Serialization

Calling a Web Service

Using ASP.NET 2.0 AJAX extensions enables a Web page to call server-based methods without a callback and without refreshing the whole page. Hence, this is a great way to transfer data between the browser and the Web server. Here's an example that gets the time from the server and displays it in the page. The call to the Web service is initiated by a button click; the onclick event calls the JavaScript GetServerTime() function, which in turn calls the Web service, passing in a function to execute upon success:

<head>
    <script type="text/javascript">
        // This function calls the Web Service method.
        function GetServerTime()
        {
            ServerTime.GetServerTime(OnSucceeded, OnFailed);
        }
        // This is the callback function that
        // processes the Web Service return value.
        function OnSucceeded(result)
        {
            var RsltElem = document.getElementById("Results");
            RsltElem.innerHTML = result;
        }
    function onFailed(error)
    {
        RsltElem.innerHTML = error.get_stackTrace();
    }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
     <asp:ScriptManager runat="server" ID="scriptManager">
            <Services>
                <asp:ServiceReference path="ServerTime.asmx" />
            </Services>
        </asp:ScriptManager>
        <div>
            <h2>Server Time</h2>
                <p>Calling a service that returns the current server time.</p>
                <input id="EchoButton" type="button" value="GetTime" onclick="GetServerTime()" />
        </div>
    </form>
    <hr/>
    <div>
        <span id="Results"></span>
    </div>
</body>

[previous] [next]