Using JavaScript and XHTML: XMLHttpRequest's open/send do not work if before onreadystatechange.

Question

I don't know if it "works" or not, but I am concluding this because the code posted here, works (except for what's in the for loop (stupid DOM), but that's not the focus) ONLY after two clicks. I'm assuming this is because it is not getting the XML document till it's created, which is at the end of the first click.

However, if I were to put XMLhttpRequest.open and XMLHttpRequest.send methods BEFORE the onreadystatechange function, the code will not execute inside the nested if statement (the one that checks readystate/status). I have tested this with alert or document.write.

Any ideas what is going wrong?

if (window.XMLHttpRequest)
{
    var xmlhttp = new XMLHttpRequest();
}

function lessonList()
{   
    var xmldoc = xmlhttp.responseXML;

    xmlhttp.onreadystatechange = function() 
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            var getTitle = xmldoc.getElementsByTagName('title');
            var lessonList = document.getElementById('lesson-list');

            for (i = 0; i < getTitle.length; i++)
            {
                var lessonTitle = document.createElement('li');
                lessonTitle.nodeValue = getTitle[i].childNodes[0].nodeValue;

                lessonList.appendChild(lessonTitle);
            }
        }
    };

    xmlhttp.open("GET", 'file.xml', true);
    xmlhttp.send(null);
}

Answer 1

What is happening is that the second time you click the button, it "succeeds" because it uses the response from the first click. It doesn't work the first time because the code tries to get the reference to the XML document before it loads, so xmldoc is actually null rather than the server response you want. You need to move the line var xmldoc = xmlhttp.responseXML; into the inner function.

Answer 2

+1 idealmachine's answer. To clarify, there isn't one single Document instance associated with a single XMLHttpRequest, where loading XML from the response just updates the contents of the document. It's not like calling Document.load().

Instead, when the request is sent, the XMLHttpRequest object drops the old Document that was referred to by its responseXML, and when the response is received it creates a new Document instance with the response. If you kept a reference to the old value of responseXML that's still a valid Document, but it's the old XML document from the previous response, not the new one.

Additionally remember your var i in the for-loop to avoid an accidental global. And setting the nodeValue is meaningless on an Element node; you would need to document.createTextNode(string) and append it instead.

You'll usually use a helper function to get/set the text content of an Element since traditional-DOM makes it such a pain. DOM Level 3 Core's element.textContent property is the easy way, but it doesn't exist in IE or some older browsers.