2 AJAX requests

HTML

<h2>Request monitor</h2>

<table style="width:100%">
    <tbody id="rm">
        <tr>
            <td style="width:200px;">Request 1</td>
            <td id='1o'></td>
            <td id='1s'></td>
            <td id='1r'></td>
        </tr>
        <tr>
            <td>Request 2</td>
            <td id='2o'></td>
            <td id='2s'></td>
            <td id='2r'></td>
        </tr>
        <tr>
            <td>Request 3</td>
            <td id='3o'></td>
            <td id='3s'></td>
            <td id='3r'></td>
        </tr>
        <tr>
            <td>Request 4</td>
            <td id='4o'></td>
            <td id='4s'></td>
            <td id='4r'></td>
        </tr>
        <tr>
            <td>Request 5</td>
            <td id='5o'></td>
            <td id='5s'></td>
            <td id='5r'></td>
        </tr>
        <tr>
            <td>Request 6</td>
            <td id='6o'></td>
            <td id='6s'></td>
            <td id='6r'></td>
        </tr>
        <tr>
            <td>Request 7</td>
            <td id='7o'></td>
            <td id='7s'></td>
            <td id='7r'></td>
        </tr>
        <tr>
            <td>Request 8</td>
            <td id='8o'></td>
            <td id='8s'></td>
            <td id='8r'></td>
        </tr>
        <tr>
            <td>Request 9</td>
            <td id='9o'></td>
            <td id='9s'></td>
            <td id='9r'></td>
        </tr>
        <tr>
            <td>Request 10</td>
            <td id='10o'></td>
            <td id='10s'></td>
            <td id='10r'></td>
        </tr>
    </tbody>
</table>

CSS

/*
You have delayed requests now so you can see the responses. On the request monitor, you see the 10 AJAX requests. You will see...

 - an OPENED text next to a request if it's opened with .open()
 - a SENT text next to a request if it's sent to the server with .send()
 - a RESPONSE:SOMETHING text next to a request if it's finished successfully

THE TRICK: you start the next request from the onreadystatechange event listener.


*/
 td {
    border-top:1px solid #eeeeee;
    width:100px;
}

JavaScript

// ================================================
// =========   CONFIG URLS TO REQUEST   ===========
// ================================================

requestUrls = new Array();
requestUrls.push("/echo/js/?js=apple&delay=1");
requestUrls.push("/echo/js/?js=orange&delay=2");
requestUrls.push("/echo/js/?js=pear&delay=1");
requestUrls.push("/echo/js/?js=banana&delay=2");
requestUrls.push("/echo/js/?js=peach&delay=1");
requestUrls.push("/echo/js/?js=potato&delay=1");
requestUrls.push("/echo/js/?js=tomato&delay=1");
requestUrls.push("/echo/js/?js=carrot&delay=2");
requestUrls.push("/echo/js/?js=onion&delay=3");
requestUrls.push("/echo/js/?js=cucumber&delay=1");

current = 0;

// Create a request function

function AJAXget(url) {

    R = new XMLHttpRequest(); //Create the object

    R.open("GET", requestUrls[current], true);
    //Configurate it to the URL

    markAsOpened() //Update GUI

    R.onreadystatechange = function () {
        //Create the onreadystate function
        
        if (R.readyState == 4 && R.status == 200) {
            //This part runs when the request is finished successfully

            markAsFinished(R.responseText); //Update GUI

            ++current; //Go to the next URL
            
            if (current < requestUrls.length) //If there is a next URL
                AJAXget(requestUrls[current]); //Then request it
        }
    }

    R.send(); //Now send the request

    markAsSent(); //Update GUI
}

AJAXget(requestUrls[current]);


// GUI functions

function markAsOpened() {
    document.getElementById(current + 1 + "o").innerHTML = "<span style='color:orange;'>Opened</span>";
}

function markAsFinished(text) {
    document.getElementById(current + 1 + "r").innerHTML = "<span style='color:green;'>Response: " + text + "</span>";
}

function markAsSent() {
    document.getElementById(current + 1 + "s").innerHTML = "<span style='color:red;'>Sent</span>";
}