Rutarelativa

Publicidad

Anotaciones reducidas

  • La vida en un día: Película de un día en la Tierra La vida en un día: Película de un día en la Tierra

    La vida en un día -Life in a day- es una película hecha por los propios usuarios de Youtube, que durante el día 24 de Julio del 2010 grabaron las cosas que pasaban en su vida durante ese día, y el director Kevin McDonald ha reunido en forma de película de un día en la Tierra.

    De una hora y media de duración, veremos todo tipo de escenas en todas las partes del mundo, con una emotiva visión del mundo real tanto con sus cosas bellas y buenas, como con la más cruda visión del ser humano y su realidad.

    [La vida en un día: Película de un día en la Tierra]

  • Video: Las posibilidades de Kinect Video: Las posibilidades de Kinect

    Cuando oímos hablar de Kinect, no podemos evitar pensar en un "simple" aparato de detección de movimientos para videojuegos, y en cierto modo es así.

    Lo bueno es que Microsoft ha lanzado una SDK de Kinect para que los usuarios puedan crear aplicaciones que exploten las capacidades del dispositivo, dando lugar a miles de ideas.

    El siguiente video es al fin y al cabo con fines publicitarios, pero nos da que pensar acerca de las aún sin explotar posibilidades de Kinect. Disfrutadlo.

    [Video: Las posibilidades de Kinect]

  • La historia de los Exploradores Web La historia de los Exploradores Web

    Desde prácticamente los comienzos de Internet los Exploradores Web o Navegadores web nos han acompañado, haciendo las veces de herramientas indispensables para una navegación que a cada año que pasa se hace más cómoda y más intuitiva.

    En Testking encuentro una imágen que contiene un gran esquema de la historia de los Exploradores Web desde el primer Nescape en 1994 hasta los navegadores modernos de este año 2011.

    Una imágen interesante para conocer cuál ha sido la evolución en éste área.

    [La historia de los Exploradores Web]

Últimos comentarios

  • Avatar del usuario Alberto Alberto Hola Sergio, Excelente tu post, llegué a ti debido que quiero...
  • Avatar del usuario aiko aiko Hola, yo uso esta calculadora saber cuánto para enviar y recibir:...
  • Avatar del usuario Samir Jalabe Samir Jalabe Buenas quien me ayuda hacer un rombo en Php por favor de antemano...
  • Avatar del usuario andres andres y como los recibes en javascript?
  • Avatar del usuario sdasdas sdasdas WINDOWS 7 ---> C:\Program Files\Common Files\Adobe\OOBE\PDApp\UWA
  • Avatar del usuario Mariano Fuenzalida Mariano Fuenzalida Disculpa, cuando despliego el menú de ayuda en photoshop...
  • Avatar del usuario Metztli Metztli Ese código de php, ¿funciona para magento?
  • Avatar del usuario daniel daniel Buenas tardes quisiera saber como se escribe mi nombre...
  • Avatar del usuario Omar Omar Hola: Estoy rehaciendo mi web que es un gran catálogo y quiero...
  • Avatar del usuario carlos carlos muchas por tu aporte

Lo más comentado

Lo más visto

Post al azar

Como usar Javascript en peticiones Ajax Mootools

(0)
04 / Febrero / 2010
Como usar Javascript en peticiones Ajax Mootools

Cuando realizamos una petición Ajax, ya sea en el framework que estemos utilizando, nos hará falta en bastante ocasiones tener que llamar alguna función en Javascript o realizar alguna sentencia. Ya sea antes o después de la petición, o antes o después de pintar los datos en HTML. Vamos a practicar tres formas posibles de usar Javascript en peticiones Ajax mediante Mootools.

Procesar Javascript en el evento onSucess

Realizaremos una petición Ajax mediante el objeto Request.HTML, obtendremos el HTML y lo pintaremos mediante la propiedad update, especificándole el identificador de la capa donde obtendremos los resultados. Por último ejecutaremos una sentencia Javascript que pintará de color verde el fondo de los anchor del Html obtenido de la petición Ajax a través del evento onSuccess.

