Abrir reproductor en ventana nueva mediante javascript

Necesitaba que un reproductor basado en jQuery se cargase en un popup y desapareciese de la ventana original para que el usuario pudiese navegar por la página y seguir escuchando las canciones sin interrupción.

Decidí usar variables de sesión. En la página original condicioné que se mostrase el reproductor a si la siguiente variable era falsa:


if Session("ventana_reproductor_abierta") = false then

...

end if


Al reproductor le añadí un enlace y usé jQuery para enlazarle el evento.


//Busco el enlace al que hay que añadirle el evento click.

var botonReproductorVentanaNueva = $('#columnaUno #reproductor-ventana-nueva');

botonReproductorVentanaNueva.click(function(){

abrePopup('carga_reproductor_ventana.asp','Titulo',300,400);


});

function abrePopup(url,titulo,h,w){

newwindow=window.open(url,titulo,'height=' + h + ',width=' + w);
if (window.focus) {newwindow.focus()}
return false;

}


El script ASP 'carga_reproductor_ventana.asp' se asegura de establecer la variable de sesión a verdadero, de manera que al recargarse la página original no se muestre el reproductor:


Session("ventana_reproductor_abierta") = true


Ahora viene la parte difícil. Necesitamos que cuando la ventana abierta se cierre, se devuelva la variable de sesión a falso y se recargue la página que lanzó el popup. Para ello necesitamos una función poco documentada llamada window.onbeforeunload que se lanza cuando uno cierra la ventana. Además necesito llamar a otro script ASP mediante AJAX que se encargará de devolver la variable de sesión al valor adecuado.


//Funciones para el reproductor cargado en un popup.

$(document).ready(function(){

//Controlo el evento que se dispara cuando intenta quitar la página.

window.onbeforeunload = function() {

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cierra_ventana_reproductor.asp"

});

window.opener.location.reload();


}

});


Como se ve, window.opener permite acceder a la ventana que llamó al popup, y location.reload() recarga la página. El script 'cierra_ventana_reproductor.asp' establece la variable de sesión al valor necesario.


<%

Session("ventana_reproductor_abierta") = false

%>

Guardar una cuenta de reproducciones usando AJAX en ASP

Primero localizamos el botón de play del reproductor y asociamos una función al evento click:


var botonPlay = $('#player_play_archivos');

$(botonPlay).click(function(){

$('#jquery_jplayer').play();

//Necesito los datos de la canción que se está escuchando en este momento.

almacenaReproduccion();

});


La función almacenaReproduccion() coge el nombre del archivo (en el ejemplo, la ruta completa), y la envía por AJAX al servidor.


function almacenaReproduccion(){


var cancion = myPlayList[playItem].filename;

//Los dos otros datos que necesito guardar son el id de la sesión y la fecha y hora
// actual, pero los recojo en el servidor.

$.ajax({

contentType: 'application/x-www-form-urlencoded',
type: "GET",
url: "cuenta_reproduccion.asp",
data: "archivo=" + myPlayList[playItem].filename,

});


}


Como se ve, se llama a un archivo llamado 'cuenta_reproduccion.asp'. En el servidor añado el ID de la sesión actual y la fecha y la hora en la que se ha reproducido el archivo.



dim archivo
archivo = LimpiarRequest(Request("archivo"))

dim intCurrentPos, intFileNamePos

'Cojo el nombre del archivo encontrando la última barra
Do

intCurrentPos = InStr(intCurrentPos + 1, archivo, "/", vbTextCompare)
If intCurrentPos <> 0 then
intFileNamePos = intCurrentPos
else
intFileNamePos = intFileNamePos + 1
Exit Do
End If
Loop

dim FileName

If intFileNamePos <> 1 then

FileName = mid(archivo, intFileNamePos, len(archivo) - intFileNamePos + 1)

End If

'FileNamewExt contiene el nombre del archivo, sin la ruta.

'Necesitamos tanto el id de la sesión y la fecha y hora actuales.

dim idSesion,momentoActual

idSesion = Session.SessionID

momentoActual = now()

'Envío los datos a la consulta que realiza la inserción.

dim resultado

set resultado = setCuentaReproduccion(FileName,idSesion,momentoActual)

'response.write(resultado)

Problemas con la sesión y objetos desconocidos al trabajar con AJAX en PHP

