Rutarelativa

Como usar Javascript en peticiones Ajax Mootools

(0)

04 / Febrero / 2010

Desarrollo, Javascript

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

Rutarelativa

Como usar Javascript en peticiones Ajax Mootools

Procesar Javascript en el evento onSucess

Procesar Javascript en el Html obtenido, propiedad evalScripts

Procesar Javascript despues o antes de pintar el Html

Trackback en Como usar Javascript en peticiones Ajax Mootools

Comentarios en Como usar Javascript en peticiones Ajax Mootools