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
  1. Se crea y configura un objeto XMLHttpRequest
  2. El objeto XMLHttpRequest realiza una llamada al servidor
  3. La petición se procesa en el servidor
  4. El servidor retorna un documento XML que contienen el resultado
  5. El objeto XMLHttpRequest llama a la función callback() y procesa el resultado
  6. 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