La librería YUI ofrece una gama amplia de posibilidades para cargar contenido dinámicamente mediante llamados de http. La clase IO es la encargada de manejar toda la parte de transacciones en YUI.
Primero, ponemos tags html básicas e incluimos YUI3 a nuestra página html:
<html>
<head>
<script type="text/javascript" charset="utf-8"
src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js">
</script>
luego incorporamos nuestro código a la página, mediante otro llamada JavaScript y cerramos el head:
<script type="text/javascript" charset="utf-8"
src="io.js">
</script>
</head>
El resto de la página es un solo un div que va a funcionar de contenedor para el contenido que vamos a invocar mediante AJAX:
<body>
<div class="container"></div>
</body>
</html>
Ahora en nuestro archivo io.js llamamos la función principal YUI.use:
YUI().use("node", "io-base", function(Y) {
//TODO
)};
Vamos a usar las librerías node y io-base.
Seguidamente, dentro de la función use, asignamos el url del recurso a una variable uri, y construimos 2 funciones, una que se va a ejecutar cuando la transacción finalice, y otra que se ejecuta en caso de error, complete y failure:
var uri = "data.xml";
function complete(id, o, args) {
var id = id;
var args = args;
var data = o.responseText;
var container = Y.one(".container");
container.set("innerHTML", data);
};
function failure(id, o, args) {
alert("Transaction Failed");
};
Los parámetros que YUI ofrece a ésta función son id, o y args, que pueden ser cambiados a cualquier otro nombre siempre y cuando se respete la nueva nomenclatura y el orden, por ejemplo, pueden ser llamados complete(transaccion, objeto, argumentos). El primer parámetro id, es el id de la transacción, el segundo es el objeto http que contiene todos los datos del cuerpo del llamado. El último parámetro es un objeto utilitario que podemos usar para enviar otros parámetros a la función.
Para nuestro ejemplo, el objeto o es el que nos interesa, pues contiene la propiedad responseText, que es una representación textual del llamado http. Finalmente escogemos un nodo con Y.one para meter el dato mediante set("innerHTML").
Finalmente, asignamos los eventos complete y failure a las funciones antes declaradas, y hacemos el llamado AJAX:
Y.on('io:complete', complete, Y);
Y.on('io:failure', failure, Y);
var request = Y.io(uri);
Al llamarse la función Y.io con la dirección del recurso (uri) como parámetro, es cuando se hace el llamado http.
No hay comentarios:
Publicar un comentario