Question

I need your help in doing the ajax part to refresh the div on the click on the “Refresh” button. I need an example.

I have tried to do it to be refreshed evey 15 seconds as per an example I found it in the internet.

but it did not work, can you please help

Below is my code:

<script type="text/javascript">  
function Ajax(){  
    var xmlHttp;  
    try{      
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari  
    }  
    catch (e){  
        try{  
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer  
        }  
        catch (e){  
            try{  
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
            }  
            catch (e){  
                alert("No AJAX!?");  
                return false;  
            }  
        }  
    }  

    xmlHttp.onreadystatechange=function(){  
        if(xmlHttp.readyState==4){  
            document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;  
            setTimeout('Ajax()',10000);  
        }  
    }  
    xmlHttp.open("GET","MQSTATUS.jsp",true);  
    xmlHttp.send(null);  
}  

window.onload=function(){  
    setTimeout('Ajax()',10000);  
}  
</script>  

it is giving me an error which is unknown runtime error in the line

<code>
    xmlHttp.open("GET","MQSTATUS.jsp",true); 
</code>

How should I modify the code, I tried to change the naming and do some modifications, but it did not work. I tried to put / before the url

<code>
    xmlHttp.open("GET","/MQSTATUS.jsp",true); </code>

Answer 1

I would start by separating the initialization and updating of the XHR object and AJAX call. This way you only have the one XHR object and it does what you tell it to do, all the time.
First you initialize the XHR object from the onload handler of the window object. Then you issue new requests to this object by calling updateAjax() in the onclick handler of your refresh button. It will look something like this:

<script type="text/javascript">
var xmlHttp;

function initAjax() {
    try {
        xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        } catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                alert("No AJAX!?");
                return false;
            }
        }
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4) {
            document.getElementById('ReloadThis').innerHTML = xmlHttp.responseText;
        }
    }
}

function updateAjax() {
    xmlHttp.open("GET", "MQSTATUS.jsp", true);
    xmlHttp.send(null);
}

window.onload = function() {
    initAjax();
}
</script>

And then in your HTML put

<input type="button" value="Refresh" onclick="updateAjax()" />

Hope this helps you a little.