Joe's Blog

First Exam : Application Development Foundation .NET 2.0 (Exam 70-536) - Study Workflow

Joseph Ghassan — Mon, 25 Feb 2008 18:36:47 GMT

The above workflow represent the topics required to cover to pass Exam 70-536.

In addition, I am reading two books :

Programming Microsoft Visual C# 2005 : The Language ( Microsoft Press )

Pro C# 2008 and the .NET 3.5 Platform ( Apress )

My Certifications long term roadmap

Joseph Ghassan — Mon, 25 Feb 2008 16:52:31 GMT

I will start by Exam 70-536 and climb up to the 7th exam to acquire the MCPD : Enterprise Application Certification.

It should be fun!

Ajax Utility methods

Joseph Ghassan — Sun, 03 Feb 2008 17:37:41 GMT

XMLHttpRequest Factory

/* XMlHttpRequest Factory  */
function XMlHttpRequestFactory()
{
    var xmlHttp = null;
    
    if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
        //alert(xmlHttp + '[Status = ' + xmlHttp.readyState + ']' );
    }
    else if(window.ActiveXObject)
    {
        try
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            //alert(xmlHttp + '[Status = ' + xmlHttp.readyState + ']');
        }
        catch(e)
        {
           
        }
    }     
    
    return xmlHttp;  
}

Send Asynchronous Request to Server

/* Send Asynchronous Request to Server  */
/* URL : reqested URL; callBackMethod: method to be called when the response is ready */
function SendAsynchronousRequest(xmlHttp, URL, callBackMethod, httpVerb, contentType)
{
    
    
    if(xmlHttp != null)
    {
            
        xmlHttp.open(httpVerb,GenerateUniqueURL(URL),true);
        
        xmlHttp.onreadystatechange = callBackMethod;
        
        xmlHttp.setRequestHeader('Content-type',contentType);
        
        xmlHttp.setRequestHeader("Cache-Control", "no-cache"); 

        
        xmlHttp.send(null);
        
    }
    else
    {
        throw new Error('Can Not send a Request from the browser, no XMlHttpRequest object found');
    }
}

Toggeling Request Status

/* Request Status */
/* XMlHttpRequest Object */
function RequestStatus(xmlHttp)
{
    var status = false;
    if(xmlHttp.readyState == 0)
    {
        //alert("Request UNSENT");   
    }
    else if(xmlHttp.readyState == 1)
    {
        //alert("Request OPENED");       
    }
    else if(xmlHttp.readyState == 2)
    {
        //alert("Request HEADERS_RECEIVED");
    }
    else if(xmlHttp.readyState == 3)
    {
        //alert("Request LOADING");
    }
    else if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
        alert("Response DONE SUCCESSFULLY");
        status = true;
    }
    
    return status;
    
}

Hide UpdateProgress Image

* Show Update Progress  */
/* xmlHttp : XMlHttpRequest Object; imageID : Image to show/hide */
function ShowUpdateProgress(xmlHttp, imageID)
{
    var loader = document.getElementById(imageID);
    
    if(loader != null)
    {   
        
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
        {
            loader.style.visibility = "hidden";       
        }   
    }
}

Generate Unique URL to avoid caching problems :

/* Generate Unique URL */
/* URL : Uniform Resource Locator */
function GenerateUniqueURL(URL)
{
    var sep = (-1 < URL.indexOf("?")) ? "&" : "?";
    URL = URL + sep + "__=" + encodeURIComponent((new Date()).getTime());
    
    return URL;
}

Add Client Side PageLoad

/* AddClientPageLoad */
/* scriptManager : SYS.Application */
/* loadFuntion : function to be called at page load */
function AddClientPageLoad(scriptManager, loadFuntion)
{
    scriptManager.add_load(loadFuntion);
}

Add Client Side PageLoad

/* AddClientPageUnLoad */
/* scriptManager : SYS.Application */
/* UnloadFuntion : function to be called at page load */
function AddClientPageUnLoad(scriptManager, UnloadFuntion)
{
    scriptManager.add_load(UnloadFuntion);
}

