Ongemerkt pagina herladen

[Virzual]

Hallo,

ik werk aan een chatbox (om webdesign/-script ervaring op te doen) en ik ben tegen het volgende probleem aangelopen: het herladen van de pagina die de berichten weergeeft. Momenteel gebeurt dit om de 4 seconde de pagina simpelweg te herladen doormiddel van <meta http-equiv="Refresh" content="4">.
Ik vroeg me af of het mogelijk is het PHP gedeelte dat de gegevens uit de MySQL tabel haalt dit om de seconde te laten doen, zonder dat hiervoor de hele pagina herladen hoeft te worden, aangezien dit nogal onprofessioneel en irritant oogt. JavaScript (Ajax?) lijkt mij hiervoor het dichts in de buurt te komen, maar aangezien ik zelf nog niet zo heel veel gewerkt heb met JS kan ik zo snel niet op een mogelijke oplossing komen.
De chatbox is te vinden op http://www.freemansicepick.com/aeacus/chat/. Het mag duidelijk zijn dat het gebeuren nog niet helemaal af is
Alvast bedankt voor het meedenken!

Mvg,

Niels

 

[That Guy]

Hallo naamgenoot,



Je kan wat google tutorials zoeken op 'javascript AJAX'; hell, ik denk dat er zelfs goede resultaten zijn bij 'javascript AJAX chat (box)'. Zowiezo kan je dan van die vreselijke iframes af; en daarnaast zal je niet meer dat geflikker zien steeds!

het idee:

<ul id='messages'>
   <li>hier komen alle berichten!</li>
</ul>

[JS]var laatstebericht = 1284488233;

function poll()
{
// request naar poll.php?time= + laastebericht;

// response in JSON, gaat naar addMessage()
}

setInterval(poll, 5000); // om de 5 seconde pollen

function addMessage(json)
{
var data = JSON.parse(json);
var i, len = data.aantal;

for(i=0; i<data.aantal; i++)
{
var li = document.createElement('li');

li.innerHTML = json.bericht.text;

document.getElementById('messages').addChildNode(li); // pseudo

laatstebericht = json.bericht.tijd;
}
}[/JS]

// poll.php

<?php

   $tijd = $_GET['time'];

   $q = mysql_query("SELECT * FROM messages WHERE time > " . $tijd);

   // echo JSON begin hier

   while($message = mysql_fetch_object($q))
   {
      echo $message -> data;
   }

   // moar JSON ending hier

?>

uiteindelijk krijg je dan een grote <ul> met alle messages in een <li>. Je kan natuurlijk ook zonder lijst werken en zonder JSON, maar het gaat om het idee.



:thumb: