Prototype

Prototype es un framework escrito en JavaScript que se orienta al desarrollo sencillo y dinámico de aplicaciones web. Es una herramienta que implementa las técnicas AJAX y su potencial es aprovechado al máximo cuando se desarrolla con Ruby On Rails.

Introducción 

Con la Web 2.0 las técnicas de desarrollo de páginas web necesitaban dar un gran salto. Con esto en mente nació la técnica AJAX, que gracias a Prototype permite el desarrollo ágil y sencillo de páginas Web, esto en relación con el desarrollador, y provee al cliente una manera más rápida de acceder al servicio que solicita.
Prototype es un Framework basado en JavaScript orientado a proporcionar al desarrollador de técnicas AJAX listas para ser usadas. El potencial de Prototype es aprovechado al máximo si se desarrolla con Ruby On Rails, esto no quiere decir que no se puede usar desde otro lenguaje, solamente que demandara un "mayor esfuerzo" en el desarrollo.

Técnica AJAX 

Antes de comenzar a desarrollar Prototype, es necesario presentar el concepto AJAX, debido a que Prototype emplea AJAX.

AJAX proviene de Ashyncronous JavaScript And XML. En pocas palabras AJAX es una técnica de desarrollo Web que incorpora varias tecnologías, como son el JavaScript y XML, consiguiendo de esta manera una forma de navegar rápida, ágil y dinámica.

AJAX funciona de la siguiente manera 
 evento 
 Se crea y configura un objeto XMLHttpRequest
 El objeto XMLHttpRequest realiza una llamada al servidor
 La petición se procesa en el servidor
 El servidor retorna un documento XML que contienen el resultado
 El objeto XMLHttpRequest llama a la función callback() y procesa el resultado
 Se actualiza el DOM (Document Object Model)de la página asociado con la petición con el resultado devuelto

Las características de XMLHttpRequest son 

 Comunicación GET/POST
 Documentos pueden ser texto plano/xml
 Trabaja en segundo plano
 Número limitado de peticiones
 Permite especificar un manejador para el control de cambios de estado
 Manejador notifica el estado de la petición:
 -Inicializada
 -Iniciada
 -En proceso de retornar la información
 -Operación completada

El tipo de respuesta puede ser 
 Documento XML
 Texto
 Procesado en el cliente
 Mostrado directamente
 JavaScript
 Evaluado en JavaScript mediante ‘eval()’
 JSON, «JavaScript ObjectNotation»: 
 Formato ligero para el intercambio de datos
 Subconjunto de la notación literal de objetos de Javascript que no requiere el uso de Javascript

Propiedades de XMLHttpRequest 
 onreadystatechange: El manejado del evento llamado en cada cambio de estado del objeto 
 readyState: Indica el estado del objeto o la petición
 0 = sin inicializar
 1 = cargando
 2 = fin de la carga
 3 = actualizando la información recibida
 4 = Operación completada
 status: Estado HTTP devuelto por el servidor
 Error 404 si la página no se encuentra
 Error 200 si todo ha ido bien.

Las ventajas de AJAX son 
 Mayor interactividad
 Recuperación asíncrona de datos, reduciendo el tiempo de espera del usuario
 Facilidad de manejo del usuario
 El usuario tiene un mayor conocimiento de las aplicaciones de escritorio
 Se reduce el tamaño de la información intercambiada
 Portabilidad entre plataformas
 No requieren instalación de complementos, applets de Java, ni ningún otro elemento
 Código público

