Infinite Loop

Let’s talk pure ajax

      Hello guys, today I’m going to talk about ajax but lets 1st explain this strange expression in this article title “pure ajax”, actually it’s an expression that I’ve came up with after very different incidents that convinced me to use this expression to differentiate between ajax and what people call ajax as a misconception. So the 1st question that would pop up what is ajax in the 1st place? Ofcourse lots of us I assume know that the acronym ajax stands for asynchronous java script and XML but lets explain this a little bit more further, XML here means that we would transmit data in the XML format but what about the asynchronous java script? Is it a new type of java script that came out after web 2.0 hype? Yes? Actually the answer is no, I’ve passed by several individuals that think that ajax came “after” the web 2.0 so called hype and they didn’t believe me when I told them no ajax programming techniques was already there covered with dust far before even the expression web 2.0 was invented and actually the expression asynchronous java script is all about an object called XMLHttpRequest that supports that a java script can send a GET or a POST request to a web server through the http protocol asynchronously or synchronously. So to use ajax then you have to transfer data using XML format using the http protocol with asynchronous calls that is very simple and clear and straight forward as it could be BUT in the last year (and half?) several ajax frameworks have been developed including the asp.net ajax framework to ease the use of ajax in web applications rather you are using php or asp.net (ofcourse there was non famous frameworks for other programming languages) the frameworks actually had it’s advantages and disadvantages and ofcourse there main advantage would be the ease and productivity while making a web application that uses ajax but these frameworks have put up a very severe misconceptions that sometimes people would think that ajax is not java script and sometimes other people would think that every control in these ajax framework that uses java script is ajax for example a timer control is not ajax because it doesn’t make server side request at all. But beyond all of this there was the biggest misconception at all that several people thought that just by adding some ajax framework controls to there asp.net page would somehow magically speed up the page load time ignoring the basic mechanisms of ajax working. So let’s state this clear before we commit any other move

“ajax is java script that is using asynchronous server side requests to send or receive data in the form of XML format”

Now after we stated that we will walk through how to make your 1^st ajax hello world script. But before I start I would like to mention that after discussing with lots of people whom have tried to convince me that how hard and useless to learn how to write pure ajax code without the use of ajax frameworks I want to draw your attention to this that when you use any ajax framework every time you will load your page you will load it with several js files that have the ajax framework libraries that you are using and these libraries are supposed to do everything you need and you don’t need and they don’t load specifically according to your needs but they just load and most of the time these libraries is at least is in the size of you web page multiplied by 5 times thus once you use these frameworks you have lost the most important advantage that is ajax is all about which is fast page loads more to mention that by learning to write pure ajax you will be able to customize your web pages with a more clear view of what is happening every time your page load more on that after the following walk through we will learn that ajax is no hard to learn and is no miraculous magic

So 1^st thing to start with is to make our xml web service that our ajax code will communicate with, you can do this easily by opening your visual studio and choose to create a new xml web project (and de-comment the the hello world web method if you are using visual studio 2003) so now you have a web method to start with then build and deploy it to your IIS (I don’t recommend using the development web server that comes with visual studio 2005 for doing this)

So now we have our xml web service all what is missing is to call it using our ajax code. We have two options:

1-     to call the xml web service using SOAP

2-     to call the xml web service using a simple GET request

I find the 2^nd option more convenient for a simple hello world ajax script as for the 1^st option we have to implement the SOAP protocol which is quite a hard task to do

So what is the 1^st thing to start our hello world ajax script with? Yes it’s the XMLHttpRequest object but for sorry as you all know that life is not fair and for sorry the XMLHttpRequest does not have the same implementation across most of the browsers so that why we are going to use this script as-is every time we want to create our XMLHttpRequest object

function GetXmlHttpObject()

{

  var xmlHttp=null;

  try

    {

    // Firefox, Opera 8.0+, Safari

    xmlHttp=new XMLHttpRequest();

    }

  catch (e)

    {

    // Internet Explorer

    try

      {

      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

      }

    catch (e)

      {

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

      }

    }

  return xmlHttp;

}

this code simply tries to create the XMLHttpRequest object for every well known browser and every time it fails it tries another browsers tell it creates the XMLHttpRequest or returns null if it totally fails, actually the most different implementation is Microsoft Explorer browsers as they use ActiveX to create the XMLHttpRequest which is apparently is a Microsoft technology that can’t be used by other browsers that doesn’t belong to Microsoft.

So now after we have the function that will create the XMLHttpRequest for us it’s time to put it to some good use

//here we create our XMLHtppRequest object

xmlHttp=GetXmlHttpObject()

//then we test if it's equal to null or not just in case

if (xmlHttp==null)

  {

  alert ("Your browser does not support AJAX!");

  return;

  }

//now we will set our request URL to our hello worl xml web service

var url="http://localhost/hello/service.asmx/HelloWorld";

xmlHttp.onreadystatechange=stateChanged;

//then we call the XML web service with our GET request

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

By executing t hose few lines of java script you have just made your first ajax call, but is that it? What about the return of our hello world web method?

A good question, do you remember that line

xmlHttp.onreadystatechange=stateChanged;

this line tells our XMLHttpRequest object that when the http connection state change it should call the function named stateChanged as a call back function that will process the response that came from the server, so how will we process that response?

In our case the response will look like something like this

<?xml version="1.0" encoding="utf-8"?>

<string xmlns="http://tempuri.org/">Hello World</string>

So we have a single tag named string that contains our response so our stateChanged call back function will look like this

function stateChanged()

{

//when the ready state change to 4 this means that the server have responded with 200 success

//message with the server response

if (xmlHttp.readyState==4)

{

//so when the server responds back we will extract the output from our xml response like this

alert(xmlHttp.responseXML.getElementsByTagName('string')[0].childNodes[0].nodeValue);

}

}

Note: if you are using .net framework 2.0 I guess you will find the get request is disabled by default for xml web services you can use this configuration to enable GET requests and the POST requests too

<configuration>

    <system.web>

    <webServices>

        <protocols>

            <add name="HttpGet"/>

            <add name="HttpPost"/>

        </protocols>

    </webServices>

    </system.web>

</configuration>

Now you have just made your 1^st hello world ajax script, simple and straight forward isn’t? Welcome to the ajax world ;)