Page 1 of 1
AJAX loading page only when updated
Posted: Sun Oct 16, 2011 8:33 pm
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>
Re: AJAX loading page only when updated
Posted: Mon Oct 17, 2011 5:47 pm
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.
Re: AJAX loading page only when updated
Posted: Mon Oct 17, 2011 10:15 pm
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...
Re: AJAX loading page only when updated
Posted: Tue Oct 18, 2011 4:45 am
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
Re: AJAX loading page only when updated
Posted: Tue Oct 18, 2011 8:18 am
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