AJAX HTTP Requests

Back | Tutorial Home | Next

Traditionally in web applications a HTML page has a form tag or a link and the request is sent to server by POST or GET and whole new page is received by the browser. However in the AJAX the request can be sent through a JavaScript object called XMLHttpRequest object. This object has the capability of requesting the server in the background while the user is able to view the same page.

AJAX and Browsers

Though all the browsers use XMLHttpRequest object for creating an AJAX request object. Different browsers create it in a different manner. Earliest version of XMLHttpRequest was first created by Microsoft for Browser Web Mail access to Exchange server. Then it was implemented as an Active X Object and not as a native Java Script object. However IE 7.0 supports this object. Given below are the various ways of creating this object for various browsers.

For Firefox, Opera 8.0+, Safari & Internet Explorer 7

ajaxRequestObject =new XMLHttpRequest();

Some versions of Safari and Mozilla based browsers do not process the request properly if the response in not in proper XML. Following mime overriding will do the trick. IE 7 does not support function overrideMimeType(). That’s the reason an if statement before calling this function.

if (ajaxRequestObject.overrideMimeType) {
   ajaxRequestObject.overrideMimeType('text/xml');
}

For IE 6.0 and IE 5.0

ajaxRequestObject=new ActiveXObject("Msxml2.XMLHTTP");
ajaxRequestObject=new ActiveXObject("Microsoft.XMLHTTP");

Though there are lots of methods to create XMLHttpRequest. The most popular approach is the try-catch approach listed below.

<script>
var ajaxRequestObject;

function CreateXmlHttpObject()
{
var ajaxRequestObject=null;
try
  {
  // Create native object 
  // For Firefox, Opera 8.0+, Safari & 
  // Internet Explorer 7  ajaxRequestObject =new XMLHttpRequest();
            // IE7 does not support overrideMimeType()    
            if (ajaxRequestObject.overrideMimeType) {
                ajaxRequestObject.overrideMimeType('text/xml');
                
            }
  }
catch (e)
  {
  // Create Active X object
  // For Internet Explorer 5.0 & 6.0
  try
    {
    ajaxRequestObject=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    ajaxRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return ajaxRequestObject;
}</script>

Back | Tutorial Home | Next