How does AJAX do antying if XMLHttpRequestObject is deleted and/or contains no value since it's also set to null?

Question

So I'm reading a book on AJAX, and they are talking about using inner function as a way to handle multiple requests. I understand that, but in this bit of code they used, I don't understand how the variable XMLHttpRequestObject can still be used:

if(XMLHttpRequestObject) 
{
    XMLHttpRequestObject.open(“GET”, dataSource);

    XMLHttpRequestObject.onreadystatechange = function()
    {
        if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
        {
            document.getElementById(“targetDiv”).innerHTML = XMLHttpRequestObject.responseText;
            delete XMLHttpRequestObject;
            XMLHttpRequestObject = null;
        }
    }

    XMLHttpRequestObject.send(null);
}

My first qualm is when they delete XMLHttpRequestObject and then, after it's supposedly deleted, they set it equal to null. Then after it supposedly deleted and set to null, they use the XMLHttpRequestObject.send(null); But how does it do anything when XMLHttpRequestObject is deleted and/or contains no value since it's also set to null?

Answer 1

The onreadystatechange function doesn't execute immediately when it is created. As the name suggests, it is called when the state changes.

In this case the XMLHttpRequestObject is only deleted after XMLHttpRequestObject.readyState == 4 and XMLHttpRequestObject.status == 200, i.e. after the page is successfully received.

Answer 2

My first qualm is when they delete XMLHttpRequestObject and then, after it's supposedly deleted, they set it equal to null.

Don't know why they're doing that. Setting to null seems sufficient to me, but perhaps this solves some obscure browser quirk.

Then after it supposedly deleted and set to null, they use the XMLHttpRequestObject.send(null);

no. the deleting takes place inside the event handler - this event handler function is not called until after the request is done, and the state of the xhr object changes, for example due to the server sending the response, or an error occurring in the communication.

Basically, the calling sequence is not the same as the declaration sequence. The calling sequence is:

XMLHttpRequestObject.open(“GET”, dataSource);
... //assign event handler so it can be called later on
XMLHttpRequestObject.send(null); 
... //request send, program continues


//separate context here, goes off when the readystate of the xhr changes
//due to server response or error:
function()
{
    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) 
    {
        document.getElementById(“targetDiv”).innerHTML = XMLHttpRequestObject.responseText;
        delete XMLHttpRequestObject;
        XMLHttpRequestObject = null;
    }
}