XMLHttpRequest Object in ASP.Net AJAX

The XMLHttpRequest object uses JavaScript to make requests to the server and process the response, thereby minimizing the postback delays. It can be called as an API that can be used by JavaScript to transfer XML and other formats of data between the server and client using HTTP. Microsoft invented this object; it was initially designed to load XML documents from JavaScript. The name XMLHttpRequest might be misleading because of the term XML, but, in fact, you can transfer the data in XML or other textbased formats. These formats can be plain text, HTML, or JSON. JSON is an acronym for JavaScript Object Notation. The XMLHttpRequest object plays an important role in the development of Ajax-style applications to implement responsive and dynamic web applications.

Creating the XMLHttpRequest Object

You can create the object for ActiveX by passing the name of the object to its constructor:

var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

The preceding syntax works for IE browsers; however, for Mozilla and Safari browsers, you can just make a call to the constructor of the XMLHttpRequest class without any arguments:

var xmlHttp = new XmlHttpRequest();

For Mozilla, Safari, and Opera browsers, this object is a native JavaScript object, as compared to IE 5.0 and 6.0 versions, where this comes as an ActiveXObject.Ironically, IE 7.0 has also made the XMLHttpRequest object a native JavaScript object. Because this object has different implementations for different browsers, and because this object is used in every web page for performing request and response, we can encapsulate all this into a single JavaScript file and expose a method called getXmlHttpRequestObject().

Let’s put this method and the variable xmlHttp in a JavaScript file called xmlhttp.js and include this JavaScript file in every web page. The later hours that use the XMLHttpRequest object will use this JavaScript file. The variable xmlHttp now holds the instance of the XMLHttpRequest object.

The following is the code snippet in the xmlhttp.js JavaScript file:

var xmlHttp = false;
function getXmlHttpRequestObject() {
// check for native XMLHttpRequest object
if(window.XMLHttpRequest && !(window.ActiveXObject)) {
try {
xmlHttp = new XMLHttpRequest();
}
catch(e) {
xmlHttp = false;
}
}
// check for IE/Windows ActiveX version
else if(window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e) {
try {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e) {
xmlHttp = false;
}
}
}
}

The getXmlHttpRequestObject() method encapsulates the functionality of instantiating the XMLHttpRequest object for different browsers. To perform any request using this object, we simply check the status of the variable xmlHttp. If it validates to false, then the object has not been instantiated—or else you get an instance of the XMLHttpRequest in this variable for use. The function getXmlHttpRequest() first checks for the native XMLHttpRequest object. Refer to the following code snippet:

if(window.XMLHttpRequest && !(window.ActiveXObject))

If window.XMLHttpRequest validates to true and window.ActiveXObject validates to false, then the native object instance is created and set to the variable xmlHttp.

This is executed for the Mozilla, Safari, Opera, and IE 7.0 browsers. The “else if” block checks for the existence of ActiveXObject. Refer to the following code snippet:

try {
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e) {
try {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e) {
xmlHttp = false;
}

If the browser type is IE, an instance of type ActiveXObject is created and is set to the variable xmlHttp.