Manual de Ajax + Javascript + Prototype

En el difunto blog publiqué un manual sobre cómo utilizar Ajax, usando el framework de Prototype. De las pocas visitas que recibía, unas cuantas llegaban preguntando por este manual, así que lo resubo en Box.net. El documento se puede descargar aquí, y lo reproduzco completamente en el blog, por si hay quien no se lo quiera bajar.

La mayor parte de la información sobre la funcionalidad prototype está sacada de la Wikipedia.

Espero que sea de utilidad:

Aplicaciones con Ajax + Prototype

Introducción.

Prototype es un framework para Javascript. Es un entorno encapsulado de funciones que facilitan la programación de tareas rutinarias con Java Script. Dentro de este framework existen una serie de funciones que nos facilitarán el trabajo a la hora de utilizar Ajax en nuestras aplicaciones.

Cómo usar Prototype

La librería se encuentra disponible en http://www.prototypejs.org/ en la sección de descargas, bajo una licencia GPL. También existe una sección de ayuda muy completa, y en inglés.

Habrá que descargarse el fichero .js de la página web y después hacer un include a dicho fichero dentro de la página:

<script src=”/js/prototype.js” language=”javascript”></script>

Una vez incluido el fichero se podrán usar las sentencias prototype.

Sentencias básicas Prototype

Función $()

La Función $() es bastante útil, al principio puede parecer un poco abstracta, esta función es un atajo a la función del document.getElementById(), Un ejemplo para explicarlo.

<div id = “id_1” >hola Prototype!</div>

<button onclick = “Hacer();” Id = “id_a”> clic </button>

<script>

function hacer()

{

var elemento = $(‘id_1’);

elemento.innerHTML = ‘Saludos!’;

elemento.style.color = ‘blue’;

}

</script>

La función $(), puede recibir el id del elemento, o puede recibir el propio elemento, y si recibe más de un elemento devuelve un Array de elementos.

Función $A()

Esta función convierte cualquier parámetro en un objeto Array, pero el objeto array de Prototype no es exactamente como el array de javascript, ya que posee una extensión llamada Enumerable, la cual es una copia del lenguaje de programación Ruby, dándole mucha más versatilidad a JavaScript. Un Ejemplo simple.

<div id=”DIV_D”> Hola a Todos! </div>

<div id=”id_a”> Hola! </div>

<button onclick=”Arreglo()”;
<script>

Function Arreglo()

{

var Lista=document.getElementsByTagName(‘div);

var Arreglo = $A(Lista);

Arreglo.each(function(el, indice) el.innerHTML = indice + ‘:’ + ‘divider’ + el.id; el.style.color = ‘blue’;)

};

</script>

Función $H()

Convierte un objeto en un hash enumerable

