Implementing AJAX – Client Communication to Server

Posted In Tutorials - By NitiN Kumar Jain On Tuesday, September 16th, 2008 With 0 Comments






Pin It


How many times do we wish to call the server from the client but we do not wish our page to post back? Yes, if you are a .Net web developer then you need it many times during the course of your software development.

How to do that is a very easy job and that is what this tutorial intends to explain.

The idea is that, the client sends a request to the server at some equal interval using the javascript and server returns some data based on the passed parameters and client displays it on the screen. Everything happens in the background and there are no page post-backs at all.

Let’s begin:

  • Create an aspx page (name assumption – server.aspx) within which you keep all your server side code (database fetching, data validation, data formulation etc)
  • In the Page_Load method itself you can put cases based on the querystring variable value and after executing your bit of code give back the required data to the client using the Response object of the page.
switch (Request["cmd"])
{
    case "getmemberlist":
      try
      {
           Response.Write("Members");
            foreach (Member mem in arrMember)
            {
		Response.Write("" + "" + mem.sName + "");
	    }
      }
     break;
}
  • As much as you write in the Response.write will be available to the client and in whatever format you do it will be available as a complete single string.
  • You can also redirect to any other page from here.
  • Create a javascript file or you can do it within any other page which requires communicating to the server.aspx server side scripting.
  • Create a javascript function (name assumption – GetMembersList()) which will fetch the members list from the server and will display the list on the screen.
  • Start a timer to call the function in every 3000 milliseconds using the setInterval javascript function.
setInterval("GetMembersList()",3000);
  • If you want server scripting not to execute at equal intervals then you can avoid setInterval and call the function GetMembersList() directly from any button click or wherever you need it.
  • In the GetMembersList() function, do the following
  • Create an object of Msxml2.XMLHTTP or Microsoft.XMLHTTP which is used for communicating to the server
  • XMLHttpRequest object is the same object as used by AJAX controls for the asynchronous calls to the server to fetch data. It provides client-side protocol support for communication with HTTP servers.
var objHTTP = new ActiveXObject('Msxml2.XMLHTTP');
or
var objHTTP = new ActiveXObject('Microsoft.XMLHTTP');
  • Create a querystring to be passed
var sQueryString = "cmd = getmemberlist ";
objHTTP.open("POST", "Server.aspx", false);
  • Set Request Header for the post and send the Querystring
objHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

objHTTP.send(sQueryString);
  • Receive the data from the server using the responseText property of the object; also check if there are any errors while communicating.
var sReply = objHTTP.responseText;
if (objHTTP.status != 200)
    {
      	  //failure
        sReply = "failure";
    }
  • Now you have retrieved the requested data. Display it on the screen wherever you like it to be.
div_memberslist.innerHTML = sReply;
  • You are also allowed to get the reply from the server in any format and play with it in your javascript.

That’s it. Your own AJAX is ready. Isn’t it simple?? Try it out you will enjoy using it every now and then on your pages now on.

Please leave your comments even if you don’t like it.