Código fuente Ya.

Votación de un video y actualización de una tabla mysql en forma asincrónica (ajax)


El objetivo del concepto es mostrar una lista de videos de youtube y permitir que el visitante pueda
votar los videos que le interesan. Cuando se vota se incrementa en uno la cantidad de votos positivos
que se almacena en una tabla en el servidor. Todo esto se hace en forma asincrónica para evitar
que se refresque la página en forma completa y por ende se corte el video que el usuario está viendo
en ese momento.

Creamos la tabla videos con la siguiente estructura:
mysql_query("create table videos (
                            codigo int auto_increment primary key,
                            votos int default 0,
                            nombre varchar(250)
                         )",$conexion) or
  die("Problemas :".mysql_error());

El código se incrementa en forma automática y el campo votos se inicializar con cero por defecto.

Luego cargamos tres registros como ejemplo con las direcciones de tres videos de youtube:

mysql_query("insert into videos (nombre) value ('http://www.youtube.com/v/RjQcN-yKKYY')",$conexion) or
  die("Problemas :".mysql_error());

mysql_query("insert into videos (nombre) value ('http://www.youtube.com/v/aCNSWwAJNZE')",$conexion) or
  die("Problemas :".mysql_error());

mysql_query("insert into videos (nombre) value ('http://www.youtube.com/v/6iMOrddmdE8')",$conexion) or
  die("Problemas :".mysql_error());

Primero nos conectamos a la base de datos y rescatamos todos los registros de la tabla videos:
$conexion=mysql_connect("localhost","pepe","123456") or
  die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
  die("Problemas en la selección de la base de datos");
$reg=mysql_query("select codigo,votos,nombre from videos") or
  die(mysql_error());

Mediante un while procedemos a imprimir cada video, un hipervínculo para permitir votar el video y en un
div mostramos los votos actuales del video.


Para mostrar un video utilizamos la sintaxis que nos provee youtube, solo variamos las propiedades src y value
para indicar un video en particular:
  echo '<div class="video">';
  echo '<object width="425" height="355"><param name="movie" value="'.$registro['nombre'].
       '"></param><param name="wmode" value="transparent"></param><embed src="'.$registro['nombre'].
       '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>';  
  echo '</div>';

El hipervínculo para votar llama a una función en javascript que le pasa el código de video y el
identificador del div donde debe mostrar la cantidad de votos actuales (como puede haber varios
videos dentro de la misma página utilizamos el contador $contador para numerar los distintos div:
  echo "<a href=\"javascript:votar($registro[codigo],'resultado".$contador."')\">Votar</a>";

De forma similar utilizamos un div para mostrar los votos actuales del video en cuestión:
  echo "<div class=\"resultado\" id=\"resultado".$contador."\">$registro[votos]</div>";

La función votar recibe el código de video y el div donde se debe mostrar la cantidad de votos
del video votado. Guardamos en una varible globar el div para el resultado:
  resultado=resul;

Creamos un objeto XMLHttpRequest:
  conexion1=crearXMLHttpRequest();
Indicamos el nombre de la función que procesará los eventos del objeto:
  conexion1.onreadystatechange = procesarEventos;
Indicamos el modo de conexión y el nombre del archivo a llamar, junto con el código de video y un
valor aleatorio para evitar que el navegador retorne el valor almacenado en la caché:   
  var aleatorio=Math.random();
  conexion1.open('GET','procesarvoto.php?cod='+cod+"&aleatorio="+aleatorio, true);
Enviamos la petición:
  conexion1.send(null);

La función procesarEventos obtiene la referencia del div donde debe mostrarse el contador:
  var resultados = document.getElementById(resultado);
Mientras el estado del objeto sea distinto a 4 mostramos un mensaje que se está procesando el
voto:
    resultados.innerHTML = 'Proc...';
Luego mostramos el valor devuelto por el servidor:
    resultados.innerHTML = conexion1.responseText;

Este archivo se llama en forma asincrónica.
Primero nos conectamos con el servidor y seleccionamos la base de datos:
$conexion=mysql_connect("localhost","pepe","123456") or
  die("Problemas en la conexion");
mysql_select_db("codigofuenteya",$conexion) or
  die("Problemas en la selección de la base de datos");

Incrementamos en 1 el campo votos del video cuyo código llega como parámetro a esta página:
mysql_query("update videos set votos=votos+1 where codigo=$_REQUEST[cod]",$conexion) or
  die(mysql_error());

Por último rescatamos la cantidad de votos actuales del video respectivo:
$reg=mysql_query("select votos from videos where codigo=$_REQUEST[cod]") or
  die(mysql_error());
$registro=mysql_fetch_array($reg);
Imprimimos el valor a retornar:
echo $registro['votos'];