Enjoy it!

Converting a number into its text presentation

Joseph Ghassan — Mon, 28 Jan 2008 21:09:18 GMT

I wrote this code 2 years ago, it is an interesting piece of code to convert any number between 0 and 999,999,999 into its text presentation.

Just create a console application and paste this code :

   1: using System;

   2: using System.Collections.Generic;

   3: using System.Text;

4:

   5: namespace NumberConverter

   6: {

   7:     class Program

   8:     {

   9:         public static string ConvertNumber(uint Number)

  10:         {

  11:             string strhh, strh1, strh2, strh3;

  12:             string str = "";

  13:             uint h1 = Number / 100; //hundreds

  14:             uint h2 = Number % 100;

  15:             uint h3 = h2 / 10; //tens

  16:             uint h4 = h2 % 10; //units

17:

  18:             switch (h1)

  19:             {

  20:                 case 1:

  21:                     strh3 = "one hundred";

  22:                     break;

  23:                 case 2:

  24:                     strh3 = "two hundred";

  25:                     break;

  26:                 case 3:

  27:                     strh3 = "three hundred";

  28:                     break;

  29:                 case 4:

  30:                     strh3 = "four hundred";

  31:                     break;

  32:                 case 5:

  33:                     strh3 = "five hundred";

  34:                     break;

  35:                 case 6:

  36:                     strh3 = "six hundred";

  37:                     break;

  38:                 case 7:

  39:                     strh3 = "seven hundred";

  40:                     break;

  41:                 case 8:

  42:                     strh3 = "eight hundred";

  43:                     break;

  44:                 case 9:

  45:                     strh3 = "nine hundred";

  46:                     break;

  47:                 default:

  48:                     strh3 = "";

  49:                     break;

  50:             }

  51:             switch (h3)

  52:             {

  53:                 case 1:

  54:                     strh2 = "ten";

  55:                     break;

  56:                 case 2:

  57:                     strh2 = "twenty";

  58:                     break;

  59:                 case 3:

  60:                     strh2 = "thirty";

  61:                     break;

  62:                 case 4:

  63:                     strh2 = "fourty";

  64:                     break;

  65:                 case 5:

  66:                     strh2 = "fifty";

  67:                     break;

  68:                 case 6:

  69:                     strh2 = "sixty";

  70:                     break;

  71:                 case 7:

  72:                     strh2 = "seventy";

  73:                     break;

  74:                 case 8:

  75:                     strh2 = "eighty";

  76:                     break;

  77:                 case 9:

  78:                     strh2 = "ninety";

  79:                     break;

  80:                 default:

  81:                     strh2 = "";

  82:                     break;

  83:             }

84:

  85:             switch (h4)

  86:             {

  87:                 case 1:

  88:                     strh1 = "one";

  89:                     break;

  90:                 case 2:

  91:                     strh1 = "two";

  92:                     break;

  93:                 case 3:

  94:                     strh1 = "three";

  95:                     break;

  96:                 case 4:

  97:                     strh1 = "four";

  98:                     break;

  99:                 case 5:

 100:                     strh1 = "five";

 101:                     break;

 102:                 case 6:

 103:                     strh1 = "six";

 104:                     break;

 105:                 case 7:

 106:                     strh1 = "seven";

 107:                     break;

 108:                 case 8:

 109:                     strh1 = "eight";

 110:                     break;

 111:                 case 9:

 112:                     strh1 = "nine";

 113:                     break;

 114:                 default:

 115:                     strh1 = "zero";

 116:                     break;

 117:             }

 118:

 119:             //Eleven - Twelve - ... - ninetee

 120:             if (strh2 == "ten" && strh1 == "one")

 121:             {

 122:                 strh1 = "";

 123:                 strh2 = "eleven";

 124:             }

 125:             else if (strh2 == "ten" && strh1 == "two")

 126:             {

 127:                 strh1 = "";

 128:                 strh2 = "twelve";

 129:

 130:             }

 131:             else if (strh2 == "ten" && strh1 == "three")

 132:             {

 133:                 strh1 = "";

 134:                 strh2 = "thirteen";

 135:

 136:             }

 137:             else if (strh2 == "ten" && strh1 == "four")

 138:             {

 139:                 strh1 = "";

 140:                 strh2 = "fourteen";

 141:

 142:             }

 143:             else if (strh2 == "ten" && strh1 == "five")

 144:             {

 145:                 strh1 = "";

 146:                 strh2 = "fifteen";

 147:

 148:             }

 149:             else if (strh2 == "ten" && strh1 == "six")

 150:             {

 151:                 strh1 = "";

 152:                 strh2 = "sixteen";

 153:

 154:             }

 155:             else if (strh2 == "ten" && strh1 == "seven")

 156:             {

 157:                 strh1 = "";

 158:                 strh2 = "seventeen";

 159:

 160:             }

 161:             else if (strh2 == "ten" && strh1 == "eight")

 162:             {

 163:                 strh1 = "";

 164:                 strh2 = "eighteen";

 165:

 166:             }

 167:             else if (strh2 == "ten" && strh1 == "nine")

 168:             {

 169:                 strh1 = "";

 170:                 strh2 = "nineteen";

 171:

 172:             }

 173:

 174:             //special cases

 175:             if (str.Length == 1)

 176:             {

 177:                 strhh = strh1;

 178:             }

 179:

 180:

 181:             else if (strh1 == "zero")

 182:             {

 183:                 strhh = strh3 + " " + strh2;

 184:

 185:             }

 186:             else if (strh2 == "")

 187:             {

 188:                 strhh = strh3 + " " + strh2 + strh1;

 189:             }

 190:

 191:             else if (str.Length == 2)

 192:             {

 193:                 strhh = strh3 + " " + strh2 + " " + strh1;

 194:             }

 195:             else

 196:             {

 197:                 strhh = strh3 + " " + strh2 + " " + strh1;

 198:

 199:             }

 200:             return strhh;

 201:

 202:

 203:         }

 204:         static void Main(string[] args)

 205:         {

 206:         CaseNotNumber:

 207:

 208:             try

 209:             {

 210:                 Console.Write("Enter a number to convert it to a Text, 0 to exit: ");

 211:                 uint Number = uint.Parse(Console.ReadLine());

 212:                 if (Number > 0)

 213:                 {

 214:

 215:

 216:                     string str = Number.ToString();

 217:

 218:                     //representing hundreds

 219:                     if (str.Length <= 3)

 220:                     {

 221:                         string result = ConvertNumber(Number);

 222:                         Console.WriteLine("");

 223:                         Console.WriteLine("Result");

 224:                         Console.WriteLine("------");

 225:                         Console.WriteLine("Input: {0}\n", Number);

 226:                         Console.WriteLine("Output: {0}", result);

 227:                         Console.ReadLine();

 228:

 229:                     }

 230:                     //representing thousands

 231:                     if (str.Length <= 6 && str.Length > 3)

 232:                     {

 233:                         //pattern goes here

 234:                         string result;

 235:                         string subResult1;

 236:                         string subResult2;

 237:                         string str1 = str.Substring(0, str.Length - 3);//thousands

 238:                         uint Num1 = uint.Parse(str1);

 239:                         string str2 = str.Substring(str.Length - 3, 3);//tens

 240:                         uint Num2 = uint.Parse(str2);

 241:                         subResult1 = ConvertNumber(Num1);

 242:                         subResult2 = ConvertNumber(Num2);

 243:                         result = subResult1 + " " + "thousand" + "," + " " + subResult2;

 244:                         Console.WriteLine("");

 245:                         Console.WriteLine("Result");

 246:                         Console.WriteLine("------");

 247:                         Console.WriteLine("Input: {0}\n", Number);

 248:                         Console.WriteLine("Output: {0}", result);

 249:                         Console.ReadLine();

 250:

 251:                     }

 252:

 253:                     //representing millions

 254:                     if (str.Length <= 9 && str.Length > 6)

 255:                     {

 256:                         string result;

 257:                         string subResult1;

 258:                         string subResult2;

 259:                         string subResult3;

 260:                         string str1 = str.Substring(0, str.Length - 6);//millions

 261:                         uint Num1 = uint.Parse(str1);

 262:                         string str2 = str.Substring(str.Length - 6, 3);//thousands

 263:                         uint Num2 = uint.Parse(str2);

 264:                         string str3 = str.Substring(str1.Length + 3, 3);//tens

 265:                         uint Num3 = uint.Parse(str3);

 266:                         subResult1 = ConvertNumber(Num1);

 267:                         subResult2 = ConvertNumber(Num2);

 268:                         subResult3 = ConvertNumber(Num3);

 269:                         if (Num2 == 0)

 270:                         {

 271:                             result = subResult1 + " " + "million" + "," + subResult2 + " " + subResult3;

 272:                         }

 273:                         else

 274:                         {

 275:                             result = subResult1 + " " + "million" + "," + " " + subResult2 + " " + "thousand" + "," + " " + subResult3;

 276:                         }

 277:                         Console.WriteLine("");

 278:                         Console.WriteLine("Result");

 279:                         Console.WriteLine("------");

 280:                         Console.WriteLine("Input: {0}\n", Number);

 281:                         Console.WriteLine("Output: {0}", result);

 282:                         Console.ReadLine();

 283:

 284:                     }

 285:

 286:                 }

 287:

 288:             }

 289:             catch (Exception ex)

 290:             {

 291:                 Console.WriteLine();

 292:                 Console.WriteLine("Error: only positive numeric values ( 0 - 999,999,999) are allowed, press enter to try again");

 293:                 Console.WriteLine();

 294:                 Console.ReadLine();

 295:                 goto CaseNotNumber;

 296:             }

 297:

 298:         }

 299:     }

 300: }

