Ejecutar código JavaScript y CSS añadido/cargado mediante AJAX

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :)

En ocasiones, limitados por el diseño de nuestra aplicación web, debemos utilizar tecnología AJAX para cargar de manera asincrónica no solo datos a colocar en el body o demás tareas comunes, sino que necesitaremos cargar determinadas funciones JavaScript y quizá código CSS y, lógicamente, hacer que todo ese código añadido sea funcional. Nuestra necesidad es sencilla: enviar una petición AJAX a un archivo del servidor, que éste nos devuelva algunas funciones JS y código CSS y, al recibir esos datos, el navegador los disponga para ser utilizados.

Demás no está aclarar que en la GRAN mayoría de los casos que esta situación se presenta, es posible solucionar nuestro problema simplemente definiendo estas funciones JavaScript y el código CSS en la página llamadora y utilizarlas cuando sea necesario, pero claro, todo depende del contexto de nuestro sistema y las necesidades del desarrollo.

A continuación pueden ver un ejemplo de como se podría solucionar este problema. El ejemplo esta compuesto de 2 scripts; el script demo.php será en encargado de crear el objeto AJAX y abrir una conexión asincrónica con demo2.php el cual le devolverá una estructura XML contenedora del código JS y CSS en nodos separados. Cuando el cliente reciba este XML, lo parseará y colocara el código JS y CSS en etiquetas <script> y <style> respectivamente, creadas para tal fin. La función que hará todo este trabajo es traeCodigo(), la cual analizaré a continuación.

demo2.php

<?php
$xml="<?xml version='1.0' encoding='ISO-8859-1'?>";
$xml.="<code>";
$xml.="<javascript><![CDATA[function cambiaClase() { document.body.className=\"rojo\" }]]></javascript>";
$xml.="<css><![CDATA[.rojo { background-color:#FF0000; }]]></css>";
$xml.="</code>";
header("Content-type: text/xml");
echo $xml;
?>

demo.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin título</title>
<script type="text/javascript">
function nuevoAjax()
{
        /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
        lo que se puede copiar tal como esta aqui */
        var xmlhttp=false;
        try
        {
                // Creacion del objeto AJAX para navegadores no IE
                xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
                try
                {
                        // Creacion del objeto AJAX para IE
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(E) { xmlhttp=false; }
        }
        if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); }

        return xmlhttp;
}

if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0; // IE
else navegador=1; // Demas

function traeCodigo()
{
        ajax=nuevoAjax();
        ajax.open("POST", "demo2.php", true);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        ajax.send(null);

        ajax.onreadystatechange=function()
        {
                if (ajax.readyState==4)
                {
                        // Obtengo el XML y separo sus nodos
                        var resp=ajax.responseXML;
                        var javascript=resp.getElementsByTagName("javascript")[0].childNodes[0].data;
                        var css=resp.getElementsByTagName("css")[0].childNodes[0].data;
                        
                        // Creo el nuevo JS
                        var etiquetaScript=document.createElement("script");
                        document.getElementsByTagName("head")[0].appendChild(etiquetaScript);
                        etiquetaScript.text=javascript;
                        
                        // Creo el nuevo CSS
                        var etiquetaStyle=document.createElement("style");
                        document.getElementsByTagName("head")[0].appendChild(etiquetaStyle);
                        
                        if(navegador==0)
                        {
                                var contenidoCSS=css.split("{");
                                var ultimaEtiquetaStyle=document.styleSheets[document.styleSheets.length-1];
                                ultimaEtiquetaStyle.addRule(contenidoCSS[0], "{"+contenidoCSS[1]);
                        }
                        else
                        {
                                var contenidoCSS=document.createTextNode(css);
                                etiquetaStyle.appendChild(contenidoCSS);
                        }
                }         
        }
}
</script>
</head>

<body>
<a href="#" onclick="traeCodigo()">Trae código JavaScript y CSS</a>
<br>
<a href="#" onclick="cambiaClase()">Ejecuta código JavaScript</a>
</body>
</html>

Para descargar el código completo haz click aquí, y para ver un demo online de su funcionamiento click aquí.

Analizando la función traeCodigo()

La función traeCodigo() recibirá desde demo2.php una estructura XML en la cual el nodo <javascript> contendrá el código JavaScript puro y el nodo <css> el código CSS puro. Lo primero que hacemos en esta función es crear el nuevo objeto AJAX para abrir una conexión vía POST con demo2.php. Como no necesitamos enviar información alguna al script del servidor, en el método send del objeto colocamos null como parámetro.
Cuando el cliente recibe la respuesta XML del servidor lo primero que hacemos es colocar el contenido del nodo <javascript> en la variable "javascript", y el contenido del nodo <css> en la variable "css" con fines de facilitar la manipulación de los datos:

var resp=ajax.responseXML;
var javascript=resp.getElementsByTagName("javascript")[0].childNodes[0].data;
var css=resp.getElementsByTagName("css")[0].childNodes[0].data;

Ahora crearemos la etiqueta <script> mediante el método createElement de DOM, la agregaremos a nuestro <head> con appendChild y luego añadiremos a la etiqueta <script> creada el contenido que hemos obtenido en la variable "javascript".

var etiquetaScript=document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(etiquetaScript);
etiquetaScript.text=javascript;

Hasta aquí todo resulta sin complicaciones; ya tenemos el código JavaScript cargado en demo.php y listo para ser utilizado. Empezamos entonces a trabajar con el CSS. Lo primero que hacemos es crear la etiqueta <style> necesaria y, al igual que antes, adicionarla al <head>.

var etiquetaStyle=document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(etiquetaStyle);

Si el navegador del visitante es Internet Explorer, debemos añadir el contenido a la etiqueta <style> mediante el método addRule. Este método recibe como primer parámetro el nombre de la clase CSS que se desea crear, y como segundo parámetro la definición de la misma. Para poder enviarle esta información, debemos parsear el contenido de la variable "css" utilizando el método split. Por otra parte, addRule pertenece al objeto styleSheet, y como era de esperarse, no podremos referenciar a la hoja de estilos mediante la variable "etiquetaStyle" anteriormente creada, sino que el IE tiene su propia forma con la propiedad styleSheets:

if(navegador==0)
{
        var contenidoCSS=css.split("{");
        var ultimaEtiquetaStyle=document.styleSheets[document.styleSheets.length-1];
        ultimaEtiquetaStyle.addRule(contenidoCSS[0], "{"+contenidoCSS[1]);
}

Para finalizar, si el navegador del visitante es culquier otro que no sea IE crearemos un nodo de texto con el método createTextNode asignándole el contenido de la variable "css", y añadiremos ese nodo de texto a la etiqueta <style> que ya habíamos creado.

else
{
        var contenidoCSS=document.createTextNode(css);
        etiquetaStyle.appendChild(contenidoCSS);
}

Acerca del texto

Autor: Daniel E. Pisano.
Este contenido se ha publicado bajo la licencia que figura aquí.