Microsoft Ajax, from the bottom up - part 7

Hi all ,Finally we have reached the client side of Microsoft Ajax, known by the name "Microsoft Ajax Library". But as usual in this series of posts, a reminder of what has been written and said so far:

Microsoft Ajax, from the bottom up

Microsoft Ajax, from the bottom up - part 2.

Microsoft Ajax, from the bottom up - part 3

Microsoft Ajax, from the bottom up - part 4

Microsoft Ajax, from the bottom up - part 5

Microsoft Ajax, from the bottom up - part 6

If we take a look on the Client side architecture in this figure

We can see it has many "things" in it , including the following:

1. It is a JavaScript framework, meaning it contains some js files that can be used  independently from ajax , or being used internally by the Microsoft asp.net Ajax, like when using an UpdatePanel.

2.  It has a JavaScript base type extensions. What Microsoft did is very simple, They used the native types prototypes and added more functionality to them. i will explain about it later, but for now, take a look at these 2 lines of code for instance:

var str1 = " This is some string with white spaces   ";
alert(str1.trim());  

Where did the trim functions came from?JavaScript does not have any trim function in its native string type!!! is this C# like Trim function? The answer is very simple, all that has been done is extending the native string type using its prototype attribute. I will discuss it shortly in this post.

3. It has a JavaScript new types known as Script BCL,  organized in a C#/Java like namespaces. Look at these couple of lines of code:

var oStringBuilder = new Sys.StringBuilder();
oStringBuilder.append("<Books>");
oStringBuilder.append("<Book name='C# in action'>");
oStringBuilder.append("<Book name='Linq in action'>");
oStringBuilder.append("<Book name='ASP.NET 3.5 in action'>");
oStringBuilder.append("</Books>");
alert(oStringBuilder.toString());

What ta BIP BIP BIP is going on here???? StringBuilder is a C# class , isn't it? Well as it turns out JavaScript combined with "Microsoft Ajax Library" now has new types anyone can
used and build a nicer and better code.

4. It has a JavaScript classes being used as the core classes for the internal operations for the Ajax engine in the client side.This part includes among many other JavaScript classes the

Sys.Net.WebRequest Class
Type Class
Sys.WebForms.BeginRequestEventArgs Class and much much more.

4. It has Web services proxies for making the ajax calls to web services (of WCF services).

5. It has a JavaScript serializing the http request results.

6. It has a History solution for partial page updates that can be used in the server side or even in the client side. I will show some very cool sample later.

7. It has a built in objects that can be very helpful for debugging and tracing JavaScript.

By the way , a good reference  to the asp.net ajax extensions can be found here:

http://asp.net/AJAX/Documentation/Live/ClientReference/Global/default.aspx

So lets begin and Show some of the new types JavaScript has to offer, In the next post i will show how they extended the existing JavaScript native types.

JavaScript "new" objects:

first of all, in order to use these "new" objects that come out of the box for you, you need to add a ScriptManager to the page. Now lets see a sample of a very useful object that i mentioned earlier, The StringBuilder objects.

The Sys.StringBuilder provides a way to concat strings. It has just like C# StringBuilder an append method, an appendLine method and a toString method that returns the concat string so far.Here is a sample code just i like i wrote a couple of lines ago:

var oStringBuilder = new Sys.StringBuilder();
oStringBuilder.append("<Books>");
oStringBuilder.append("<Book name='C# in action'>");
oStringBuilder.append("<Book name='Linq in action'>");
oStringBuilder.append("<Book name='ASP.NET 3.5 in action'>");
oStringBuilder.append("</Books>");
alert(oStringBuilder.toString());

Lets explain some of the things here, first of all the namespace,
how can there be a namespace in JavaScript.Lets say you wish to implement a namespace in JavaScript, all you need to do , is to create an empty objects using the constructor function ,
something like:

function MyNamespace() { };
MyNamespace.ClassA = function(x, y)
{
   this.x = x;
   this.y = y;
   this.toString = function() {alert(this.x +  " " + this.y); }
}
       
var oClassA = new  MyNamespace.ClassA(5,10);
oClassA.toString();

Here i created an empty object using constructor functions (If you are not familiar with the term i suggest you read about it)and added to this object "sub object" by the name "Class1". Since every Object in JavaScript is basically a dictionary  Adding properties is very simple.

If you wish to so this yourself ,"ASP.NET AJAX Extensions" has a built in mechanism that
does exactly that using Type class:Type.registerNamespace("Samples");

Type.registerNamespace("Samples");

It adds this namespace to the global window object in your host environment (The browser) 

So starting from today, any concatenation operations can be done using the new StringBuilder class;

In the next post i will show how to use the native types extensions and how they were implemented.