Enjoy it!

Operator keyword - Operator Overloading

Joseph Ghassan — Mon, 28 Jan 2008 20:28:31 GMT

While studying for my MCPD, I stumbled upon the operator keyword. Operator overloading permits user-defined operator implementations to be specified for operations where one or both of the operands are of a user-defined class or struct type,

For instance, we can create a Cycle class that cycles between defined minimum and maximum values.

We start off by defining our user-defined type Cycle wich will be of type struct ( a value type ):

Cycle struct definition :

        1: public struct Cycle

       2: {

       3:  

       4: }

Cycle struct Characteristics :

       1: public struct Cycle

       2: {

       3:      int _val;

       4:      int _max ;

       5:      int _min;

       6:  

       7: }

Code Explanation :

We declare 3 variables:

_max and _min as boundaries variables.
_val as the current value.

Cycle Class Constructor :

       1: public struct Cycle

       2: {

       3:        int _val;

       4:        int _max ;

       5:        int _min;

       6:  

       7:        public Cycle(int minimum, int maximum)

       8:        {

       9:            _val = minimum;

      10:            _max = maximum;

      11:            _min = minimum;

      12:        }

      13:  

      14: }

Code Explanation :

The Constructor job is the initialize class variables. I initialize the current value _val to the minimum value provided as a start point of Cycling.