En un script, llamémosle script1.php, llamaba mediante jQuery a otro script, llamémosle script2.php, intentaba acceder a los datos de la variable $_SESSION. A pesar de establecer el session_start(), y ver mediante el Firebug que podía ver la información, no podía acceder por programación a los atributos de la clase con la que tenía que trabajar. El Firebug la definía de la siguiente manera:

__PHP_Incomplete_Class Object ( [__PHP_Incomplete_Class_Name] ...

Obviamente sugiere que la clase no existe. La solución está en cargar un include o un require con la definición de la clase antes de session_start().

Ajax y problemas con el encoding

En algunos casos, aunque la base de datos parezca correcta, los navegadores no muestran bien los datos o tienen problemas con la codificación cuando se usan técnicas de Ajax. Para solucionarlo, hay que asegurarse de que las pequeñas páginas php que se encargan de realizar las operaciones de Ajax lleven un header apropiado. Además, conviene convertir los $_GET y los $_POST que se pasen desde javascript al charset correcto:

header('Content-type: text/html; charset=iso-8859-1');
//+
$texto = iconv("UTF-8", "iso-8859-1", $_POST['texto']);

Pasar un array de PHP a JavaScript mediante JSON

Por algún motivo, pasar arrays de PHP a JavaScript es más complicado de lo que debería ser. Por fortuna, para arreglar el asunto podemos traducir el array de PHP a JSON.

Cualquier servidor de PHP mayor que el 5 tiene la siguiente función:

$arrayAJS=json_encode($arrayEnPHP);

Nota muy importante: nada más pasar el array PHP a JSON y enviarlo como parámetro, la función javascript lo considera un array normal y corriente. No hace falta deserializarlo.

Crear Request Object para recibir JSON usando AJAX

Omito el lado del servidor, pero el archivo php debe generar un texto que respete la sintaxis.

var the_object;
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.send(null);
http_request.onreadystatechange = function () {
   if ( http_request.readyState == 4 ) {
       if ( http_request.status == 200 ) {
           var inputJSON=http_request.responseText;

           var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
           text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
           eval('(' + inputJSON + ')');

       } else {
           alert( "There was a problem with the URL." );
       }
       http_request = null;
   }
};

Es conveniente limpiar la cadena enviada por el servidor para evitar posibles inyecciones de código.

Función para crear un XML Request Object válido

function devuelveXMLRequestObject {
  xmlhttp=false;
  this.requestFile = file;
  this.encodeURIString = true;
  this.execute = false;
    this.AjaxFailedAlert = "Funcionalidades no soportadas.";

  if (window.XMLHttpRequest) {

      this.xmlhttp = new XMLHttpRequest();
      if (this.xmlhttp.overrideMimeType) {
          this.xmlhttp.overrideMimeType('text/xml');
      }
  }
  else if (window.ActiveXObject) { 

  //Internet Explorer

        try {
          this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
          try {
              this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
              this.xmlhttp = null;
          }
      }
      if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') {
          this.xmlhttp = new XMLHttpRequest();
          if (!this.xmlhttp){
              this.failed = true;
          }
      }
  }
  return this.xmlhttp ;
}

Ejemplo de envío de datos mediante POST en AJAX

A pesar de la carga al servidor que implica, a menudo conviene enviar los parámetros para una operación mediante POST en vez de GET, ya que el GET escribe los parámetros en la url.

Para realizar una Request usando post, también debemos componer la lista de de parámetros como quedaría en la URL:

campo1=valor
$campo2=valor

Por ejemplo:

'campo1='+document.getElementById('campo1').value
+ '&campo2='+document.getElementById('campo2').value

Posteriormente, debemos enviar esos valores mediante la función send del objeto request.

ajax.open ('POST', url, true);
ajax.onreadystatechange=funcion;
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(valores);

El setRequestHeader es útil en caso de que el Content-Type se quiera cambiar a XML en vez de dejarlo por defecto en el fichero php al que se llame, por razones de prueba.

Sumario de AJAX

Qué constituye el corazón de AJAX y la diferencia con la programación tradicional de páginas web:

1) El usuario visita la página
2) El usuario escribe algo en una caja de texto, pulsa un botón o arrastra algo con el cursor
3) Lo que el usuario haga en el punto 2 provoca que JavaScript envíe una petición al servidor
4) El servidor procesa la petición (usando PHP, por ejemplo), devolviendo algún dato
5) JavaScript recibe la información y la usa para actualizar la página, sin cargarla otra vez