Código HTML (para todos los ejemplos es el mismo código):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
    <title>Demo 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="es" />
    <script type="text/javascript" src="mootools.js"></script>
    <style type="text/css">
        #ajax
        {
            color: red;
            cursor: pointer;
        }

        #target
        {
            margin: 10px 0px;
            border: 1px solid #D5D5D5;
            padding: 5px;
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>Demo 1</h1>
    <p id="ajax">Cargar Ajax</p>
    <div id="target"></div>
    <a href="http://www.rutarelativa.com" title="Visita Ruta relativa">Visita Ruta relativa</a>
</body>
</html>

Código Javascript:

<script type="text/javascript">
    window.addEvent( "domready", function()
    {
        $("ajax").addEvent( "click", function()
        {
            new Request.HTML(
            {
                url : "demo2-ajax.html",
                update : "target",
                onSucess : function()
                {
                    $$( "#target a" ).setStyle( "background", "green" );
                }
            }).send();
        } );
    });
</script>

Archivo donde se realiza la petición Ajax: demo1-ajax.html

<a href="http://www.rutarelativa.com" title="Ruta relativa">Ruta relativa</a> <br/>
<a href="http://www.teoobe.com" title="Teoobe">Teoobe</a>

Ver ejemplo 1

Procesar Javascript en el Html obtenido, propiedad evalScripts

Realizaremos una petición Ajax mediante el objeto Request.HTML, obtendremos el HTML y lo pintaremos mediante la propiedad update, especificándole el identificador de la capa donde obtendremos los resultados. Por último ejecutaremos una sentencia Javascript que viene escrita en el archivo donde vamos a realizar la petición. El objeto Request de Mootools se encargará de ejecutar la sentencia Javascript escrita en el fichero de la petición gracias a la propiedad evalScripts, que por defecto es True.

Código Javascript

<script type="text/javascript">
    window.addEvent( "domready", function()
    {
        $("ajax").addEvent( "click", function()
        {
            new Request.HTML(
            {
                url : "demo2-ajax.html",
                evalScripts : true,
                update : "target"
            }).send();
        } );
    });
</script>

Archivo donde se realiza la petición Ajax: demo2-ajax.html

<a href="http://www.rutarelativa.com" title="Ruta relativa">Ruta relativa</a> <br/>
<a href="http://www.teoobe.com" title="Teoobe">Teoobe</a>

<script type="text/javascript">
	$$( "#target a" ).setStyle( "background", "green" );
</script>

Ver ejemplo 2

Procesar Javascript despues o antes de pintar el Html

Éste método es el que más flexibilidad ofrece, ya que podemos ejecutar nuestro Javascript cuando nosotros queramos. Realizaremos una petición Ajax mediante el objeto Request.HTML obteniendo el Html y Javascript por separado. Utilizaremos un método set Html para pintar los datos obtenidos. Mientras que para ejecutar nuestro Javacscript utilizaremos la función $exec pasándole como argumento nuestro Javascript. Como podemos observar aquí en este ejemplo podemos jugar con pintar antes o después de ejecutar nuestro código Javascript.

Código Javascript:

window.addEvent( "domready", function()
{
    $("ajax").addEvent( "click", function()
    {
        new Request.HTML(
        {
            url : "demo3-ajax.html",
            evalScripts : false,
            onSuccess : function(e, elements, html, js)
            {
                $("target").set( "html", html );
                $exec(js);
            }
        }).send();
    } );
});

Archivo donde se realiza la petición Ajax: demo3-ajax.html

<a href="http://www.rutarelativa.com" title="Ruta relativa">Ruta relativa</a> <br/>
<a href="http://www.teoobe.com" title="Teoobe">Teoobe</a>

<script type="text/javascript">
	$$( "#target a" ).setStyle( "background", "green" );
</script>

Ver ejemplo 3

Descargar ejmplos

votar

Artículos relacionados

Sobre KeLDroX

296

Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.

Sigue a Ruta Relativa

Trackback en Como usar Javascript en peticiones Ajax Mootools

Hasta el momento el artículo Como usar Javascript en peticiones Ajax Mootools no tiene Trackbacks.

Comentarios en Como usar Javascript en peticiones Ajax Mootools

Hasta el momento el artículo Como usar Javascript en peticiones Ajax Mootools no tiene comentarios, sé el primero en comentar en él.

Escribir comentario en Como usar Javascript en peticiones Ajax Mootools

¡Tu opinión nos interesa!. Escribe tu opinión lo más clara posible para que todos podamos entenderla, evita el spam, comentarios ofensivos, etc. ya que serán eliminados. Tu opinión sera moderada antes de ser publicada, por lo que su aparición en la web puede tardar unos minutos. Si deseáis ponerse en contacto para sugerencias o críticas podéis hacerlo desde el formulario de contacto.

Sigue a rutarelativa en twitter
Editores de Ruta Relativa
Avatar del editor KeLDroX KeLDroX Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.
Avatar del editor sergiocius sergiocius Soy un desarrollador en entornos web y escritorio, entusiasta y amante de mi trabajo del que cada día espero aprender algo nuevo. Tengo una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y actualmente curso el primer año de Carrera Universitaria con el poco tiempo que me deja el trabajo. Fundé rutarelativa porque quiero que mi esfuerzo y tiempo invertidos en aprender y poner en práctica algo le resulte útil y fácil a otro usuario, del mismo modo que yo aprendo y ahorro tiempo con la ayuda de los demás.
Avatar del editor Victor Victor Desarrollador de aplicaciones informáticas con altos objetivos y ambiciones. Busco cada día aprender algo nuevo, ya que mi mundo se encuentra en constante actualización. Cuento con una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y una larga experiencia profesional.