Cycle class Properties ( Exposed Characteristics ) :

       1: struct Cycle

       2: {

       3:        int _val;

       4:        int _max ;

       5:        int _min;

       6:  

       7:        public Cycle(int minimum, int maximum)

       8:        {

       9:            _val = minimum;

           _max = maximum;

           _min = minimum;

       }

  

       public int Value

       {

           get { return _val; }

           set

           {

               if (value > _max)

               {

                   _val = _min;

               }

               else if (value < _min)

               {

                   _val = _max;

               }

               else

               {

                   _val = value;

               }

           }

       }

}

Code Explanation :

The Cycle class exposes one propertey called Value, this property will be used in our example to display the different values while the cycle class is in action.

To initiate a cyclic behavior we are forced to reset the cycle everytime the value hits the max value so it is either _min, _max, or value ( current value in the cyclic phase)

Our beloved Operators :

       1: public struct Cycle

       2: {

       3:        int _val;

       4:        int _max ;

       5:        int _min;

       6:  

       7:        public Cycle(int minimum, int maximum)

       8:        {

       9:            _val = minimum;

           _max = maximum;

           _min = minimum;

       }

  

       public int Value

       {

           get { return _val; }

           set

           {

               if (value > _max)

               {

                   _val = _min;

               }

               else if (value < _min)

               {

                   _val = _max;

               }

               else

               {

                   _val = value;

               }

           }

       }

  

       public override string ToString()

       {

           return Value.ToString();

       }

  

       public int ToInteger()

       {

           return Value;

       }

  

       public static Cycle operator +(Cycle arg1, int arg2)

       {

           arg1.Value += arg2;

           return arg1;

       }

  

       public static Cycle operator -(Cycle arg1, int arg2)

       {

           arg1.Value -= arg2;

           return arg1;

       }

}

Code Explanation :

We overload the + and the - operators using the syntax provided above:

Our template is as follows : arg1.Value += arg2; this line of code defines the way this overloaded operator should be used. it just increment the Value property of Cycle object with an incremental arg2 value. The current object is returned arg1.

same for the - operator.

Our Cycle class in action :

       1: protected void Page_Load(object sender, EventArgs e)

       2: {

       3:            Cycle degrees = new Cycle(0, 360);

       4:            for(int i = 0; i < 6; i++)

       5:            {

       6:                degrees += 60;

       7:                Response.Write(degrees.Value + ", ");

       8:            }

       9:            

      10: }

Code Explanation :

We first instantiate a cycle class called degrees that represents the rotation angle in a circle. The _min and _max are defined in the constructor as 0 and 360.

We create a loop, to stimulate the rotation behavior and the magic starts with this line of code : degrees += 60;

here's the workflow : degrees += 60 invokes arg1.Value += arg2 ( arg1 represents degrees, Value is 0, arg2 is 60 ) invokes the Values property that assign 60 to _val wich is the return value of Value.

The Second iteration Value is 60 , Third Iteration 120 and so on. When Value hits max it resets to 0 making the rotation cyclic.

Complete Code ( Code behind ):

       1: using System;

       2: using System.Collections;

       3: using System.Configuration;

       4: using System.Data;

       5: using System.Linq;

       6: using System.Web;

       7: using System.Web.Security;

       8: using System.Web.UI;

       9: using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

  

namespace MCTS___Foundation

{

    public partial class _Default : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            Cycle degrees = new Cycle(0, 360);

            for(int i = 0; i < 6; i++)

            {

                degrees += 60;

                Response.Write(degrees.Value + ", ");

            }

            

        }

    }

  

    public struct Cycle

    {

        int _val;

        int _max ;

        int _min;

  

        public Cycle(int minimum, int maximum)

        {

            _val = minimum;

            _max = maximum;

            _min = minimum;

        }

  

        public int Value

        {

            get { return _val; }

            set

            {

                if (value > _max)

                {

                    _val = _min;

                }

                else if (value < _min)

                {

                    _val = _max;

                }

                else

                {

                    _val = value;

                }

            }

        }

  

        public override string ToString()

        {

            return Value.ToString();

        }

  

        public int ToInteger()

        {

            return Value;

        }

  

        public static Cycle operator +(Cycle arg1, int arg2)

        {

            arg1.Value += arg2;

            return arg1;

        }

  

        public static Cycle operator -(Cycle arg1, int arg2)

        {

            arg1.Value -= arg2;

            return arg1;

        }

    }

}

Enjoy it!

In depth look at Ajax's XMLHttpRequest object - Part 1 ( Introduction)

Joseph Ghassan — Sun, 27 Jan 2008 11:15:53 GMT