<div id=”DIV_dd”>Hola a Todos!! </div> <button onclick=”duh();” id=”BUTTON_HELLO”>clic</button> <script> function duh() {var ObjetoUsuario = {id: 1, login: “DIV_dd”, email: “esteesunmaildeejemplo@dominio.com”}; // convertimos el objeto a un HASH var el_hash = $H(ObjetoUsuario); $(‘DIV_dd’).innerHTML = el_hash.toQueryString(); } </script>

Función $F()

Toma un ID y devuelve el valor de cualquier campo de formulario, por ejemplo, un menú select como este:

<select name=”ciudad” id=”ciudad”> <option selected=”Seleccionar” value=”SE”>Santiago Del Estero</option> <option value=”AR”>Argentina</option> … </select> $F(‘Ciudad’) // ‘SE’

Función document.getElementsByClassName()

Recibe una clase CSS como parámetro y devuelve un array con los elementos que tienen como atributo className de la clase CSS.

<div class=”familia” id=”luis”>hola mundo!</div> <div class=”familia” id=”jose”>hola mundo!</div> <div class=”jefe” id=”El Jefe”>uno mas</div> <button onclick=”duh();” id=”padre”>clic</button> <script> function duh(){ var arrayNodosfamilia = document.getElementsByClassName(’familia’); arrayNodosFamilia.each( function(el, indice){ el.innerHTML = indice + ‘:’ + ‘divider ‘ + el.id; el.style.color = ‘blue’; }); } </script>

Función $$()

Es una mejora de la función document.getElementsByClassName(), recibe como parámetro un selector CSS y devuelve un array con cada elemento que cumpla con el criterio del selector dado, ejemplo.

<div id=”ciudad”> <div class=”familia” id=”luis”><p>hola mundo!</p></div> <div class=”familia” id=”jose”><p>otro mensaje</p></div> <div class=”jefe” id=”El Jefe”>uno mas</div> </div> <button onclick=”duh();” id=”padre”>clic</button> <div class=”familia” id=”hijo”><p>ay caramba!</p></div> <script> function duh(){ var arrayNodosFamilia = $$(‘div#ciudad div.familia p’); arrayNodosFamilia.each( function(el, indice){ el.innerHTML = indice + ‘:’ + ‘divider ‘ + el.id; el.style.color = ‘blue’; }); } </script>

Además podemos escribir nuestro código con menos líneas, por ejemplo

<script> function duh(){ $$(‘div#ciudad div.familia p’).each( function(el, indice){ el.innerHTML = indice + ‘:’ + ‘divider ‘ + el.id; el.style.color = ‘blue’; }); } </script>

Función Binding

Prototype también añade a la función objeto dos métodos bind y bindAsEventListener. Éstos son usados para asociar una función a un objeto particular de modo que la palabra clave apunte a ese objeto. Supongamos que:

var myObject = new Object();

myObject.message = “Hello!”;

myObject.eventHandler = function() {

alert(this.message);

}

$(“mydiv”).onmouseover = myObject.eventHandler;

Tradicionalmente, se conseguiría un error, porque, cuando el evento llama a la función handler, esta se refiere al elemento mydiv, y no a myObject, entonces this.message es indefinido. Se puede solucionar este problema con:

$(“mydiv”).onmouseover = myObject.eventHandler.bind(myObject);

Ahora funciona bien, porque la palabra clave se limita a myObject. Siguiendo esto, el bindAsEventListener hace lo mismo, aunque pasa el objeto del evento a través de su función de una manera compatible con el cross-browser.

Prototype y Ajax

Lo primero que tenemos que tratar de definir es: ¿qué es Ajax?. Literalmente su sigla significa Ashyncronous JavaScript And XML. En la práctica significa utilizar las tecnologías javascript y Xml para dotar de un mayor dinamismo a las páginas web desarrolladas. Mediante esta técnica seremos capaces de actualizar partes de las páginas de forma dinámica, sin la necesidad de hacer una recarga completa de la página web, como suele ser la práctica común de las tecnologías de servidor actuales.

Supongamos que tenemos dos desplegables en nuestra página web. Uno de ellos contiene una lista de países, y el otro contendrá un listado de ciudades de dicho país. Al cambiar la selección en la lista de países, la de ciudades debería ser actualizada. Usando Asp de forma pura, el procedimiento que seguiríamos sería el de realizar un Submit de un formulario que contuviese los desplegables y a la vuelta recoger el valor seleccionado en el desplegable de país, y así poder rellenar el de ciudades. Con ajax, lo que haremos será, mediante Javascript hacer una petición XML a una página externa, pasándole como parámetro el país a buscar, y mediante javascript recogeremos el desplegable ya actualizado y lo pintaremos en caliente en la página, sin haberla actualizado.

Ejemplo

Lo primero será tener en la página web una etiqueta div donde se irán actualizando los datos. Por ejemplo:

<di vid=’div actualiza’></div>

Posteriormente tendremos el objeto que desencadene el evento que hará la petición JavaScript, por ejemplo un botón:

<input type=’button’ name=’boton’ id=’boton’ value=’actualiza’ onClick=’javascript:ActualizaDatos(3);’>

Y ahora la función a la que llamamos:

<script>

function ActualizaDatos(parametro)

{

var url = ‘http://www.webEjemplo.com/pagina_a_cargar.asp&#8217;;

var CacheAleatoria = Math.random() * 1000000

var pars = {

Param1: 100,

Param2: parametro,

Cache: CacheAleatoria

};

actualizaDatosRemotos(url, ‘div_contenidos’, pars);

}

</script>

Explicación:

A la función le hemos pasado un parámetro (parametro). La variable url contendrá la página que queremos incluir posteriormente en el div de destino. Esta página puede realizar la labor que queramos, pintar un desplegable al recibir un parámetro realizando una consulta a base de datos, pintar una tabla completa…

El array pars contendrá los parámetros que le queremos pasar a la página que incluiremos después en el div. Esto se hace por elegancia 😉 porque se podrían pasar sin ningun problema directamente en la url primera, pejem:

var url = ‘http://www.webEjemplo.com/pagina_a_cargar.asp?codigo=&#8217; + parámetro

Uno de los parámetros que se le pasa a la página es el de CacheAletoria y hay que reconocer que es un procedimiento que rompe cualquier norma de elegancia a la hora de programar, pero es útil. El inconveniente de trabajar con javascript y XML es que es muy fácil que se quede en caché la página a la que estamos llamando. Por lo que es probable que en muchos casos no actualice la información de forma correcta. Esto se evita pasándole un parámetro distinto cada vez que llamemos a la página. No es más que un número aleatorio para que se actualice el contenido.

Finalmente llamamos a la funcion actualizaDatosRemotos que será la encargada de actualizar la página url , dentro del objetivo que le hemos dado target, pasándole los parámetros params:

function actualizaDatosRemotos(url, target, params){

var Pars = $H(params).toQueryString();

var Update = new Ajax.Updater(target, url, {method: ‘get’, parameters: Pars});

}

Manual realizado por Micropakito

Mucha información sacada de la wikipedia: link

Anuncios

12 pensamientos en “Manual de Ajax + Javascript + Prototype

  1. […] la comunidad. Viene a ser un foro moderno en el que la gente sube videos y música. Y cuanto más Ajax, más colores oscuros y más logotipos con efecto de espejo haya, […]

  2. kerne dice:

    Ahi envio mi juego corriendo a full

    The title

    hola Prototype!

    clic

    Hola!
    arreglo

    function hacer()

    {

    var elemento = $(‘diego’);

    elemento.innerHTML = ‘Saludos!’;

    elemento.style.color = ‘blue’;

    }

    function arreglo()

    {

    var Lista=document.getElementsByTagName(‘div’);

    var Arreglo = $A(Lista);
    alert(“valor del arreglo:” + Arreglo);

    Arreglo.each(function(el, indice){ el.innerHTML = indice + ‘:’ + ‘ divider ‘ + el.id; el.style.color = ‘blue’;} );

    }

  3. AP dice:

    En mi opinion el manual es muy pequeño. Necesita mas documentación.

  4. magnus dice:

    Metete tu comentario al culo, quieres un post mas grande escribelo entonces.

  5. Buena Magnus dice:

    jaja si pes, si quieres algo mas extenso bajate manuales xD… jajajajaja

  6. Oscar dice:

    jajaja un poco agresivo, pero sincero LO APOYO!! xD

  7. Inutiles dice:

    AP tiene razón a esto no se le puede llamar manual son 4 líneas de mierda copiadas de Wikipedia

  8. dponce dice:

    Por que usas datos mios en tu ejemplo? borrar los mismos cuanto antes…

    • micropakito dice:

      Buenas dponce,

      Pues como escribo en el texto, los ejemplos los saqué de la wikipedia. (Hace 5 años). Si accedes al artículo que hay publicado allí sobre prototype siguen apareciendo ciertas referencias a tu usuario:

      http://es.wikipedia.org/wiki/Prototype#Funci.C3.B3n_.24A.28.29

      Aquí puedes ver, por ejemplo:

      // convertimos el objeto a un HASH
      var el_hash = $H(ObjetoUsuario); $(‘dponce’).innerHTML =
      el_hash.toQueryString();

      Por ese motivo, aparecen en mi entrada.

      Habiéndome comunicado que no te gusta esta situación, por mi parte procederé a ofuscar los datos que puedan referirse a tu persona en los próximos días.

      Disculpa las molestias,

      Micropakito

    • micropakito dice:

      Acabo de eliminar las referencias que he visto. Si hay alguna que te moleste en especial, por favor, házmelo saber y la modifico…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: