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>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>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>-
HistoryManager en Mootools Publicado por Sampedro el día 19/01/2010
Guardado en Desarrollo, Javascript -
MooEditable: Plugin Mootools editor de texto Publicado por Sampedro el día 15/01/2010
Guardado en Desarrollo, Javascript -
Cargar imágenes mediante CSS Publicado por Sampedro el día 27/01/2010
Guardado en CSS, Desarrollo -
JQuery: Plugin maxImage, escalar imagenes Publicado por Sampedro el día 26/01/2010
Guardado en Desarrollo, Javascript -
Cargar Javascript antes del cierre del body en Symfony Publicado por Sampedro el día 19/01/2010
Guardado en Symfony
