Question

I have created a simple ajax request:

             var params = "postdata=" + mydata;
             if (window.XMLHttpRequest) {
                 xmlhttp = new XMLHttpRequest();
             } else {
                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
             xmlhttp.onreadystatechange = function () {
                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                     document.getElementById("data").innerHTML = xmlhttp.responseText;
                 }
             }
             xmlhttp.open("POST", "data.php", true);
             xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
             xmlhttp.setRequestHeader("Content-length", params.length);
             xmlhttp.setRequestHeader("Connection", "close");
             xmlhttp.send(params);

And this is the HTML code:

    <div id="data">
    <img src="/images/preload.gif" />
    <b style="color:#9ca6dc;font-size:12px;">Wait</b>
    </div>

The problem is that the preload.gif and “Wait” text appears only sometimes and not always.

Why ? How can I resolve that ?

Answer 1

The only explanation is that AJAX request works too quickly to see the content (as Alessandro Pezzato said). If you don’t see it the readyState of XMLHTTP request had to change.

Or you have some other Javascript which runs asynchronously and does changes on the same content.