Creating XMLHttpRequest Instance ~ Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples
Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples: Creating XMLHttpRequest Instance

Creating XMLHttpRequest Instance

XMLHttpRequest gives AJAX its true power: the ability to make asynchronous HTTP requests from the browser and pull down content in small chunks. XMLHttpRequest alllows your application to make both GET and POST requests without ever completely reloading the page.
Steps for creating AJAX class using Object Oriented Programming in JavaScript :

write a constructor function to create an instance of the class

provide a constructor function—the name of this function is the name of your class

add properties to the object that’s being constructed using the keyword this, followed by a period and the name of the property

add methods to the object in the same way we’d add properties, using JavaScript’s special function constructor syntax

Here’s the code that creates a simple class called HelloAjax:

function HelloAjax () {
this.message = 'Hello, Ajax!';
this.sayMessage = function() {
window.alert(this.message);
};
}

In this example, we create a class called HelloAjax with one property (message) and one method (sayMessage). To use this class, we simply call the constructor function, as shown below:

var ha = new HelloAjax ();
ha.sayMessage();
ha.message = 'Wow…Ajax';
ha.sayMessage();

Here, we create an instance of HelloAjax (called ha), then use this object to display two messages. The first time we call sayMessage, the default Hello, Ajax!” message is displayed. Then, after changing our object’s message property to “Wow…Ajax,” we call sayMessage and “Wow…Ajax” is displayed.

Let us examine Ajax class’s constructor function: File: ajax.js (excerpt)

function Ajax() {
this.req = null;
this.url = null;
this.method = 'GET';
this.async = true;
this.status = null;
this.statusText = '';
this.postData = null;
this.readyState = null;
this.responseText = null;
this.responseXML = null;
this.handleResp = null;
this.responseFormat = 'text', // 'text', 'xml', or 'object'
this.mimeType = null;
}

The above code defines the properties we’ll need in our Ajax class in order to work
with XMLHttpRequest objects.

Create an Instance

Creating a new instance of an XMLHttpRequest object, In IE 7, Firefox, Safari, and Opera, the syntax needed to create an object is as follows:

var xhr = new XMLHttpRequest();

In Internet Explorer,You need to create a new instance of an ActiveX object:

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
}

This is called object detection. Here’s the object detection to test for the existence of ActiveX:

if (window.ActiveXObject) {

var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

To save yourself from writing this every time you want to do some Ajax, you can wrap up the object detection in a reusable function:

function getHTTPObject() {

var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

The function, called getHTTPObject, begins by declaring a variable called xhr and assigning it a Boolean value of false. The plan is to change this value over the course of the function.An if...else statement takes care of the object detection. First, test for the existence of the native XMLHttpRequest. If such an object exists, change the value of xhr to a new instance of the object. If not, test for the existence of ActiveXObject. If that exists, assign a new instance of Microsoft’s
XMLHTTP ActiveX object to xhr. Finally, return the value of xhr at the end of the function. At this stage, there are three possible values that the variable could have:

■ An instance of the native XMLHttpRequest object.

■ An instance of an ActiveX object.
■ A value of false.

You can use the function like this:

var request = getHTTPObject();

This assigns the result of the getHTTPObject function to the variable request. You can now treat this variable as an instance of a cross-browser XMLHttpRequest object. It is still possible that the getHTTPObject function has returned a value of false, meaning that the browser executing the script does not have Ajax capabilities. If you explicitly check for this, you can make sure you won’t be asking older browsers to execute code beyond their ability:

var request = getHTTPObject();
if (request) {
// do some Ajax
}

We can use the XMLHttpRequest in two ways: synchronously or asynchronously.

Synchronous Usage

You can use the XMLHttpRequest object synchronously with the following pattern:

1. Create the object.
2. Create a request.
3. Send the request.
4. Hold processing until you get a response.

This corresponds to what you normally do when you send a request to the server and wait for a
response. The real power, though, comes from using it asynchronously.

Asynchronous Usage

When you use the object asynchronously, you must call the object using the onreadystatechange
event. When this event is triggered, you must check the contents of the readystate property before your application can act. This means you will conform to the following pattern:

1. Create the object.
2. Set the readystatechange event to trigger a specific function.
3. Check the readyState property to see if the data is ready. If it isn’t, check again after an interval.

If it is, then carry on to the next step.

4. Open the Request.
5. Send the Request.
6. Continue processing, only interrupting it when you get a response.

The whole operation of the readystatechange event is performed behind the scenes and enables you to use the XMLHttpRequest object asynchronously.


Related Posts by Categories

8 comments:

Harish said...

What must be done to use an AJAX code be used across different browsers?

Sam said...

Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.

code:

<html> <body>

<script type="text/javascript">
function ajaxFunction() {
var xmlHttp; try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>

Tailor said...

How asynchronous processing is handled using Ajax?

Sam said...

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

Lavanya said...

How do I abort the current XMLHttpRequest?

Srikanth said...

Just call the abort() method on the request.

Lavanya said...

How do I get the XMLHttpRequest object?

Srikanth said...

Depending upon the browser... if (window.ActiveXObject) { // Internet Explorer http_request = new ActiveXObject("Microsoft.XMLHTTP"); } else if...

Useful Links on Adobe Flex

Your Ad Here

Latest Books on Adobe Flex