Microsoft Ajax, from the bottom up - part 8

Hi all ,In the last post i wrote that the ASP.NET Ajax on it's client half extended all its native types and added some new functionality to them, such as the trim method to the String object and so on. So lets take a look on how they did it. but first here are the links to the previous posts on the subject.

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

Microsoft Ajax, from the bottom up - part 7

So , all we need to do in order to get this functionality is simply add a ScriptManager to our asp.net page. Here is a simple example:

function runExample()
      {
          varnewStr = newString("       This is a string   ");
         
          var trimmedStr = newStr.trim();
         
          alert("The string with white spaces removed:"+ trimmedStr + ".");
      }

Simple right? Just don't forget to add the <asp:ScriptManager runat="server" ID="ScriptManager1"> </asp:ScriptManager> line.

So how did they manage to add this functionality? simple, even very simple. All they did is , they used the Prototype property each JavaScript object has.

Every JavaScript object has a property named "prototype" which controls which data members and which method it has. It's like an inheritance chain called the prototype chain. Each object is created based on some other object's prototype. The base prototype is Object.prototype . so each JavaScript object has built in methods (he can even override them) such as the toString, toLocaleString , hasOwnProperty and more. In JavaScript every object is created based on some other object. There are no classes in JavaScript.

So if you wish to add , lets say to the Worker object , another method, here is the way to do it:

function Worker(name,dept)
{
    this.name = name;
    this.dept = dept;
    this.getName = function (){return name };
}

Now if we wish to add another method to this constructor function , we can do it using the prototype property as follow:

Worker.prototype.getDept = function() { return this.dept }

Here are another cool "extension methods" the base types has:

Array.addRange, Array.forEach,

for working with array as a queue: enqueue and dequeue.

String.format, String.endsWith and much more.

Enjoy.

On the next and final post about Microsoft Ajax i will show the History manager the framework has to offer for managing back button when using partial page updates.