AJAX Newbie

Help request for AJAX chat app

[british government]

Bit of background.
I have been working with PHP MYSQL HTML and CSS in web design for about 5 years now, very little experience of JavaScript at all.

I have a small chat web ap setup using 3 files.

Index.php
Messages.php
Reload.js

Index.php shows a loading message and the div

Index.php
################################
<script src="inc/chat/reload.js" type="text/javascript"></script>

<div id="ReloadThis">Loading....</div>
################################

Messages.php calls from mySql and loads the messages for the chat box, nothing worth posting but ask if you want it.

Reload.js is the file I have the problem with, basically it came from a "Build your own AJAX chat" tutorial.

The problem is that when I go to index.php the messages.php reloads constantly until the point that the browser crashes.

Reload.js
###############################

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(){
document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
setTimeout('Ajax()',10000);
}
xmlHttp.open("GET","http://www.example.com/inc/chat/messages.php",true);
xmlHttp.send(null);
}
window.onload=function(){
setTimeout('Ajax()',10000);
}

###############################

Any advice is much appreciated.

Thanks

[edited by: Fotiman at 1:53 pm (utc) on Nov. 11, 2009]
[edit reason] Examplified URL [/edit]

[Fotiman]

Welcome to WebmasterWorld!
It looks like this will send a request to messages.php every 10 seconds. Can you give a little more detail about what you mean by this:

... the messages.php reloads constantly until the point that the browser crashes

Are you saying that it's loading messages.php more than once every 10 seconds?

[astupidname]

Well, I doubt if it has anything to do with your problem of the browser crashing, but I did have a suggestion or two about how your Ajax function should certainly be re-worked as follows, see comments:

function Ajax(){
var xmlHttp;
//should always check for the IE ActiveXObject versions first,
//XMLHttpRequest, which is available in IE7, is supposedly broken in IE7 (go figure...)
if (window.ActiveXObject) { //IE
try{
xmlHttp = new window.ActiveXObject("Msxml2.XMLHTTP");
} catch(er){
try{
xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}catch(er2){}
}
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
}
if (xmlHttp) {
xmlHttp.onreadystatechange=function(){
document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
setTimeout(Ajax,10000); //note no quotes or parens on the name of the function passed to setTimeout
//general rule of thumb: never pass strings to setTimeout,
//is slower to evaluate, use anonymous functions or function names instead.
//if you ever need to pass a function to setTimeout using arguments,
//use syntax: setTimeout(function(){ myFunc('myFirstArgument', 2); }, 10000);
};
xmlHttp.open("GET","http://www.example.com/inc/chat/messages.php",true);
xmlHttp.send(null);
}
}

window.onload=function(){
setTimeout(Ajax,10000); //note again, no strings passed as arguments to setTimeout
};

Again, I find it doubtful that the above will actually fix the problem, but thought it worth suggesting the changes there FYI.

The problem is that when I go to index.php the messages.php reloads constantly until the point that the browser crashes.

The problem you describe would lead me to believe that there is a real problem with the responseText or something, never heard of such problem. Does the responseText contain any javascript's which may attempt to use document.write or anything goofy like that? Is the responseText being placed properly into the element?

[astupidname]

Shoot, I just remembered there was one other important change I was going to recommend making to your Ajax function, within the definition of the onreadystatechange method should really be checking for readyState == 4 && status == 200, see changes below:

xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
setTimeout(Ajax,10000);
} else {
alert("Error retrieving response! Error code: "+ xmlHttp.status);
}
}
};

[british government]

fotiman thanks for the welcome and thats for changing my url, stupid mistake by me!

astupidname thanks for your replies I have implemented this but the problem still remains.

The problem is hard to explain, basically the first 3 times it refreshes every 10 seconds then it starts to refresh more often up to the point it is just flashing and then the browser crashes (ie8 or firefox3)

SNIP

use that url you can see exactly what is going on.

***** WARNING THIS URL WILL CRASH YOUR BROWSER ******

[edited by: Fotiman at 2:16 pm (utc) on Nov. 12, 2009]
[edit reason] No URLs please. See TOS [webmasterworld.com] [/edit]

[astupidname]

Have you tried using a valid html page complete with DOCTYPE, head and body tags and all that? When I go to your page and view source (after disabling javascript of course so you don't crash me) all the source shows is:

<script src="reload.js" type="text/javascript"></script>

<div id="ReloadThis">Loading....</div>

Oh, and update your script to what I have shown you so far, the onreadystatechange re-definition being very important here... as otherwise the way you have it, it is setting another setTimeout every time the onreadystatechange function fires, which is typically 4 or 5 times before you get actual final response when readyState == 4 && status == 200.
So get a fully valid page and update script to what I showed earlier (with the modification I showed to onreadystatechange definition also), and see....

[Fotiman]

A couple of things.
1. XMLHttpRequest in IE7 is not broken. It is much better to use the native XMLHttpRequest object vs. the ActiveXObject version.
2. Your onreadystatechange method may execute multiple times before it has actually completed. As suggested, look for readyState == 4 && status == 200. Try this:

function Ajax() {
  var xmlHttp;
  try {
    xmlHttp = new XMLHttpRequest();// Firefox, IE7, 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 && xmlHttp.status == 200) {
      document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText; 
      setTimeout(Ajax, 10000);
    }
  }
  xmlHttp.open("GET","http://www.example.com/inc/chat/messages.php",true);
  xmlHttp.send(null); 
} 
window.onload = function() {
  setTimeout(Ajax, 10000);
}

(Note, no URLs please. See TOS [webmasterworld.com])

[british government]

astupidname - full html page doesnt make a difference, this was originally a php include within my site which i pulled out so I could post the example link.

fotiman thanks for your reply and note taken about links.

Your code does solve the problem with too much refreshing but unfortunatly now it doesnt refresh at all!

Copied the exact code from you, changed the url and halved teh refresh time because im impatient but no luck.

Thanks for your efforts so far

**UPDATE**

Just looked and I think the java refresh is working but my browser is cacheing the messages.php so not showing the new messgaes, any ideas?

[edited by: british_government at 6:56 pm (utc) on Nov. 12, 2009]

[Fotiman]

It's probably a caching issue. Try changing this line:

xmlHttp.open("GET","http://www.example.com/inc/chat/messages.php",true);

To this:

xmlHttp.open("GET","http://www.example.com/inc/chat/messages.php?ck=" + (new Date()).getTime(),true);

[british government]

Perfect thanks a lot for your help