The click-and-wait pattern has dominated for years the client/server communication but with the introduction of Ajax things have become different. The interaction of the user with an Ajax-enabled application becomes much more interactive and enjoyable. Gone the days when the user was forced to perform a full page postback to get/update data from/to the server. Now, with Partial Page rendering and asynchronous callbacks, Web Pages have become much more smarter, responsive and faster.

At the heart of Ajax is a JavaScript object called XMLHttpRequest. Simply put, this object allows you to send data to and receive data from to the server in an asynchronous fashion. But hold on a minute, are you saying asynchronous ?

Yes, actually Ajax adds an intermediate layer between the browser and the server, a layer that runs on your computer and request data only when it is needed ( through an Ajax Scheduler ) – Asynchronous Communication . This actually breaks the classical interaction with the Web when the browser request a page from the server and the server responds to this request and sends back a brand new HTML document to be parsed/rendered by the browser – Synchronous Communication. But isn’t Asynchronous communication much more complex and harder to handle? You are right, but with the introduction of many new Ajax frameworks ( like ASP.NET Ajax framework), this complexity is abstracted away from the developer. I didn’t get it, complexity alone doesn’t justify Ajax usefullness, I am not convinced…

OK, OK, here is what happens when a Synchronous Ajax request is made, I refer to it as SJAX request ( not funny!). With Synchronous request the Ajax engine in the browser is locked until the response is sent back to the server. It works well locally ( on Localhost) or on a LAN but connecting to a server that is under heavy load , user experience is sacrificed and the Web application performs badly ( the browser will hit 0 degrees Celsius in no time!). With Asynchronous requests the JavaScript engine is not blocked. Aha! Now I see, Ajax for life!.

The first step in creating an asynchronous request is by Instantiating the XMLHttpRequest Object. Here we go :

XMLHttpRequest Instantiation is Browser-Dependent :

        1: function FactoryXMLHttpRequest()

       2: {

       3:     if(window.XMLHttpRequest) //IE7, FireFox

       4:     {   5:         return new XMLHttpRequest();

       6:     }

       7:     else if(window.ActiveXObject)//IE6

       8:     {

       9:         var msxmls = null;

      10:                 

      11:         msxmls = new Array('Microsoft.XMLHTTP','Msxml2.XMLHTTP');

      12:                 

      13:         try

      14:         {

      15:             for(var i = 0; i < msxmls.length; i++)

      16:             {

      17:                 return new ActiveXObject(msxmls[i]);

      18:             }

      19:         }

      20:         catch(e)

      21:         {

      22:         }

      23:     }

      24:      

      25:     throw new Error("Could not instantiate XMLHttpRequest");

      26: }

Code Explanation :

If the browser's window object has an implementation of the XMLHttpRequest class, we instantiate it and return it as an object to send a request to the server.In IE7 the XMLHttpRequest is implemented as a native class but in IE6 it is represented as a " Microsoft.XMLHTTP " or "Msxml2.XMLHTTP " ActiveX object. If the code was not able to instantiate a new XMLHttpRequest I throw an exception... what? throwing an exception when people are trying to catch them, please justify! ok, don't get mad there is a good reason behind it. I actually had the choice to return a null object but for someone diagnostic your code and calling this function from a script file he is expecting an object not a null reference, so the best approach is to throw an exception rather than returning a null object which make the code breaks mysteriously.

Ok, you have the object, now what? Well every object presents capabilities and characteristics :

XMLHttpRequest class methods (Capabilities):

Method	Description
abort()	Stops a request that is being Processed.
getAllResponseHeaders()	Returns the complete set of HTTP headers from the HTTP request as a string.
open(method, URL, asyncFlag, username, password)	Opens and prepares an HTTP request identified by the HTTP method and URL. The variable asyncFlag can either be true or false, where true means to make an asynchronous request. The variables username and password are used to access a protected HTTP resource.
send(content)	Executes the HTTP request, where the variable content represents data that is posted if applicable.
setRequestHeader(label, value)	Assigns an HTTP header before the HTTP request is made.

