Foros del Web - Ver Mensaje Individual - Actualizar ventana solo cuando hay cambios??

emprear · #2 (**permalink**) 06/08/2012, 22:32

Hay una técnica específica para eso, llamada LongPolling, no sé si mi método se ajusta exactamente a eso, pero funciona, quizás se pueda optimizar. Desde ya que solo tiene sentido si la página en que se insertan los nuevos valores es diferente de la que se muestran los resultados, sino, simplemente llamas a la función ajax para recargar al hacer el insert

por un lado tenemos el index.php

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
var phpbd = 'select_empleados.php';
var div_entradas = 'entradas';
var control = 'control_cambios.php';
var tiempo = 10000;
 
/*** no editar ***/
// agrega un parámetro unico al archivo
var t;
function cargarAjax(url){
var contenidoAjax = false;
if(window.XMLHttpRequest) {
contenidoAjax = new XMLHttpRequest();
}else if(window.ActiveXObject) {
contenidoAjax = new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert('Su navegador no soporta Ajax');
}
contenidoAjax.onreadystatechange=function(){
cargaPagina(contenidoAjax);
}
cacheParam=(url.indexOf("?")!=-1)? "&"+ new Date().getTime() : "?"+ new Date().getTime();
contenidoAjax.open('GET', url+cacheParam, true);
contenidoAjax.send(null);
}
    
function cargaPagina(contenidoAjax){
if(contenidoAjax.readyState == 4 && (contenidoAjax.status==200 || window.location.href.indexOf("http")==-1)){
        if(contenidoAjax.responseText == 'si'){
        actualizaCapa(phpbd,div_entradas);
    }
 }
 
}       
 
function actualizaCapa(urlDatos,divDatos){
var actualizaAjax = false;
if(window.XMLHttpRequest) {
actualizaAjax = new XMLHttpRequest();
}else if(window.ActiveXObject) {
actualizaAjax = new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert('Su navegador no soporta Ajax');
}
actualizaAjax.onreadystatechange=function(){
cargaDatos(actualizaAjax,divDatos);
}
cacheParam=(urlDatos.indexOf("?")!=-1)? "&"+ new Date().getTime() : "?"+ new Date().getTime();
actualizaAjax.open('GET', urlDatos+cacheParam, true);
actualizaAjax.send(null);
}
    
function cargaDatos(actualizaAjax,divDatos){
if(actualizaAjax.readyState == 4 && (actualizaAjax.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(divDatos).innerHTML = actualizaAjax.responseText;
}
}
 
window.onload = t =setInterval("cargarAjax('" +control+"')", tiempo);
//]]>
</script>
</head>
<body>
<div id="entradas">
<?php
include('select_empleados.php');
?>
</div>
</body>
</html>

Explico un poco, el javascript tiene las siguientes variables

Este es el php que muestra el contenido de la base de datos, y al cual por defecto se le hace un include dentro de un div
var phpbd = 'select_empleados.php';
El nombre del div en el que se muestran y actualizarán los resultados
var div_entradas = 'entradas';
El archivo php que va a controlar si hubo cambios o no
var control = 'control_cambios.php';
El tiempo en milisegundos cada cuanto se ejecutará el setInterval (creo que 10 seg. es razonable, si se pone un valor inferior hay que ver que el server responda bien)
var tiempo = 10000;

El javascript tiene 2 funciones Ajax, con algunas diferencias, la primera controla si hubo cambios, de haberlos, invoca a la segunda para que recargue el contenedor de resultados

los php, por un lado tenemos el php que recorre y muestra el contenido de la base de datos,
select_empleados.php

Código PHP:

Ver original<?php
$sqlhostname = "localhost";
$login = "root";
$password = "";
$base = "emprear";
 
$db_connect = mysql_connect($sqlhostname,$login,$password);
$base_selection = mysql_select_db($base,$db_connect);
$consulta = "SELECT * FROM empleados ORDER BY idempleado ASC";
$req = mysql_query($consulta);
while($row = mysql_fetch_array($req)){
        extract($row);
        echo"$idempleado<br />";
    }
mysql_free_result($req);
file_put_contents('control-cambios.txt','no',LOCK_EX);
?>

no tiene nada fuera de lo comun, salvo que en la última linea utiliza file_put_contents(), para escribir en un archivo de texto control-cambios.txt el valor "no"

archivo control_cambios.php

Código PHP:

Ver original<?php
$control_cambios = file_get_contents('control-cambios.txt');
if($control_cambios == 'si'){
echo 'si';
}
?>

este archivo es el que llama la primera función de Ajax, lo que hace es leer el contenido del archivo de texto control-cambios.txt, y si su contenido es "si" enviar como responseText a Ajax el valor "si", y ponemos la condición:

Código Javascript:

Ver originalif(contenidoAjax.responseText == 'si'){
actualizaCapa(phpbd,div_entradas);
}

con lo que llamamos a la segunda función, que carga el select_empleados.php (que como ya vimos escribe "no" en el archivo de texto.
Ahora, la clave del asunto, el archivo
insertar.php

Código PHP:

Ver original<?php
$sqlhostname = "localhost";
$login = "root";
$password = "";
$base = "emprear";
 
$db_connect = mysql_connect($sqlhostname,$login,$password);
$base_selection = mysql_select_db($base,$db_connect);
$idempleado = 'xxxx';
$nombres = 'aaaa';
$departamento = 'cccc';
$sueldo = time();
$consulta = "INSERT INTO empleados (idempleado,nombres,departamento,sueldo) VALUES ('$idempleado','$nombres','$departamento','$sueldo')";
$req = mysql_query($consulta);
echo "fila insertada";
file_put_contents('control-cambios.txt', 'si', LOCK_EX);
?>

el mismo, tras insertar la fila, escribe nuevamente en el archivo de control, pero esta vez la palabra "si", con lo que se hará la revcarga del contenido.
Dependiendo de la configuración del server, el archivo control-cambios.txt necesir¡trá ser creado manualmente y tener permisos 0777.

Edito:
Hago una pequeña modificación ya que IE8/7 tieen problemas con
window.onload = t =setInterval("cargarAjax('" +control+"')", tiempo);
asi que simplemente la ultima linea de la script debe contener
setInterval("cargarAjax('" +control+"')", tiempo);
Saludos