Creating an XMLHttpRequest Object

The Mozilla method is the most straightforward of the two. It uses a simple XMLHttpRequest() constructor to create the object.
Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest-moz.html

<html>
<head>
<title>XMLHttpRequest in Mozilla</title>
<script type="text/javascript">
function Start()
{
try
{
xmlhttp = new XMLHttpRequest();
document.getElementById("Content").innerHTML="<h1>Using XMLHttpRequest Object</h1>";
}
catch (e)
{
document.getElementById("Content").innerHTML="<h1>XMLHttp cannot be created!</h1>";
}
}
</script>
</head>
<body>
<a href="javascript:Start()">Start</a>
<div id="Content"></div>
</body>
</html>
Code Explanation
This code attempts to create an XMLHttpRequest object using the XMLHttpRequest() constructor. If it succeeds, it writes out "Using XMLHttpRequest Object" to the body of the page. If it fails, it writes out "XMLHttp cannot be created!"

Internet Explorer Method

Microsoft Internet Explorer uses an ActiveX control to implement an XMLHttpRequest object. New and improved versions of this control have been released over time, so our code should check for the latest version available on the user's machine and use that one.
Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest-ie.html

<html>
<head>
<title>XMLHttpRequest in Internet Explorer</title>
<script type="text/javascript">
function Start()
{
var ieXmlHttpVersions = new Array();
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";

var i;
for (i=0; i < ieXmlHttpVersions.length; i++)
{
try
{
var xmlhttp = new ActiveXObject(ieXmlHttpVersions[i]);
document.getElementById("Content").innerHTML="<h1>Using " + ieXmlHttpVersions[i] + "</h1>";
break;
}
catch (exc)
{
alert(ieXmlHttpVersions[i] + " not supported.");
}
}

if (typeof xmlhttp == "undefined")
document.getElementById("Content").innerHTML="<h1>XMLHttp cannot be created!</h1>";
}
</script>
</head>
<body>
<a href="javascript:Start()">Start</a>
<div id="Content"></div>
</body>
</html>
Code Explanation
This code creates an array containing the names of all the different versions of Microsoft's XMLHttp ActiveX control, starting with the most recent. It then loops through the array and uses the first available control to produse an xmlhttp object. As soon as it finds one, it writes out the version being used to the body of the page. If none of the versions is supported, it writes out "XMLHttp cannot be created!"

Cross-browser XMLHttpRequest Creation

The following code sample combines the previous two in one function that handles XMLHttpRequest creation in both browsers. It first tries the Mozilla method as it's much more likely that Internet Explorer will eventually adopt this method (see footnote) than it is that Mozilla and other browsers will support ActiveX controls.
Code Sample: AjaxBasics/Demos/CreateXMLHttpRequest.html

---- Code Omitted ----
<script type="text/javascript">
function Start()
{
try
{
var xmlhttp = new XMLHttpRequest();
document.getElementById("Content").innerHTML="<h1>Using XMLHttpRequest Object</h1>";
}
catch(err1)
{
var ieXmlHttpVersions = new Array();
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.7.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.6.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.5.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.4.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp.3.0";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "MSXML2.XMLHttp";
ieXmlHttpVersions[ieXmlHttpVersions.length] = "Microsoft.XMLHttp";

var i;
for (i=0; i < ieXmlHttpVersions.length; i++)
{
try
{
var xmlhttp = new ActiveXObject(ieXmlHttpVersions[i]);
document.getElementById("Content").innerHTML="<h1>Using " + ieXmlHttpVersions[i] + "</h1>";
break;
}
catch (err2)
{
alert(ieXmlHttpVersions[i] + " not supported.");
}
}
}

if (typeof xmlhttp == "undefined")
document.getElementById("Content").innerHTML="<h1>XMLHttp cannot be created!</h1>";
}
</script>
---- Code Omitted ----