Alright, I'm trying to make an AJAX Chat system that polls the chat database every 400ms. That part is working, the part of which isn't is the Active User List. When I try to combine the two requests, the first two requests are made, then the whole thing snowballs and the usually timed (12 second) Active User List request starts updating every 1ms and the first request NEVER happens again. Displayed is the entire AJAX code for both requests:
var waittime=400;chatmsg=document.getElementById("chatmsg");
room = document.getElementById("roomid").value;
chatmsg.focus()
document.getElementById("chatwindow").innerHTML = "loading...";
document.getElementById("userwindow").innerHTML = "Loading User List...";
var xmlhttp = false;
var xmlhttp2 = false;
var xmlhttp3 = false;
function ajax_read(url) {
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType('text/xml');
}
} else if(window.ActiveXObject){
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
if(!xmlhttp) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
document.getElementById("chatwindow").innerHTML = xmlhttp.responseText;
setTimeout("ajax_read('methods.php?method=r&room=" + room +"')", waittime);
}
}
xmlhttp.open('GET',url,true);
xmlhttp.send(null);
}
function user_read(url) {
if(window.XMLHttpRequest){
xmlhttp3=new XMLHttpRequest();
if(xmlhttp3.overrideMimeType){
xmlhttp3.overrideMimeType('text/xml');
}
} else if(window.ActiveXObject){
try{
xmlhttp3=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
xmlhttp3=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
if(!xmlhttp3) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
xmlhttp3.onreadystatechange = function() {
if (xmlhttp3.readyState==4) {
document.getElementById("userwindow").innerHTML = xmlhttp3.responseText;
setTimeout("ajax_read('methods.php?method=u&room=" + room +"')", 12000);
}
}
xmlhttp3.open('GET',url,true);
xmlhttp3.send(null);
}
function ajax_write(url){
if(window.XMLHttpRequest){
xmlhttp2=new XMLHttpRequest();
if(xmlhttp2.overrideMimeType){
xmlhttp2.overrideMimeType('text/xml');
}
} else if(window.ActiveXObject){
try{
xmlhttp2=new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try{
xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
}
}
}
if(!xmlhttp2) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
xmlhttp2.open('GET',url,true);
xmlhttp2.send(null);
}
function submit_msg(){
nick = document.getElementById("chatnick").value;
msg = document.getElementById("chatmsg").value;
document.getElementById("chatmsg").value = "";
ajax_write("methods.php?method=w&m=" + msg + "&n=" + nick + "&room=" + room + "");
}
function keyup(arg1) {
if (arg1 == 13) submit_msg();
}
var intUpdate = setTimeout("ajax_read('methods.php')", waittime);
var intUpdate = setTimeout("user_read('methods.php')", waittime);
The problem is that in user_read a timer is set up that runs ajax_read after 12 s, with the correct URL. So, when this ajax_read is called, it fetches information and sets up a new timeout, this time calling ajax_read after waittime, with ?method=r…. So after the first timeout of user_read, it is never called again.
FYI, I watched this with (the Net panel of) Firebug and a bogus form and methods.php on a local web server. It became clear after setting waittime to 4000 and using .innerHTML += …, resulting in two calls every 4 seconds.
index.html (I know, it's quick'n'dirty):
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Chat</title>
</head>
<body>
<input id="chatnick" type="text" value="Nickname"><br>
<input id="roomid" type="text" value="4"><br>
<input id="chatmsg" type="text"><br>
<div id="userwindow" style="width: 500px; height: 300px"></div><br>
<div id="chatwindow" style="width: 300px; height: 300px"></div><br>
<script src="js.js"></script>
</body>
</html>
bogus methods.php:
blah<br>
Also be aware of the possibility that xmlhttp.status might not be 200.