Las desventajas de AJAX son 
 Usabilidad: Comportamiento del usuario ante la navegación
 Botón de volver atrás del navegador
 Empleo de iframes ocultos para almacenar el historial
 Empleo de fragmento identificador del URL (‘#’) y recuperación mediante JavaScript
 Problema al agregar marcadores/favoritos en un momento determinado de la aplicación
 Problemas al imprimir páginas renderizadas dinámicamente
 Tiempos de respuesta entre la petición del usuario y la respuesta del servidor
 Empleo de feedback visual para indicar el estado de la petición al usuario
 Requiere que los usuarios tengan el JavaScript activado en el navegador
 En el caso de Internet Explorer 6 y anteriores, que necesita tener activado el ActiveX
(En Internet Explorer 7, se implementa como JavaScript nativo)
 Como en DHTML, debe comprobarse la compatibilidad entre navegadores y plataformas

Para obtener más información consulte la página sobre AJAX.

Prototype 

Prototype es un framework desarrollado en JavaScript por Sam Stephenson para el desarrollo sencillo y dinámico de páginas Web.
Prototype nos simplifica gran parte del trabajo cuando se pretende desarrollar páginas altamente interactivas.

Instalación 

Para comenzar a trabajar con Prototype es necesario obtener el framework, para ello deben dirigirse al sitio http://www.prototypejs.org/ y descargar prototype.js y para usarlo deben hacer lo siguiente:

 Enlazar en la página con la etiqueta <script>:

<script type="text/JavaScript" src="path/to/prototype.js"></script>

si emplea Ruby On Rails no es necesario descargar prototype.js, la biblioteca viene incluida. Para hacer uso de ello simplemente se lo incluye dentro de la las etiquetas <head>:

<%= javascript_include_tag 'prototype' %>

Funciones Prototype 

Ahora que ya lo tenemos instalado es hora de empezar a usar Prototype.
Prototype dispone de funciones sencillas para proporcionar ayuda a la hora de escribir los scripts.

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 DOM document.getElementById(), Un ejemplo para explicarlo.

 <button onclick = "Hacer();" Id = "boton"> clic </button>
 <script>
    function Hacer(){var elemento = $('#boton');elemento.innerHTML = 'Saludos!'; elemento.style.color = 'blue';}
 </script>
Esta etiqueta DIV donde quieras que aparezca el elemento: 
<div id="boton"> </div>

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 vector de elementos.

Función $A() 

Esta función convierte cualquier parámetro en un objeto array, pero el objeto vector de Prototype no es exactamente como el vector 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.

  <input type='button' value="click" 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
  <button onclick="duh();" id="mponce">clic</button>
  <script>
    function duh()
      {var ObjetoUsuario = {id: 1, login: "dponce",  
                            email: "correo_falso@wikipedia.org"};
                            //  convertimos el objeto a un HASH
       var el_hash = $H(ObjetoUsuario); $('dponce').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>
  <script>
    $F('ciudad') // 'SE'
  </script>

Función document.getElementsByClassName() 

Recibe una clase como parámetro y devuelve un vector con los elementos que tienen como atributo className de la clase.
  <button onclick='duh();' id='padre'>clic</button>
  <script>
    function duh(){
      var arrayNodosfamilia = document.getElementsByClassName('familia');
      var Arreglo = $A(arrayNodosfamilia); 
      Arreglo.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 vector con cada elemento que cumpla con el criterio del selector dado, ejemplo.
  <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');
      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').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. Estos 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 los distintos navegadores.

Trabajando el DOM 

Prototype tiene algunos objetos (Element, Insertion, Observer y Position) que permiten distintas formas de manipular el DOM.

El Objeto Element 

La mayor parte de los métodos de «Element» simplemente toman un ID o una referencia del objeto a Element que usted quiere manipular. Aquí tiene una mirada a algunos de los métodos más útiles: 
  // Esconder el elemento
  Element.hide(elemento)
  
  // Mostrar el elemento
  Element.show(elemento) 
  
  // Añadir una clase CSS al elemento
  Element.addClassName(elemento, "ClaseCSS") 
  
  // Quitar la clase CSS del elemento
  Element.removeClassName(elemento, "ClaseCSS") 
  
  // Devuelve verdadero si el elemento tiene la clase CSS
  Element.hasClassName(elemento, "ClaseCSS")

El objeto INSERTION 

El objeto Insertion añade fragmentos de HTML en, y alrededor de, un Elemento. Hay cuatro tipos de Insertion: Before (antes), After (después), Top (cima) and Bottom (inferior). Esto le muestra como añadiría algún HTML antes de un elemento con el ID "myelement": 

new Insertion.Before("myelement", "<p>I'm before!</p>");

El objeto POSITION 

El objeto Position puede indicar la posición en pantalla, y proporcionar información sobre la posición en relación con otros elementos de forma compatible con los navegadores. Esto debe ocupar la mayor parte del código complicado de animaciones, efectos y del código de arrastrar y soltar.

Manejando formularios 

Los objetos Form y Field prevén un número de funciones simples pero convenientes para trabajar con formularios y campos «input», así como el código que soporta la puesta en práctica de AJAX con Prototype.

El objeto Form 

Generalmente, los métodos del objeto Form toman una ID o una referencia del objeto a un elemento: 
  // Deshabilita todos los campos de un formulario
  Form.disable(formulario) 
  
  // Habilita todos los campos de un formulario
  Form.enable(formulario) 
  
  // Limpia todos los campos de un formulario
  Form.reset(formulario) 
  
  // Devuelve una lista con todos los valores del formulario
  Form.getElements(formulario) 

  // Enfocar el primer campo
  Form.focusFirstElement(formulario)

El objeto Field 

El objeto Field trata con elementos individuales del formulario y sus métodos típicamente toman un ID o una referencia del objeto a un elemento de un modo muy similar al objeto Form: 
  // Limpia el o los campos, acepta cualquier número de argumentos
  Field.clear(campo1, campo2)
  
  // Devuelve el foco a un campo
  Field.focus(campo) 
  
  // Selecciona un campo
  Field.select(campo) 

La serialización del Formulario 

En términos de Prototype, serializar un formulario significa leer todos los elementos del formulario y convertirlos en una cadena codificada en URL similar a la que sería enviado si usted aceptara el formulario. Por ejemplo:

  <form id="busqueda" action="busqueda.php" method="post"> 
    <input type="text" name="consultar" value="algo" /> 
    <select name="campo"> 
      <option value="nombre">Nombre del Artista</option> 
      <option value="titulo" selected="selected">Titulo de la canción</option> 
    </select> 
    <input type="submit" name="submit" value="Buscar" /> 
  </form> 
  
  Form.serialize($("busqueda")) 

Note que Form.serialize ingeniosamente deja de lado las diferentes maneras en que los elementos del formulario son accesados, de modo que inputs, selects, checkboxes y los radio buttons son manejados correctamente. Form.serialize es útil para varias tareas, pero es el mejor cuando trabajamos con AJAX.

Observadores de formulario 

Form. Observer y Form.Element. Observer permiten observar un formulario y enviar “callbacks” cuando los datos cambien. Estos son actualmente dos versiones de cada “observer” que verifican el valor actualizado. El primero es un observador periódico, que trabaja así: 
  new Form. Observer($("myform"), 1, myCallBackFunction); 

  new Form.Element. Observer($("myfield"), 1, myCallBackFunction); 
Estos «observadores» comprueban cada segundo si los datos se han modificado y, si esto es así, llamará a myCallBackFunction.
 
El segundo tipo de «observador» está basado en los eventos y solamente realizará la comprobación cuando se produzca la modificación o un clic-evento para los elementos. Ejemplo:
  new Form.EventObserver($("myform"), myCallBackFunction); 

  new Form.Element.EventObserver($("myfield", myCallbackFunction); 
Si en todos los campos del formulario se colocan «observadores», tendremos una manera mucho más eficiente de observar el formulario. Pero, si se quiere “observar” los cambios de elementos que no soportan estos eventos, se debe usar los observadores periódicos. 

Es totalmente posible realizar estas funciones sin emplear Prototype, pero demandaría un gran esfuerzo y muchas líneas de código, en una palabra se intentaría reinventar la rueda, «para que programar algo si ya existe», solamente hay que usarlo y aportar a la modificación de lo que ya está hecho. Por eso Prototype es un framework, una biblioteca lista para ser usada en un ambiente de producción.

La Web 2.0 ya es un hecho y Prototype está pensado para ello, para aprovechar al máximo la productividad y extender las fronteras de las web's ágiles, dinámicas y sencillas.

Prototype vs... 

Al comparar Prototype con otro framework, hay que distinguir el propósito de cada uno. Supongamos que se desea implementar AJAX en un proyecto basado en PHP y se decide implementar PROTOTYPE como framework. En tal caso este no sería recomendable, dado que para PHP existe otro framework más apropiado llamado Xajax. En cambio si se desarrolla con Ruby la opción es Prototype, el cual ya viene integrado en Rails

Es difícil compararlos a todos. Sin embargo, todos proveen de un mejor servicio tanto para el cliente y una manera de producir más rápida para el desarrollador. Cuando FLASH parecía copar el mercado de las aplicaciones web, hoy AJAX se lleva el premio y todas apuntan a implementar esta Técnica.

Proyectos basados en Prototype 

 Ruby on Rails (https://web.archive.org/web/20180607060649/http://www.rubyonrails.com/ )
 Script.aculo.us, Thomas Fuchs (http://script.aculo.us/)
 Rico (http://openrico.org/)
 Behaviour (https://web.archive.org/web/20050814234240/http://www.ripcord.co.nz/behaviour/)
 KumbiaPHP framework (http://www.kumbiaphp.com/)

Alternativas que emplean AJAX

DOJO Toolkit (http://dojotoolkit.org/) 

 Biblioteca JavaScript de código abierto
 Proporciona un API para el control y manipulación de historial
 Proporciona en el lado del cliente para la manipulación de URL y marcadores/ favoritos
 Widgets
 Ordenar tablas
 Validación de formularios
 Menús y barras de menús
 Google y Yahoo! Maps

XAJAX (https://web.archive.org/web/20060831015457/http://www.xajaxproject.org/) 
 Es una biblioteca PHP de código abierto
 Abundante documentación
 Fácil de utilizar:
 No requiere gran conocimiento de JavaScript
 Sencillo de emplear:
 Incluir biblioteca en página PHP
 Instanciar el objeto ‘xajax’
 Implementación de nuevas funciones en PHP

XOAD (http://www.xoad.org/, antes NAJAX) 
 Biblioteca orientada a objetos basada en PHP
 Documentación de las clases y tutoriales sencillos
 Emplea JSON y objetos PHP para la comunicación
 Soporta eventos del lado del cliente y del servidor

Conclusión 

Prototype es un framework más que implementa AJAX, si se lo compara con otro puede ganar o perder, pero esta un paso adelante del resto en lo que respecta al desarrollo de páginas ágiles e interactiva. 
El mundo cambió y hace uso de las bondades de la Web 2.0, Prototype brinda su aporte a este auge, para lograr mejores servicios a menor costo de desarrollo.

Con la introducción de AJAX en aplicaciones Web el manejo del objeto XMLHttpRequest se hace simple. En una secuencia en donde el usuario interactúa con la Web y provoca una petición, se crea un objeto XMLHttpRequest, luego este objeto realiza una llamada al servidor solicitando el evento. la petición se procesa en el servidor y devuelve un resultado en formato XML, o texto plano, o JavaScript, etc. que contienen el resultado de la petición. Luego el objeto XMLHttpRequest hace un llamado a la función callback() para procesar el resultado y por último se actualiza el DOM (Document Object Model) con el resultado devuelto.

De esta manera AJAX permite lograr páginas rápidas y ágiles brindado un servicio mejor al usuario.

Referencias

Enlaces externos 

 http://www.prototypejs.org/
 http://prototype.conio.net
 Prototype Window Class
 http://script.aculo.us
 http://www.ajaxian.com
 http://particletree.com
 http://www.json.org
 http://ajaxload.info
 http://www.sergiopereira.com/articles/prototype.js.html
 http://www.ajaxhispano.com/
 https://web.archive.org/web/20060903052407/http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype Cómo validar Un Formulario
 http://www.kumbiaphp.com/
 Ejemplos Prototype

Ingeniería de software
Bibliotecas de JavaScript
AJAX