AJAX loading page only when updated

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
egg82
Forum Contributor
Posts: 156
Joined: Sat Oct 01, 2011 9:29 pm
Location: Colorado, USA

AJAX loading page only when updated

Post by egg82 »

Well, I can honestly say i'm not great with javascript at all. Never really learned it. Problem is I want the script to keep checking the database at small intervals, but I only want the <div> to update when something's changed.

Basically the big problem is this: The user can't click a link that's being updated every half-second. My solution was to update the links only when there's a new one available.
Unless anyone else has another solution to this, it seems quite logical. I just can't seem to get it to work :|

Code: Select all

<script type="text/javascript">
function refPage(){
	var xmlhttp;
	xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4 && xmlhttp.status==200){
			if(document.getElementById("friendsDiv").innerHTML != xmlhttp.responseText){
				document.getElementById("friendsDiv").innerHTML=xmlhttp.responseText;
			}
			setInterval(refPage(), 500);
		}
	}
	xmlhttp.open("GET","../friends.php",true);
	xmlhttp.send();
}
</script>
<script type="text/javascript">
refPage();
</script>
ouchiko
Forum Commoner
Posts: 35
Joined: Sun Oct 09, 2011 6:54 pm
Location: London

Re: AJAX loading page only when updated

Post by ouchiko »

When someone hovers your div kill the setInterval

X=setInterval

When the user focuses the div just clearInterval(X)

One they off focus run refpage again.

This way it keeps checking but will pause when they want to do something. 500ms seems a little quick. Remember to watch out for the rapid Ajax stuff, 5 users at 2 requests per second is 600 server hits a minute. Imagine if you had 1000 people.
User avatar
egg82
Forum Contributor
Posts: 156
Joined: Sat Oct 01, 2011 9:29 pm
Location: Colorado, USA

Re: AJAX loading page only when updated

Post by egg82 »

Thanks, that's brilliant. I downed it to three seconds, but I think i'll just up the speed depending on how many friends the user has (more friends=more chances per second(s) someone's going to be online/offline)

Once I get a new computer the server'll be able to handle it. Just need that check...
ouchiko
Forum Commoner
Posts: 35
Joined: Sun Oct 09, 2011 6:54 pm
Location: London

Re: AJAX loading page only when updated

Post by ouchiko »

Cool, glad it worked. Also, remember that you might get back cached data with your request, if you want a unique guaranteed response from each ajax call add a random variable to the end, e.g. friends.php?rnd="+Math.random(),true
User avatar
egg82
Forum Contributor
Posts: 156
Joined: Sat Oct 01, 2011 9:29 pm
Location: Colorado, USA

Re: AJAX loading page only when updated

Post by egg82 »

so here's the finished code:

Code: Select all

<?php
require("header4.php");
if(isset($_SESSION["id"]) and $_SESSION["id"] != ""){
	$connect = mysql_select_db("gametack", $link);
	if(!$connect){
		echo(mysql_error());
		exit();
	}
	$result = mysql_query("SELECT * FROM `friends` WHERE `user1`='".$_SESSION["user"]."' OR `user1`='".$_SESSION["user"]."'");
	if(!$result){
		echo(mysql_error());
		exit();
	}
}else{
	$result = mysql_query("SELECT * FROM `accounts` WHERE `user`=NULL");
	if(!$result){
		echo(mysql_error());
		exit();
	}
}
echo('<div id="friendsDiv" onMouseOver="clearInterval(x);" onMouseOut="newInterval();"></div>');
if(mysql_num_rows($result) > 0){
	echo('<script type="text/javascript">
	function getFriends(){
		var xmlhttp;
		xmlhttp=new XMLHttpRequest();
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				document.getElementById("friendsDiv").innerHTML=xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","../friends.php?rnd="+Math.random(),true);
		xmlhttp.send();
	}
	</script>
	<script type="text/javascript">
	getFriends();
	function newInterval(){
		x = setInterval(\'getFriends()\', '.(120000/(mysql_num_rows($result)/2)).');
	}
	</script>');
}else{
	echo('<script type="text/javascript">
	function getFriends(){
		var xmlhttp;
		xmlhttp=new XMLHttpRequest();
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				document.getElementById("friendsDiv").innerHTML=xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","../friends.php?rnd="+Math.random(),true);
		xmlhttp.send();
	}
	</script>
	<script type="text/javascript">
	getFriends();
	function newInterval(){
	}
    </script>');
}
?>
Haven't FULLY tested it yet, but it seems to be working thus far. Thanks again
Post Reply