Step 1 – say "Please!"
or How to Make an HTTP Request
Ajax tutorial | PREV | NEXT

In order to make an HTTP request to the server using JavaScript, you need an instance of a class that provides you this functionality. Such a class was originally introduced in Internet Explorer as an ActiveX object, called XMLHTTP. Then Mozilla, Safari and other browsers followed, implementing an XMLHttpRequest class that supports the methods and properties of Microsoft's original ActiveX object.

As a result, in order to create a cross-browser instance (object) of the required class, you can do:

 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
 } else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
 }

(For illustration purposes, the above is a bit simplified version of the code to be used for creating an XMLHTTP instance. For a more real-life example, see step 3 of this article.)

Some versions of some Mozilla browsers won't work properly if the response from the server doesn't have an XML mime-type header. To satisfy this, you can use an extra method call to override the header sent by the server, just in case it's not text/xml.

 http_request = new XMLHttpRequest();
 http_request.overrideMimeType('text/xml');

The next thing is to decide what you want to do after you receive the server response to your request. At this stage you just need to tell the HTTP request object which JavaScript function will do the work of processing the response. This is done by setting the onreadystatechange property of the object to the name of the JavaScript function you plan to use, like this:

http_request.onreadystatechange = nameOfTheFunction;

Note that there are no brackets after the function name and no parameters passed. Also, instead of giving a function name, you can use the Javascript technique of defining functions on the fly and define the actions that will process the response right away, like this:

 http_request.onreadystatechange = function(){
    // do the thing
 };
Next, after you've declared what will happen as soon as you receive the response, you need to actually make the request. You need to call the open() and send() methods of the HTTP request class, like this:
 http_request.open('GET', 'http://www.example.org/some.file', true);
 http_request.send(null);

The parameter to the send() method can be any data you want to send to the server if POST-ing the request. The data should be in the form of a query string, like:

name=value&anothername=othervalue&so=on

Note that if you want to POST data, you have to change the MIME type of the request using the following line:

 http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Otherwise, the server will discard the POSTed data.


Erik Laine

Home | Ajax tutorials | JavaScript Editor JavaScript EditorGet Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.


©