Jump to content

use java to reload page without refresh?


sdaniels

Recommended Posts

I found a php/javascript chat program that allows users to chat without relaoding the page.
the chat is cool and all but what im looking to do is figure out how this code is taking the submit from the page and displaying it without refreshing the page..
I want to use it to update a display of how many users are online. currently i have to refresh the entire page, id like it to update on the fly like this chat program.

please advise.

it can be seen in action here: [a href=\"http://www.pjduvivier.com/chatoo/\" target=\"_blank\"]http://www.pjduvivier.com/chatoo/[/a]

here is the code:

<code>
<?
include('param.php');
?>
<!doctype html public "-//W3C//DTD HTML 4.0 //FR">
<html>
<head>
<title>Title here!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=stylesheet type="text/css" href="css.css">
<script>

function displayMessage() {
var xhr_object = null;

if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non support par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...utilisez firefox cela ne vous ferra pas de mal");
return;
}

xhr_object.open("GET", "reload.php", true);

xhr_object.onreadystatechange = function() {

if(xhr_object.readyState == 4) {

var chaine=xhr_object.responseText;
var contentArray=chaine.split('X');
var chaineText=contentArray[0];
var listUser=contentArray[1];
var object=document.getElementById('mon_texte');
var userobject=document.getElementById('online');

if (chaineText.length>4)
{

object.innerHTML= document.getElementById('mon_texte').innerHTML+chaineText;
object.scrollTop=object.scrollHeight;

}

userobject.innerHTML=listUser;


setTimeout( "displayMessage()",2500);}
}
xhr_object.send(null);
}

</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="mon_texte" class='scroll' style="position:absolute; left:11px; top:2px; overflow: auto; visibility: visible;"></div>
<div id="online" class='scroll2' style="position:absolute; left:526px; top:5px; height=400"></div>
<div id="Layer1" style="position:absolute; left:661px; top:6px; width:204px; height:308px; z-index:1"><div align="justify"><? echo _EXPLAINCHATOO ?>
</div>
</div>
<script>
displayMessage();
</script>
</body>
</html>
</code>

Link to comment
Share on other sites

The way your chatbox refeshes without refeshing the page is the use of AJAX. AJAX allows you tointract will the server whithout having to refesh the browser. Chexk out AJAX over at AJAXFreaks.com.

ANd this is the line:
[code] setTimeout( "displayMessage()", 2500);[/code]that refeshes the page to get the messages to display ever 2.5 secounds. In the displayMessage() fucntion it enables AJAX then it calls a file called reload.php as seen here:
[code] xhr_object.open("GET", "reload.php", true);[/code]
Which I guess gets the messages out of a file/database and returns it to AJAX, which then displaus the various chat messages using this:
[code] xhr_object.onreadystatechange = function() {

if(xhr_object.readyState == 4) {

var chaine=xhr_object.responseText;
var contentArray=chaine.split('X');
var chaineText=contentArray[0];
var listUser=contentArray[1];
var object=document.getElementById('mon_texte');
var userobject=document.getElementById('online');

if (chaineText.length>4)
{

object.innerHTML= document.getElementById('mon_texte').innerHTML+chaineText;
object.scrollTop=object.scrollHeight;

}[/code]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.