Understand Ajax XMLHttpRequest in details

Question

I am new to Ajax, and to make things worse, also a Javascript noob, and I have posted the bellow code of a chat script, to retrieve text from db, in real time, and the code is working, but I need to understand what certain requests are all about.

<script>

function retrieve(){

    var xmlhttp;

    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest(); }
        else if(window.ActiveXObject) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
        else {
            alert('Please update your browser to start chatting');
    }

Simply, I understand the above is (I created it) just a function with global variable declared to be assigned whether XMLHttpRequest/ActiveXObject Object is declared depending if browser is IE6,7 and others if not throw in alert...

xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("canvas").innerHTML = xmlhttp.responseText;
        }
    }

Similarly, the above I assume takes the onreadystatechange property of the Ajax API and checks for it's state, readyState & status which, if only they match 4 and 200 means, Ajax is working as wanted

t = setTimeout("retrieve()", 2000);

I know the setTimeout() is a bit like setInterval() function, which runs the function inside it, every 2 seconds, to check for new messages.

xmlhttp.open("GET", "getajax.php", true);
    xmlhttp.send();

Now, the problem is with the above, I can almost understand that the .open method is supposed to get data from getajax.php even though, I have no idea of what true means in this instance, but as far as the xmlhttp.send(); I have absolutely no clue,

So, All I need is for you to explain to me what I have missed during my illaboration, and what the last queries mean, just in brief.

  }
    retrieve();

</script>

<div id="canvas"></div>

your code actually runs `retrieve()` recursively without a `2000ms` delay after the first `setTimeout` call executed. inside the retrieve function you should once more call: `setTimeout(retieve, 2000);`. Also note how I pass in the **function** itself instead of a **string** to be evaluated. — tsterker, May 17 '13 at 00:28

score 2 · Answer 1 · answered May 17 '13 at 00:10

xmlhttp.open("GET", "getajax.php", true);
xmlhttp.send();

true is what tells the request to be performed A -synchronously, which is the A in AJAX. Then finally .send() actually send the request.

Asynchronous requests are non-blocking meaning that the rest of your code wont wait for them to finish and return before continuing. That is why you sent event handlers before starting the request via xmlhttp.onreadystatechange. That way once the request is complete you have already told your script what to do with the returned information.

Hope this helps.

Edit Additionally I recommend using some sort of framework or library for javascript like jQuery. While it is good to learn some of the javascript core, something like jQuery will make your life much easier.

while JQuery is handy in certain situations, for what he is describing it is overkill. — Mike_OBrien, May 17 '13 at 03:17

score 2 · Answer 2 · edited May 23 '17 at 10:25

Simply, I understand the above is (I created it) just a function with global variable declared to be assigned

xmlhttp isn't a global. It's a local variable in the global function retrieve.

Similarly, the above I assume takes the onreadystatechange property of the Ajax API and checks for it's state

onreadystatechange is a property that accepts a function. That function is run when the value of readyState changes. That function is usually used to check the status of the request.

I know the setTimeout() is a bit like setInterval() function, which runs the function inside it, every 2 seconds, to check for new messages.

setTimeout is like setInterval in a sense that it runs a function at a later time. Unlike setInterval, it only runs the code once. Also, that's not the proper way of running a timer. Here's a post that explains how to properly use timers.

the .open method is supposed to get data from getajax.php even though, I have no idea of what true means in this instance, but as far as the xmlhttp.send(); I have absolutely no clue

The open builds your request by accepting:

The type of request (GET/POST)
The url where you want the request sent
The third argument determines if the request is asynchronous or not.
- If set to false, this makes the request synchronous. The browser will freeze and wait for the response.
- If true, the request us asynchronous. The browser will not freeze in waiting.
The default value is true, so you can omit it.

send is the actual function that ultimately sends the request to the server.

For further reading, I suggest you read MDN's section regarding AJAX.

Understand Ajax XMLHttpRequest in details

2 Answers2