XMLHTTP Request object creating for AJAX

xmlhttprequest between browser and server

The XMLHttpRequest object is a JavaScript API that allows us to make HTTP requests from a web browser, enabling us to communicate with a server and retrieve data without having to refresh the entire page.
It's commonly used for implementing Ajax (Asynchronous JavaScript and XML) functionality, where we can update parts of a web page without requiring a full page reload.

An agent

This XMLHttp object is an agent between our application at client side and our programming code at server end. It sends data and collects the return data from the server.

Browser support

Now we understood that creation of this XMLHttp request is an issue with the browser of the user ( or client ). So the user browser must able to create this XMLHttp object. Unfortunately the old browsers doesn't support this and can't create XMLHttp object. So we have to find out first this object is created or not. If the browser fails to create the object then we must give error message saying about the browser issue.

Even if the browser are capable of creating our XMLHttp request they differ in the way they create it. FireFox create the object in a different way than Internet Explorer ( IE ). So based on this we will develop the code and note that we can use this same set of code ( to create the XMLHttp object ) in all pages where we will be using Ajax.

We will try with first trying with a simple request like this

if (typeof XMLHttpRequest != "undefined")

The above line will return true for Firfox and Safari so we can create an object. For IE we will use ActiveXObject to create the object. Depending on the type of ActiveXObject support which depends on version of IE we will create the object. If in all fail in crating the object then we will return error message.

Now let us write the function to initialize the XMLHttp Request object

function developXMLHttp() { 
if (typeof XMLHttpRequest != "undefined") { 
return new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
var aVersions = [ "MSXML2.XMLHttp.5.0", 
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0", 
"MSXML2.XMLHttp","Microsoft.XMLHttp" 
]; 
for (var x = 0; x < aVersions.length; x++) { 
try { 
var p2XmlHttp = new ActiveXObject(aVersions[x]); 
return p2XmlHttp; 
} catch (oError) { 
//Do nothing 
} 
} 
} 
throw new Error("Error..XMLHttp object could be created."); 
}

To use this function we will create an object like this.

function my_form(){
var myxml=developXMLHttp();
document.write(typeof(myxml));
}
window.onload=my_form();

Here is the full code. Save this page test.html and open in browser.

<html>
<head>
<title>(Type a title for your page here)</title>
</head>
<body >

<script>
function developXMLHttp() { 
if (typeof XMLHttpRequest != "undefined") { 
return new XMLHttpRequest(); 
} else if (window.ActiveXObject) { 
var aVersions = [ "MSXML2.XMLHttp.5.0", 
"MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0", 
"MSXML2.XMLHttp","Microsoft.XMLHttp" 
]; 
for (var x = 0; x < aVersions.length; x++) { 
try { 
var p2XmlHttp = new ActiveXObject(aVersions[x]); 
return p2XmlHttp; 
} catch (oError) { 
//Do nothing 
} 
} 
} 
throw new Error("Error..XMLHttp object could be created."); 
}

function my_form(){
var myxml=developXMLHttp();
document.write(typeof(myxml)+' This is the type of the object');
}
window.onload=my_form();
</script>

</body>
</html>

GET method of Form submission using Ajax xmlhttp
Ajax Json XML

Subscribe to our YouTube Channel here

XMLHttp Request object for Ajax

An agent

Browser support

Subscribe