Creating the XMLHTTP request object - AJAX

You cannot make use of the XMLHTTPRequest until you have created in instance of it. Creating an instance of an object in JavaScript is usually just a matter of making a call to a method known as the object’s constructor. In the case of XMLHTTPRequest, however, you must change this routine a little to cater for the peculiarities of different browsers, as you see in the following section.

Different Rules for Different Browsers
Microsoft first introduced the XMLHTTPRequest object, implementing it in Internet Explorer 5 as an ActiveX object.

Most other browser developers have now included into their products an equivalent object, but implemented as a native object in the browser’s JavaScript interpreter.

Because you don’t know in advance which browser, version, or operating system your users will have, your code must adapt its behavior on the-fly to ensure that the instance of the object will be created successfully.

For the majority of browsers that support XMLHTTPRequest as a native object (Mozilla, Opera, and the rest), creating an instance of this object is straightforward.The following line creates an MLHTTPRequest object called request:

Here we have declared a variable request and assigned to it the value returned from the statement new XMLHTTPRequest(), which is invoke ing the constructor method for the XMLHTTPRequest object. To achieve the equivalent result in Microsoft Internet Explorer, you need to create an ActiveX object. Here’s an example:

Once again, this assigns the name request to the new object.To complicate matters a little more, some versions of Internet Explorer have a different version of MSXML, the Microsoft XML parser, installed; in those cases you need to use the following instruction:

A Solution for All Browsers
You need, therefore, to create a script that will correctly create an instance of a XMLHTTPRequest object regardless of which browser you are using (provided, of course, that the browser supports XMLHTTPRequest).

A good solution to this problem is to have your script try in turn each method of creating an instance of the object, until one such method succeeds. Have a look at Listing, in which such a strategy is used.

Using Object Detection for a Cross-Browser Solution

Listing uses the JavaScript statements try and catch. The try statement allows us to attempt to run a piece of code. If the code runs without errors, all is well; however, should an error occur we can use the catch statement to intervene before an error message is sent to the user and determine what the program should then do about the error.

An alternative, and equally valid, technique would be to detect which type of browser is in use by testing which objects are defined in the browser.Listing shows this technique.

Using Browser Detection for a Cross-Browser Solution

In this example we’ve used the test

to determine whether XMLHTTPRequest is a native object of the browser in use; if so, we use the constructor method

to createan instance of the XMLHTTPRequest object; otherwise, we try creating a suitable ActiveX object as in the first example. Whatever method you use to create an instance of the XMLHTTPRequest object, you should be able to call this function like this:

Methods and Properties
Now that we have created an instance of the XMLHTTPRequest object, let’s look at some of the object’s properties and methods, listed in Table

XMLHTTPRequest Objects and Methods

XMLHTTPRequest Objects and Methods

XMLHTTPRequest Objects and Methods

For now, let’s examine just a few of these methods.

The open() Method
The open() method prepares the XMLHTTPRequest object to communicate with the server.You need to supply at least the two mandatory arguments to this method:
Creating the XMLHTTPRequest Object

  • First, specify which HTTP method you intend to use, usually GET or POST.
  • Next, the destination URL of the request is included as the second argument. If making a GET request, this URL needs to be suitably encoded with any parameters and their values as part of the URL.

For security reasons, the XMLHTTPRequest object is allowed to communicate only with URLs within its own domain. An attempt to connect to a remote domain results in a “permission denied” error message.

Optionally you may include a third argument to the send request, a Boolean value to declare whether the request is being sent in asynchronous mode. If set to false, the request will not be sent in asynchronous mode, and the page will be effectively locked until the request is completed. The default value of true will be assumed if the parameter is omitted, and requests will then be sent asynchronously.

The send() Method
Having prepared the XMLHTTPRequest using the open() method, youcan send the request using the send() method. One argument is accepted by the send() function.

If your request is a GET request, the request information will be encoded into the destination URL, and you can then simply invoke the send() method using the argument null:

However, if you are making a POST request, the content of the request (suitably encoded) will be passed as the argument.

In this case we use the setRequestHeader method to indicate what type of content we are including.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

AJAX Topics