01 marzo 2006
Tutorial AJAX - Lección 4 - La libería Prototype
En la Lección 3 hemos visto cómo comunicarnos con un servidor de forma asíncrona. El código resultante es un churro de mucho cuidado. Podríamos crearnos una función que nos crease el objeto XMLHttpRequest. Pero como nos han dicho muchas veces ¿por qué reinventar la rueda? Otros lo han hecho por nosotros y seguro que mejor.
La libería Prototype nos proporciona la clase Ajax para poder hacer las operaciones asíncronas en una sola línea.
Como ejemplo vamos a poner el mismo que en la lección 3, pero usando la librería.
Lo primero es incluirla:
El código de la página el mismo:
y la función leccion4 así:
Si. Ya está. Os hice sufrir con la lección 3, pero es que hay que ver las bases antes de poder usar las cosas avanzadas, ¿no creeis?
Ahora la función hayrespuesta:
Fijaros como accedo a la capa donde tengo que poner el texto: $("leccion4_capa1").innerHTML = txt; La función $ sustituye a document.getElementById. Nos va a hacer la vida más fácil.
En siguientes lecciones veremos otras funciones y funcionalidades que nos aporta Prototype y, por fin, manejaremos datos en XML.
Ved el ejemplo 4
0 Comentarios
La libería Prototype nos proporciona la clase Ajax para poder hacer las operaciones asíncronas en una sola línea.
Como ejemplo vamos a poner el mismo que en la lección 3, pero usando la librería.
Lo primero es incluirla:
<script src="prototype.js" type="text/javascript"></script>
El código de la página el mismo:
<div>
<input onclick="leccion4()" value="Botón" type="button"/>
<div id="leccion4_capa1" style="border: 1px solid black; overflow: scroll; width: 300px; height: 150px;"></div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" style="border: 0px none ;" height="31" width="88"/></a>
</p>
</div>
y la función leccion4 así:
function leccion4()
{
var myAjax = new Ajax.Request(
"leccion3_2.html", {
method: 'get',
onComplete: hayrespuesta
});
}
Si. Ya está. Os hice sufrir con la lección 3, pero es que hay que ver las bases antes de poder usar las cosas avanzadas, ¿no creeis?
Ahora la función hayrespuesta:
function hayrespuesta(peticion)
{
// Recuperamos lo que nos ha devuelto el servidor en forma de texto:
var txt = peticion.responseText;
// Y lo ponemos en la capa:
// Usamos la función $ que nos da acceso directamente a un elemento mediante el id y nos ahorramos el incomodo document.getElementById
$("leccion4_capa1").innerHTML = txt;
}
Fijaros como accedo a la capa donde tengo que poner el texto: $("leccion4_capa1").innerHTML = txt; La función $ sustituye a document.getElementById. Nos va a hacer la vida más fácil.
En siguientes lecciones veremos otras funciones y funcionalidades que nos aporta Prototype y, por fin, manejaremos datos en XML.
Ved el ejemplo 4
0 Comentarios
Comentarios:
Publicar un comentario
