AJAX is a disruptive technology that's changed the way Web apps are developed and used. It allows for interactive pages and sits on the cutting edge of current Web trends.

Although the term AJAX is relatively new, the technologies behind it are not. For many years the ability to change the content of a Web page after it had been sent to the browser had existed - using javascript to change an iframe's src attribute being one technique.

It was the coming together of the XMLHttpRequest object being implemented in the majority of browsers, and the unveiling of GMail and Google Maps that inspired developers to rethink how they build Web pages.

XMLHttpRequest Object

The XMLHttpRequest object is what makes AJAX possible, it makes the asynchronous requests and determines how to handle the results. To create the object in most browsers we use the following code:

     var xmlhttp = false;
     try {
       xmlhttp = new XMLHttpRequest();
     } catch (e) {
       alert("cannot create object");
     }

Unfortunately I said "most browsers", which of course means that it doesn't work in IE, so we need a special technique to handle Microsoft's browsers. Just to keep things interesting though, there are two cases that we have to handle depending on the version of the MSXML parser

     var xmlhttp = false;
     try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (othermicrosoft) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (failed) {
          xmlhttp = false;
     }

So when combining the two code snippets above, we end up with a piece of code that will create a XMLHttpRequest Object for all major browsers.

    var xmlhttp = false;
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (trymicrosoft) {
      try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (othermicrosoft) {
        try {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (failed) {
          xmlhttp = false;
        }
      }
    }
1234 Next >

Do you need help with AJAX? Gain advice from Builder AU forums

Comments

1

Anonymous code - 12/07/06

I don't think anyone really uses

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

anymore - that's so old-school.

Get with the times dude.

» Report offensive content

2

Shawn - 06/09/06

'old school'? old and works is better than new and shaky. Just because its old doesnt mean you cant or shouldnt do it. If it works for the situation then by all means you SHOULD use it. The biggest problem in the code community is that people think they have to have new tricky ways of doing things. Even XHTML and DHTML are sometimes better choices over top of CSS and other options - depending on what you are doing.

» Report offensive content

3

Ari - 15/09/06

Agree with Shawn: clear, functional and importantly, relevant code is always preferred to the latest and greatest...

» Report offensive content

4

d - 09/12/06

dd

dd

» Report offensive content

5

shailender - 10/01/07

I too agree with Shawn,

.Net 2.0 gives easy ways of developing AJAX enabled websites.

Differnt AJAX Toolkits are available, Better use that to increase effective coding with less effort and time.

» Report offensive content

6

Zenlogic.com.au - 02/03/07

Good intro to the mechanics of AJAX, but there are so many frameworks and toolkits around that wrap the request object and provide error handling and the like, it would be daft to roll-your-own. However it is always good to understand the inner workings, which are quite simple ultimately.

Re "When to use AJAX" it does appear AJAX is here to stay, but its use should be an architectural decision as much as an aesthetic one. Choosing what to AJAX-ify, how to design the services layer, and which toolkits to use are crucial issues and must be considered early on. AJAX also adds a whole extra dimension to testing, security, performance etc that are easy to overlook.

7BECFD

» Report offensive content

7

Nazi - 21/06/07

How can i get data on readystate = 3? i want to get continous http data from server but unable t get incompete response.can anybody help me to do so

» Report offensive content

8

arjunsdk - 08/08/07

hey how do you take information back from servlet?

script recognizes req.status==200.

How to read the servlet?

pls reply to c.achuth@gmail.com

pls!!!!!!!!!!!!!!!!!

The below doesnt recieve and write .

function showtag()

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

  {

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

  return;

  }

xmlHttp.onreadystatechange=stateChanged;

var url="http://localhost:8084/usebean/proc2"



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



xmlHttp.send(null);

alert("job over");

}

function stateChanged() 

{ 

if (xmlHttp.readyState==4)  

{



var response = xmlHttp.responseXML;

var res=xmlHttp.responseText;



var message = response.getElementsByTagName("message")[0];

alert("45");

eval(xmlHttp.responseXML);

alert("44");

document.myForm.time.value = 55;



alert("");

document.getElementById("message").innerHTML;



setMessage(message.childNodes[0].nodeValue);



}

else if (xmlHttp.readyState==3)

{

alert("3");

}

else

{



}



return;

}

_______________________________________________________

----------------------------------------------------------------------------------

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;

}

» Report offensive content

9

kamal_barna22 - 04/11/08

ajax through coding with object XMLHttpRequest and ajax update panel
which is more helpful in asp.net 2.0

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

Latest comments

9

kamal_barna22 - 11/04/08

ajax through coding with object XMLHttpRequest and ajax update panel which is more helpful in asp.net 2.0 ... more

8

arjunsdk - 08/08/07

hey how do you take information back from servlet? script recognizes req.status==200. How to read the servlet? pls reply to c.achuth@gmail.com pls!!!!!!!!!!!!!!!!! The below doesnt recieve ... more

7

Nazi - 21/06/07

How can i get data on readystate = 3? i want to get continous http data from server but unable t ... more

Log in


Sign up | Forgot your password?

Blogs

RSS feed

  • Staff Aussies to pay more for Win 7

    If you are looking to make some money in these troubled times, perhaps importing copies of Windows 7 could be for you. Read more »

    -- posted by Staff

  • Staff Firefox: Greens want it, 3.5rc2 not up to par

    This week's roundup looks at the situation surrounding a campaign to change Outlook HTML renderer, a Greens MP wants to install Firefox but is restricted and all the photos from the iPhone 3GS launch. Read more »

    -- posted by Staff

  • Chris Duckett Microsoft misses the Outlook point

    Ask designers which mail program is the bane of their existence, and you'll find that Outlook tops the list. The reason why the most popular email reader is also the most painful is simple: it uses Word to render HTML emails. Read more »

    -- posted by Chris Duckett

What's on?