AJAX - simple code for refreshing if page data is new

**djr33** · 03-31-2006, 09:01 PM

Basically, I'm trying to write a very simple chatroom. All is well, but I got tired of using a meta refresh 'cause that annoyed people 'cause the browser kept reloading the page (iframe).
So... at this point I setup something in AJAX and it's pretty cool, but seems like it has some weird issues.

For one, it stops refreshing it (Should do it every 2 seconds) after a while... just doesn't do it anymore. Weird.

Also, I tried, and failed, to change the JS script I have to make it refresh the content of the <div> if and only if the value of the data was different.

Basically... I'm using a database, and messages.php gets the values from the database and diplays them. Then loadmessages.php uses AJAX to constantly get the data from messages.php. index.php takes this, puts it in an iframe and adds some more stuff, including the text box to send a new message.
So... what I need is for loadmessages.php to constantly update to get the new content of messages.php BUT only replace the data in the <div> IF the content differs from the last time that the content was refreshed.
This'll make it so that you don't get a flash every 2 seconds, but rather only a 'flash' when there's new content and that won't look like a flash, but an update... the flash is kinda annoying.

I'd be more than happy to show you my current code, but I got it from another page and I don't think its the right code for this... it's also pretty long for what seems like a pretty simple purpose.

Ah, and, note: it seems like a 2second refresh is the fastest possible because it takes that long for the php page to connect to the database and run its script, etc...

**Twey** · 03-31-2006, 09:31 PM

I'd be more than happy to show you my current code, but I got it from another page and I don't think its the right code for this... it's also pretty long for what seems like a pretty simple purpose.

I think you'll need to do this, yes.

Ah, and, note: it seems like a 2second refresh is the fastest possible because it takes that long for the php page to connect to the database and run its script, etc...

You should make this user-customizable. Also, make sure the timer isn't being started before the page has fully loaded.

**djr33** · 03-31-2006, 10:05 PM

You should make this user-customizable. Also, make sure the timer isn't being started before the page has fully loaded.

As is probably clear, I'm just starting out with JS, so I really have no idea how to do either of those things... I suppose I could add a field in the database for each user's refresh rate... but... why?
Also, the page won't have much loading to do... the main page is just a table holding two iframes; the iframe just holds a page that uses ajax to get: a page that has a fairly simple php script getting values from a database and echoing them. So... why would I want this to be user-customizable... they'd want as close to real-time as possible, yeah?

I can show you the code, sure. Just... I don't really want to use this particular code... just the functionality of it and create something cleaner and hopefully faster.
I don't think I need to show the php... all it does is just get the values from a database of things that have been posted, then echoes them in reverse order (so the top of the page is the newest message... I can reverse it later with anchors or something, but for now, its fine).

Here's the working example:
http://thebrbforums.com/chat/
That just holds iframes, though.
Hmm... so... page1: iframes, page2: ajax, page3: php. I'll just post the ajax here... that's all you need to see, right? the url for page 3 is in that.

PHP Code:


<html>

<head>

<title>messages</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>

function createRequestObject() {

    var ro;

    var browser = navigator.appName;

    if(browser == "Microsoft Internet Explorer"){

        ro = new ActiveXObject("Microsoft.XMLHTTP");

    }else{

        ro = new XMLHttpRequest();

    }

    return ro;

}



var http = createRequestObject();



function sndReq() {

    http.open('get', 'messages.php');

    http.onreadystatechange = handleResponse;

    http.send(null);

    setTimeout("sndReq()", 2000); // Recursive JavaScript function calls sndReq() every 2 seconds

}



function handleResponse() {

    if(http.readyState == 4){

        var response = http.responseText;

        if (response != responseold || responsecheck != 1) {

            var responsecheck = 1;

            document.getElementById("messages").innerHTML = http.responseText;

            var responseold = response;

        }

    }

}





</script>

</head>

<body onLoad="javascript:sndReq();">

<div id="messages"></div>

</body>

</html>

Oh, and last note... it won't really work for you to type stuff at the moment... I need to fix the page (I have another version, but that isn't up at the moment)... so... just assume I'll handle the sending messages thing later.

As I said, it's probably WAY more complex and memory hogging than it needs to be, so please don't include extra stuff... I just got that code from another page to try it out with a working base.

**Twey** · 04-01-2006, 11:41 AM

So... why would I want this to be user-customizable... they'd want as close to real-time as possible, yeah?

But what they don't want, at any cost, is for the page to refresh before it's fully-loaded, which would render the script unusable. The exact point at which the script is loaded will be different for each person; someone on 33k is going to have a DRASTICALLY different loading time to someone on 10MB/s broadband, even with such a small page.

Code:

<body onLoad="javascript:sndReq();">

should be:

Code:

<body onLoad="sndReq();">

... and I recommend you use setInterval rather than setTimeout to avoid "too much recursion" errors:

Code:

function sndReq() {
    http.open('GET', 'messages.php');
    http.onreadystatechange = handleResponse;
    http.send(null);
    setTimeout("sndReq()", 2000);
}

window.setInterval("sndReq()", 2000);

**jeromesheerin** · 01-17-2007, 02:22 PM

I was using this thread to be able to do the following

Have a file called messages.php
Have another file with the following code in it

<html>
<head>
<title>messages</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

function sndReq() {
http.open('get', 'messages.php');
http.onreadystatechange = handleResponse;
http.send(null);
setTimeout("sndReq()", 2000); // Recursive JavaScript function calls sndReq() every 2 seconds
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
if (response != responseold || responsecheck != 1) {
var responsecheck = 1;
document.getElementById("messages").innerHTML = http.responseText;
var responseold = response;
}
}
}

</script>
</head>
<body onLoad="javascript:sndReq();">
<div id="messages"></div>
</body>
</html>

I wanted to be able to print out the contents of messages.php to my web page the instant it was updated...

On unix a use for this was to monitor a log file in real time

so all you have to do is change the following line above and walla

change
http.send(null);
to

http.send(true);

follow the instructions of the creator of this port to set it all up

just change this line to make it work , a refresh every two secs

if you have any probs email me
email me

jeromesheerin@campus.ie

this was posted on 2007 Jan

Thread: AJAX - simple code for refreshing if page data is new

Thread Tools

Search Thread

AJAX - simple code for refreshing if page data is new

Bookmarks

Bookmarks

Posting Permissions