Foros del Web - Ver Mensaje Individual

matak · #11 (**permalink**) 15/05/2009, 10:09

Buenas BlogInn,

Te he preparado un pequeño ejemplo a ver si es lo que buscas...Si me das tu correo electrónico te lo envío asi tienes los fuentes y no tienes que montarlo. De todas formas lo voy a explicar asi si le sirve a alguién más pues mucho mejor.

me he creado una base de datos de prueba

prueba.sql -->.sql file generado con Navicat 8

Código mysql:

Ver original/*
MySQL Data Transfer
Source Host: xxx.xxx.xxx.xxx
Source Database: prueba
Target Host: xxx.xxx.xxx.xxx
Target Database: prueba
Date: 15/05/2009 17:26:14
*/
 
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for videos
-- ----------------------------
DROP TABLE IF EXISTS `videos`;
CREATE TABLE `videos` (
  `id` bigint(10) NOT NULL auto_increment,
  `titulo` varchar(255) collate latin1_spanish_ci default NULL,
  `reproductor` text collate latin1_spanish_ci,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1 COLLATE=latin1_spanish_ci;
 
-- ----------------------------
-- Records 
-- ----------------------------
INSERT INTO `videos` VALUES ('1', 'Jota de Pepe Cester', '<object width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/JUVehl6mf-c&hl=es&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/JUVehl6mf-c&hl=es&fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>');
INSERT INTO `videos` VALUES ('2', 'Aguilas', '<object width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/wRS53F8nGsg&hl=es&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/wRS53F8nGsg&hl=es&fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>');
INSERT INTO `videos` VALUES ('3', 'Jotas de Jorge Sanchez\r\n', '<object width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/12ZgKrRn8dU&hl=es&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/12ZgKrRn8dU&hl=es&fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>');

primero de todo me creo la función que generará el objeto ajax

Código javascript:

Ver original//Funcion que crea el objeto ajax
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
    }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

Ahora implementamos la función que enviará la petición asincrona al servidor, nota que 'ajax' la creamos como vble global inicializada a null. De esta forma podemos controlar su estado para poder realizar peticiones simultaneas. En este caso no creo que se te de el caso, pero para futuros proyectos si reutilizas este código te permitirá hacer multiple procesos ajax sin que se machaquen unos a otros

Código javascript:

Ver originalvar ajax=null; //vble global
 
function peticion(url,divcontenido){
    if (ajax==null) {
      objDestino=document.getElementById(divcontenido)
      ajax=objetoAjax();
      ajax.open("POST", url, true);
      ajax.onreadystatechange=function() {
          if (ajax.readyState==4) {
              objDestino.innerHTML = ajax.responseText
              ajax = null
          }else{
            objDestino.innerHTML = '<img src="wait.gif" /><font style="font-family:Verdana;font-weight:bold;font-size-16pt;">Cargando Video...</font>'
          }
      }
      ajax.send(null)
    }else{
      setTimeout("f1('"+url+"','"+divcontenido+"')",10)      
    }
}

Fíjate que en la función mientras la petición no esta en el estado 4 coloco una imagen en el contenido

Código javascript:

Ver originalif (ajax.readyState==4) {
    objDestino.innerHTML = ajax.responseText
    ajax = null
}else{
    objDestino.innerHTML = '<img src="wait.gif" /><font style="font-family:Verdana;font-weight:bold;font-size-16pt;">Cargando Video...</font>'
}

esto es puramente estetico y simplemente avisa al cliente de que se esta cargando el video. En mi caso wait.gif es un aspa que da vueltas coon un texto que dice 'Cargando video...'

Seguimos pues construyendo el select para seleccionar los vídeos y creamos un objeto contenedor, que en este caso es in <div> donde se cargarán los videos.

Código html:

Ver original<select id="videos" name="videos" onchange="if (this.value=='X') document.getElementById('reproductor').innerHTML=''; else peticion('cargarvideo.php?id='+this.value,'reproductor');">
<option value='X'>&nbsp;&nbsp;[Seleccione un Vídeo...]&nbsp;&nbsp;</option>
<?PHP
$sql = 'SELECT * FROM `videos`';
$consulta=mysql_query($sql,$db) or die ();
while ($row=mysql_fetch_array($consulta))
{
    echo '<option value='.$row["id"].'>'.$row["titulo"].'</option>';
}
?>
</select>
<div id="reproductor">
</div>

Solo faltaría el archivo php que procesará el servidor en la petición

cargarvideo.php

Código php:

Ver original<?PHP
header('Content-Type: text/xml; charset=ISO-8859-1'); //Para visualizar correctamente caracterés especiales
 
  $db = mysql_connect($host,$usser,$pass) or die ("No se puede conectar con el servidor");
 
  mysql_select_db('prueba') or die ("No se puede seleccionar la base de datos");
 
  $sql = "SELECT * FROM videos WHERE id='".$_REQUEST['id']."'";
  
  $consulta=mysql_query($sql,$db) or die (mysql_error($db));
  
  $row=mysql_fetch_array($consulta);
  
  echo $row['reproductor'];
?>

todo junto quedaría

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" lang="en" xml:lang="en">
<head>
 
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<SCRIPT LANGUAGE="JavaScript">
 
var ajax=null; //vble global
 
//Funcion que crea el objeto ajax
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
    }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function peticion(url,divcontenido){
    if (ajax==null) {
      objDestino=document.getElementById(divcontenido)
      ajax=objetoAjax();
      ajax.open("POST", url, true);
      ajax.onreadystatechange=function() {
          if (ajax.readyState==4) {
              objDestino.innerHTML = ajax.responseText
              ajax = null
          }else{
            objDestino.innerHTML = '<img src="wait.gif" /><font style="font-family:Verdana;font-weight:bold;font-size-16pt;">Cargando Video...</font>'
          }
      }
      ajax.send(null)
    }else{
      setTimeout("f1('"+url+"','"+divcontenido+"')",10)      
    }
}
</SCRIPT>
<?PHP
 
 $db = mysql_connect($host,$usser,$pass) or die ("No se puede conectar con el servidor");
 
 mysql_select_db('prueba') or die ("No se puede seleccionar la base de datos");
?>
</head>
<body>
<select id="videos" name="videos" onchange="if (this.value=='X') document.getElementById('reproductor').innerHTML=''; else peticion('cargarvideo.php?id='+this.value,'reproductor');">
<option value='X'>&nbsp;&nbsp;[Seleccione un Vídeo...]&nbsp;&nbsp;</option>
<?PHP
$sql = 'SELECT * FROM `videos`';
$consulta=mysql_query($sql,$db) or die ();
while ($row=mysql_fetch_array($consulta))
{
    echo '<option value='.$row["id"].'>'.$row["titulo"].'</option>';
}
?>
</select>
<div id="reproductor">
</div>
</body>
</html>

cargarvideo.php

Código php:

Ver original<?PHP
header('Content-Type: text/xml; charset=ISO-8859-1'); //Para visualizar correctamente caracterés especiales
 
  $db = mysql_connect($host,$usser,$pass) or die ("No se puede conectar con el servidor");
 
  mysql_select_db('prueba') or die ("No se puede seleccionar la base de datos");
 
  $sql = "SELECT * FROM videos WHERE id='".$_REQUEST['id']."'";
  
  $consulta=mysql_query($sql,$db) or die ();
  
  $row=mysql_fetch_array($consulta);
  
  echo $row['reproductor'];
?>

Lo dicho, si quieres que te envie los fuentes y demás dime tu e-mail

Ya me dirás si te funciona. yo le he probado y me ha funcionado

Saludos