Actualmente yo tengo el chat con las bases de datos y con la fecha+hora guardadas para cada mensaje, pero repito, no he tocado ajax nunca y no sabria muy bien como hacer lo de refrescar solo con los mensajes enviados.
Bueno, aquí lo dejo con bases de datos:
ajax.js
Código:
function ajaxFunction01()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
function ajaxFunction02()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
} function fajax()
{
var text = document.getElementById('text').value;
var ajax=ajaxFunction01();
ajax.open("post","index.php?Bota=bai",true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("text="+text);
document.getElementById('text').value="";
document.getElementById('text').focus();
fajax2();
}
function fajax2()
{
var ajax2=ajaxFunction02();
ajax2.onreadystatechange=function()
{
if(ajax2.readyState==4)
{
document.getElementById('txat').innerHTML=ajax2.responseText;
}
else
{
// si queremos mostrar algo mientras carga
//document.getElementById('txat').innerHTML="kargaten...";
}
}
ajax2.open("get","index.php?Leidu=bai",true);
ajax2.send(null);
}
index.php
Código PHP:
<?php
if($_GET["Bota"]=="bai")
{
$mensaje = $_REQUEST["text"];
$nick = $_REQUEST["nick"];
//En conf.php tenemos nuestros datos de configuración con la base de datos.
include ("../conf.php");
mysql_select_db(BBDD,$conn) or die('Could not select database');
/*Tenemos una tabla "chat" formada por los campos: "id"(autoincrement), nick"(varchar), "mensaje"(varchar) y fecha(datetime).*/
mysql_query ("INSERT INTO chat (nick, comentario, fecha) VALUES ('$nick', '$mensaje', '$fecha')");
exit();
}
elseif($_GET["Leidu"]=="bai")
{
include ("../conf.php");
mysql_select_db(BBDD,$conn) or die('Could not select database');
$comentario = mysql_query("SELECT * FROM chat ORDER BY fecha DESC") or die(mysql_error());
while($fila = mysql_fetch_array($comentario)){
echo "<b>".$fila['nick'].":</b> ".$fila['comentario']."<br />";
}
}
?>
principal.html
Código HTML:
<html>
<head>
<title>Txat-tsue :)</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function fajax()
{
var text = document.getElementById('text').value;
var nick = document.getElementById('nick').value;
var ajax=ajaxFunction01();
ajax.open("post","index.php?Bota=bai",true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("text="+text+"&nick="+nick);
document.getElementById('text').value="";
document.getElementById('text').focus();
fajax2();
}
function fajax2()
{
var ajax=ajaxFunction02();
ajax.onreadystatechange=function()
{
if(ajax.readyState==4)
{
document.getElementById('txat').innerHTML=ajax.responseText;
}
else
{
//document.getElementById('txat').innerHTML="kargaten...";
}
}
ajax.open("get","index.php?Leidu=bai",true);
ajax.send(null);
}
setInterval("fajax2()",2000);
</script>
</head>
<body>
<div id="txat"></div>
<p>
<input name="mensaje" type="text" id="nick" value="Nick" size="17" maxlength="50" />
</p>
<p>
<input name="mensaje" type="text" id="text" size="50" maxlength="50" />
</p>
<p>
<input name="boton" type="button" onClick="fajax()" value="Enviar" />
</p>
<script type="text/javascript">
document.getElementById('text').value="";
document.getElementById('text').focus();
fajax2();
</script>
</body>
</html>