Nuestro guestbook está trabajando bastante bien. Sin embargo, todavía hay una cosa que podemos hacer para mejorarlo: Ahora mismo, si dos usuarios tienen la página abierta y uno de ellos escribe algo, el otro usuario tendría que darle refresh al browser para ver el nuevo mensaje (puedes hacer la prueba abriendo la página en dos tabs diferentes).

Sin embargo, usando un poquito de AJAX podríamos hacer que la página automáticamente busque los mensajes nuevos y los agregue al muro, sin tener que darle refresh al browser. Esto es lo que hacen páginas como Facebook y Twitter.

¿Qué es AJAX y cómo funciona?

El término AJAX proviene de Javascript y XML asíncrono (hoy día AJAX puede funcionar sin XML, pero se sigue usando este acrónimo por tradición).

AJAX nos permite intercambiar información con nuestro servidor web utilizando Javascript, que es un lenguaje de programación que se ejecuta en el navegador (Javascript es un tema inmenso por sí solo, en este taller solo lo veremos por encima).

Quiero los últimos mensajes

Nuestra aplicación va a funcionar de la siguiente manera:

Cuando la página carga va a mostrar todos los mensajes que se han publicado hasta el momento. Luego, utilizaremos AJAX para comunicarnos con el servidor cada 30 segundos y preguntarle si hay mensajes nuevos por agregar al muro.

Nota: Esta es una práctica que se conoce como "javascript polling". Hay otras técnicas que nos permiten conseguir el mismo resultado sin consumir tantos recursos, pero requieren de más trabajo y conocimientos.

Para empezar, vamos a crear un script en PHP que solo nos muestre los mensajes que se han publicado después de una fecha específica. El archivo se llamará 'mensajes_desde.php' y tomará un parámetro mediante GET llamado fecha, de esta manera:

http://midominio.com/mensajes_desde.php?fecha=2012-02-13 11:30:22

Crea un archivo llamado 'mensajes_desde.php' y agrega el siguiente código:

<?php  
  //Validar que se haya mandado una fecha
  if(!$_GET[fecha]) {
    die('Se debe especificar una fecha de inicio.');
  }

  //Convertir la fecha a timestamp
  $fecha = strtotime($_GET[fecha]);
  if(!$fecha) {
    die('Formato incorrecto para la fecha.');
  }

  // Datos para la conexion
  $host = 'mysql_host';
  $database = 'mysql_database';
  $username = 'mysql_user';
  $password = 'mysql_pd';
  
  // Conectarse a MySQL
  $link = mysql_connect($host, $username, $password);
  if (!$link) {
      die('Error al conectarse a mysql: ' . mysql_error());
  }
  
  // Seleccionar nuestra base de datos
  $db_selected = mysql_select_db($database, $link);
  if (!$db_selected) {
      die ('Error al abrir la base de datos: ' . mysql_error());
  }
  
  // Buscar todos los mensajes desde la fecha especificada
  $query = sprintf("SELECT * from guestbook WHERE fecha_publicacion > '%s' 
    ORDER BY fecha_publicacion DESC", strftime('%F %H:%M:%S', $fecha));
  $result = mysql_query($query);
  if (!$result) {
    die('Query invalido: ' . mysql_error());
  }

  // Desplegar cada comentario como HTML
  while ($fila = mysql_fetch_assoc($result)) {
    echo sprintf('
      <div class="mensaje">
        <p><span class="autor">%s:</span> %s</p>
        <p class="fecha">%s</p>
      </div>',
      htmlspecialchars($fila['nombre']), 
      htmlspecialchars($fila['mensaje']), 
      $fila['fecha_publicacion']
    );
  }

  mysql_free_result($result);
?>

(Recuerda que debes cambiar los datos de conexión para usar los valores de tu hosting.)

Si vemos el código nos daremos cuenta que empezamos validando dos cosas:

1. Que el parámetro $_GET[fecha] no esté en blanco.
2.  
3. Que la fecha tenga el formato correcto. Para esto utilizamos la función strtotime(), que da falso si PHP no puede convertir la fecha a timestamp.

El resto del código es idéntico a nuestro programa anterior, con la excepción del query:

$query = sprintf("SELECT * from guestbook WHERE fecha_publicacion > '%s' 
    ORDER BY fecha_publicacion DESC", strftime('%F %H:%M:%S', $fecha));

Como puedes observar, agregamos el comando WHERE para decirle a MySQL que solo nos muestre los mensajes que se hayan publicado después de la fecha que le estamos dando.

Agreguemos Javascript

Ahora solo queda escribir el código Javascript que cada 30 segundos le pregunte al servidor si hay mensajes nuevos y los agregue al muro.

Abre el archivo donde tienes tu formulario y agrega el siguiente código dentro del elemento <head>: