Step 3 – "All together now!"
A Simple Example
Ajax tutorial | PREV | NEXT

Let's put it all together and do a simple HTTP request. Our JavaScript will request an HTML document, test.html, which contains the text "I'm a test." and then we'll alert() the contents of the test.html file.

<script type="text/javascript" language="javascript">


    function makeRequest(url) {

        var http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                // See note below about this line
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}

        if (!http_request) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
        http_request.onreadystatechange = function() { alertContents(http_request); };'GET', url, true);


    function alertContents(http_request) {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
            } else {
                alert('There was a problem with the request.');

    style="cursor: pointer; text-decoration: underline"
        Make a request

In this example:

You can test the example here and you can see the test file here.

Note: The line http_request.overrideMimeType('text/xml'); above will cause Javascript Console errors in Firefox 1.5b as documented at if the page called by XMLHttpRequest is not valid XML (eg, if it is plain text).

If you get Syntax Error or Not Well Formed Error on that browser, and you're not trying to load an XML page from XMLHttpRequest, remove that line from your code.

Note 2: if you are sending a request to a piece of code that will return XML, rather than to a static XML file, you must set some response headers if your page is to work in Internet Explorer in addition to Mozilla. If you do not set header Content-Type: application/xml, IE will throw a Javascript error 'Object Expected' after the line where you try to access an XML element. If you do not set header Cache-Control: no-cache the browser will cache the response and never re-submit the request, making debugging 'challenging'.

Note 3: if the http_request variable is used globally, competing functions calling makeRequest() may overwrite each other, causing a race condition. Declaring the http_request variable local to the function and passing it to the alertContent() function prevents the race condition.

Note 4: To register the call back function onreadystatechange, you cannot have any argument:

http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (simultaneous request)
http_request.onreadystatechange = alertContents(http_request); //2 (does not work)
http_request.onreadystatechange = alertContents;  //3 (global variable)
Method 1 allows to have several requests done in simultaneously, method 2 will not work, method 3 is used if http_request is a global variable

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

1st JavaScript Editor.