I'm calling ajax at regular interval (10 sec) from javascript to load data from the db. The response is listed in a small div. But once every 10 sec, I face the problem of interface not responding to user actions like mouse click, key press etc. Any help on this topic would be appreciated.
Code
var onlineLeads = function () {
var reqst ="";
var size="";
var url ="<s:property value="str_applicationPath"/>/Marketing/Online_showNewRequest";
xmlHttp.open("POST", url, false);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Connection", "close");
xmlHttp.onreadystatechange = function() {//Call a function when the state changes.
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//Code for display
}
}
xmlHttp.send();
setTimeout(onlineLeads, 15000);
};
setTimeout(onlineLeads, 1000);
You aren't performing Ajax:
xmlHttp.open("POST", url, false);
// ^^^^^
// Puts the request into synchronous mode
In synchronous mode, the call blocks until the response comes back. This ties up the JS event loop.
Change false
to true
.