XMLHttpRequest class Properties (Characteristics):

Property	Description
readyState	The XMLHttpRequest exposes an integer property named readyState with possible values of 0 , 1 , 2 , 3 , or 4 . The XMLHttpRequest goes through different states during its lifecycle, and each state is associated with one of these five possible values.
status	This property contains the HTTP status code of the server response.
statusText	This property contains the HTTP status text of the server response
responseText	This property contains the server response in text format.
responseXML	This property contains the server response in XML format (an XML Document to be exact). This property is set only when the Content-Type response header is set to the value text/xml.

XMLHttpRequest class Events (Characteristics):

Event	Description
onreadystatechange	You must assign a reference to a JavaScript function to this property. The XMLHttpRequest invokes this JavaScript function every time its state changes, which is every time its readyState property changes value. Used only for Asynchronous calls, when the asynchFlag in the open method is set to true.

O.K., enough theory, show me some action please!

Sending an Asynchronous call to the server :

       1: function GetIt(url) 

       2: {

       3:     if(xmlhttp) 

       4:     {

       5:         xmlhttp.open('GET', url, true);

       6:         xmlhttp.onreadystatechange = AsyncUpdateEvent;

       7:         xmlhttp.send(null);

       8:     }

       9: }

Code Explanation:

The first action you need is to open a connection to the server, therefor you use the open() method of the XmlHttpRequest Object. Before that you need to check if an XMLHttpRequest object is instantiated ( xmlhttp is actually a global variable of the JavaScript block defined as follows :

var xmlhttp = FactoryXMLHttpRequest();

The Open method takes 4 parameters, the first one is the HTTP verb ( Get or POST) the second… wait wait wait, did you say HTTP verb? What the hack is that?

Ok, HTTP stands for HyperText transfer protocol is the protocol used to communicate over the World Wide Web. It is a two way conversation between Browser and server.The Client sends an Http request to the server and server sends back the Http response object ( that contains the object type known as MIME type, length, status code and other informations).

Every HTTP message has a method, this method tells the server what to do. For a Post method we are sending client data to a gateway application for a Get we are sending named resource from the server to the client. The Get method is called a safe method seeing that it only retreive resources from the server, the Post method wich is not safe post back form data to the server for manipulation.

xmlHttp.open('Get', url, true);

this line of code opens an HTTP Get request with a specified resource ( URL) to the server asynchronously.

xmlhttp.onreadystatechange = AsyncUpdateEvent;

This line of code handles the onreadystatechange event of the XMLHttpRequest class by assigning a reference to a function ( we will cover this function later). The onreadystatechange fires every time the readystate property changes ( span from 0 to 4 ).

xmlhttp.send(null);

We send the request by invoking the send() method of the XMLHttpRequest object that takes null content.

CallBack function:

       1: function AsyncUpdateEvent() 

       2: {

       3:     switch(xmlhttp.readyState) 

       4:     {

       5:         case 0:

       6:         document.getElementById('status').innerText = "uninitialized";

       7:         break;

       8:         case 1:

       9:         document.getElementById('status').innerText = "loading";

      10:         break;

      11:         case 2:

      12:         document.getElementById('status').innerText = "loaded";

      13:         break;

      14:         case 3:

      15:         document.getElementById('status').innerText = "interactive";

      16:         break;

      17:         case 4:

      18:         document.getElementById('status').innerText = "complete";

      19:         document.getElementById('result').innerText = xmlhttp.responseText;

      20:         break;

      21:     }

      22: }

Code Explanation :

The readState property indicates the stages of the HTTP Request :

   0: The XMLHttpRequest instance is in an inconsistent state, and the result data should not be referencing.
   1: A request is in progress, and the result data should not be retrieved.
   2: The request has downloaded the result data and is preparing it for reference.
   3: The script can interact with the XMLHttpRequest instance even though the data is not completely loaded.
   4: The request and result data are completely downloaded and loaded as an object model.

Executing the asynchronous Ajax application results in a call being made, and the browser is not locked. You can click a button, open a new browser, and surf to another website. this is the goodness of Asynchronous callbacks.

Finally we retreive the response results and assign it to the innerText property of the result span tag. ( Label control )

What is not optimal with an Asynchronous callback is that you don't have an indicator that point that a request is being processed. So there should be some indicator that something is happening. Another problem is that some Browsers will cache the results of the XMlhttpRequest causing an unpredictable behavior.

Complete Code Listing :

Default.aspx :

       1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HelloWorld._Default" %>

       2:  

       3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       4:  

       5: <html xmlns="http://www.w3.org/1999/xhtml" >

       6: <head runat="server">

       7:     <title>Untitled Page</title>

       8:     <script type="text/javascript" language="javascript">

       9:         

        var xmlHttp = FactoryXMLHttpRequest();

        

        

        function FactoryXMLHttpRequest()

        {

            if(window.XMLHttpRequest)

            {

                return new XMLHttpRequest();

            }

            else if(window.ActiveXObject)

            {

                var msxmls = new Array('Microsoft.XMLHTTP','Msxml2.XMLHTTP');

                

                try

                {

                    for(var i = 0; i < msxmls.length; i++)

                    {

                        return new ActiveXObject(msxmls[i]);

                    }

                }

                catch(e)

                {

                }

            }

        }    

        

        function GetIt(url)

        {

            if(xmlHttp)

            {

                xmlHttp.open('Get',url,true);

                xmlHttp.onreadystatechange = GetData;

                xmlHttp.send(null);

                

            }

        }

        

        function GetData()

        {

            switch(xmlHttp.readyState) 

            {

                case 0:

                document.getElementById('status').innerText = "uninitialized";

                break;

                case 1:

                document.getElementById('status').innerText = "loading";

                break;

                case 2:

                document.getElementById('status').innerText = "loaded";

                break;

                case 3:

                document.getElementById('status').innerText = "interactive";

                break;

                case 4:

                document.getElementById('status').innerText = "complete";

                document.getElementById('result').innerText = xmlHttp.responseText;

                break;

            }

  

        }

    

    

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    

        <asp:Button OnClientClick="GetIt('AsynchronousPage.aspx'); return false;" 

            ID="Button1" runat="server" Text="Asynchronous Call" /><br />

        

        <asp:Label ID="status" runat="server" Text=""></asp:Label><br />

        <asp:Label ID="result" runat="server" Text=""></asp:Label>

        

    </div>

    </form>

</body>

</html>

Asynchronous.aspx Code behind :

       1: using System;

       2: using System.Collections;

       3: using System.Configuration;

       4: using System.Data;

       5: using System.Linq;

       6: using System.Web;

       7: using System.Web.Security;

       8: using System.Web.UI;

       9: using System.Web.UI.HtmlControls;

      10: using System.Web.UI.WebControls;

      11: using System.Web.UI.WebControls.WebParts;

      12: using System.Xml.Linq;

      13:  

      14: namespace HelloWorld

      15: {

      16:     public partial class AsynchronousPage : System.Web.UI.Page

      17:     {

      18:         protected void Page_Load(object sender, EventArgs e)

      19:         {

      20:             System.Threading.Thread.Sleep(10000);

      21:             Response.Write("Hello Ajax");

      22:             Response.Flush();

      23:             Response.End();

      24:         }

      25:     }

      26: }

The current thread on the server is set to sleep for 10 seconds just to see visually the different stages of the XMLHttpRequest object Request.

I hope you have enjoyed reading this tutorial as much as I did writing it.

Download Solution - XmlHttpRequest.zip

What a nice place to start Blogging !

Joseph Ghassan — Wed, 23 Jan 2008 20:18:00 GMT

I would like to thanks Joe S. and the ASP.NET team for giving us this opportunity to share our knowledge using asp.net weblogs. it is going to fun for sure!