Voy a partir de la base de que utilizas jQuery para la consulta JSON o AJAX al servidor. Y me voy a centrar en la "carga" del código javascript. Pero obviamente, no importa la librería o código que uses para el JSON o AJAX. Hay muchísima literatura en internet sobre ese tema.
Ejemplo de carga de datos
Empezaré con un ejemplo de carga de datos tipo texto, que es lo más habitual. Y luego pondré un ejemplo de carga de código javascript.
function js_actualizar_top_webs(){
var url_json = 'json_top_webs.php?mes='+$('#select_mes').val();
$.getJSON(
url_json,
function(datos){
$('#div_top_webs').html(datos.table_webs);
}
);
}
Imaginemos que en nuestra web de ejemplo tenemos un control tipo lista desplegable (select) que permite al usuario escoger un mes del año, y queremos que nuestra página recargue un <div id="'div_top_webs'"></div> con la lista del top 10 de webs de ese mes. Es un ejemplo clásico de recarga de datos dinámica usando JSON o AJAX.
Para ello construimos una función llamada js_actualizar_top_webs, que llamaremos al cambiar el valor de ese select. Esta función tal como está definida en el código de ejemplo hace una llamada JSON mediante el objeto $ de jQuery y cuando los datos se hayan recibido por completo ejecutará el código en rojo, en dónde "datos" es un objeto de javascript (no un array!!) que contiene diferentes "propiedades" con los datos enviados. En este caso, suponemos que el archivo de PHP que ha sido llamado devuelve un string llamado "table_webs" que contiene el código HTML de un "<table>" con la lista de webs que queremos mostrar.
Para "obtener" el valor de ese string HTML simplemente llamamos a datos.table_webs y lo colocamos como "contenido" de "div_top_webs" mediante el método .html() de jQuery. ¿Sencillo, no?
Ejemplo de carga de código javascript
Bueno, vamos ahora a algo que "cuesta" un poquitín más. Bueno, de hecho a mí me ha hecho gastar casi 8 horas de cansada búsqueda por internet y de leer mucho y probar mucho, hasta llegar a lo que te voy a poner aquí! ;)
Abajo tienes el código anterior ligeramente cambiado: hemos añadido unas líneas de código más, con el fin de poder cargar y ejecutar un código de javascript elaborado en el lado servidor.
function js_actualizar_top_webs(){
var url_json = 'json_top_webs.php?mes='+$('#select_mes').val();
$.getJSON(
url_json,
function(datos){
$('#div_top_webs').html(datos.table_webs);
if (window.execScript) window.execScript(datos.script_leyenda);
else window.eval(datos.script_leyenda);
}
);
}
Puedes ver en rojo dos nuevas líneas que corresponden a una sentencia condicional, y esto es necesario para ejecutar un código u otro según estemos en FireFox o en Internet Explorer (como mínimo estos dos navegadores). Para ambos casos el código de javascript pasado es el mismo y lo recuperamos de nuevo mediante jQuery con la propiedad datos.script_leyenda (que habremos rellenado desde el PHP con el código javascript que necesitemos ejecutar en nuestra web).
La diferencia radica en que Internet Explorer ejecutará el código de javascript mediante el método window.execScript(), mientras que FireFox ejecutará el código al usar el método window.eval(), en ambos casos pasando como argumento el código javascript que queremos ejecutar.
Otro aspecto importante y que tal vez pase desapercibido a primera vista es que en ambos casos ejecutamos sendos métodos sobre el objeto window. Eso es fundamental (me llevó más de una hora leyendo descubrirlo), para que el código javascript a ejecutar pase a estar "disponible" desde otros "ámbitos" de la misma página. De esta forma, si por ejemplo, dentro de ese código cargado dinámicamente definimos una función llamada "js_mostrar_leyenda()", si queremos usarla en el resto de la página, deberemos llamarla así: window.js_mostrar_leyenda();
Estoy seguro de que a más de uno le va a ir de perlas estas 3 líneas de código! al menos a mí me va a dar mucha potencia de programación con JSON y javascript. Y sinceramente, cuesta encontrar información "actualizada" en internet. Ya sabes que este tipo de información técnica (especialmente cross-browser) se desfasa con facilidad, con la salida de nuevas versiones de navegadores continuamente!! Así que lo que es válido hoy deja de serlo al cabo de 2 años :(
Te invito a que comentes cualquier sugerencia que tengas al respecto, eh! seguro que a todos nos interesa (temas de compatibilidad, por ejemplo). Si probando el código ves que te funciona en otros navegadores, por favor, coméntalo brevemente ;)
Actualización 2012-mar-06
Bajo petición de un comentarista añado a continuación un ejemplo de cómo debería ser el código PHP del archivo
json_top_webs.php
que uso en los ejemplos de arriba.
1 <?php
2
3 $ret=array(
4 'table_webs'=>'<p>table</p>',
5 'script_leyenda'=>"alert('Hi world');"
6 );
7
8 echo json_encode($ret);
9
10 ?>No necesita mucha explicación, pero por los que empiezan con el PHP:
- definimos un array con dos elementos que llevan el nombre que luego usaremos en el javascript (como "datos.table_webs").
- fijaros en el valor de cada uno de ellos. El primero es código HTML tal cuál, y el segundo es CUALQUIER instrucción o instrucciones de javascript, desde un simple alert() hasta definir funciones si es necesario.
- por último hacemos un echo del array pasándolo primero por la función nativa de PHP json_encode() que lo que hace es reescribir los datos en formato JSON (ya sabéis: con llaves, comillas dobles, y comas, escapando los valores que haga falta). Cuidado porqué esta función creo que no estaba en algunas versiones de PHP 4.x ! pero en fin, quiero pensar que hace años que todo el mundo actualizó ya a PHP 5.x
Un saludo!!!
SERGI
