Hola
En esta oportunidad estoy practicando con ajax, recien comienzo con AJAX.
Estoy tratando de hacer un sistema de comentarios.
Consta de 3 DIV
1. Formulario para enviar el comentario el <div id="formulario">
2. <div id="comentarios"> donde lista todos los comentarios actuales
3. <div id="resultado" class="resultado"></div> el resultado al enviar el comentario.
Lo que quiero hacer es que el <div id="comentarios"> se actualice cada 10 segundos y ademas se actualice cuando se haya enviado un comentario y no se como hacerlo.
Los siguientes codigos funcionan perfectamente. solo que no puse lo que requiero por no saber como hacerlo.
Les dejo el codigo para que lo miren y pueda editarlo con las correcciones correspondientes para que funcione.
index.php
<html>
<head>
<title>Sistema de comentarios</title>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}else
if (self.xmlHttpReq.readyState<4) {
resultado.innerHTML = '<img src="procesando.gif"> Procesando...Espere!';// muestra barra progres mientras php procesa y da el ok
document.getElementById("formulario").style.displa y = 'none';// esconde formulario tras el envio
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['formcoment'];
var nombre = form.nombre.value;
var mensaje = form.mensaje.value;
qstr = 'n=' + escape(nombre) + '&m=' + escape(mensaje); // ATENCION: no '?' antes de la cadena de la consulta
return qstr;
}
// se recive datos de PHP... y continua ajax
function updatepage(str){
document.getElementById("resultado").innerHTML = str;
document.getElementById("formulario").style.displa y = 'none';
}
</script>
<style>
p, input, textarea, div { font: bold 8pt verdana, sans-serif; }
.resultado { color: red; }
</style>
</head>
<div id="comentarios">Todos los comentarios:<br><br>
<? include("listar_coment.php"); ?>
<br><br>
</div>
<div id="resultado" class="resultado"></div>
<div id="formulario">
<form name="formcoment">
<p>Tu nombre: <input name="nombre" type="text" size="15"> <br><br>
Mensaje:<br>
<textarea name="mensaje" cols=40 rows=5 wrap=soft></textarea>
<input value="Enviar" type="button" onclick='JavaScript
:xmlhttpPost("procesar.php")'></p>
</form>
</div>
</body>
</html>
listar_coment.php (este es un codigo para simular el listado de comentarios ya que una vez funcionando la apliccaion para el usuario en ajax hare que se conecte a una base de datos y liste dese alli)
<?php
// simulacion de listar comentarios
echo 'Lista de comentario actual<br>';
for($i = 1; $i < 5; $i++ ){
echo("Comentario $i <br>");
};
?>
procesar.php
<?php
echo("Tu comentario se ha enviado satisfactoriamente<br> Datos:<br><br>Tu Nombre: ".$_REQUEST
['n']."<br>Tu Mensaje: ".$_REQUEST['m']);
?>
Espero que uds, quienes tienen amplia experiencia en AJAX me puedan dar una manito.
Este tema puede ser util para todos aquellos que recien comienza en ajax, en esta lista.
Muchas gracias a todos
Que tengan un buen dia.
Saludos