Prototype

Este artículo trata sobre Prototype. Para otros usos de este término, véase Prototype (desambiguación).
Prototype
Información sobre la plantilla
Parte de la familia Framework JavaScripts
Prototype js.png
Framework JavaScript para el desarrollo Web
CreadorSam Stephenson
Última versión estable1.6. 1 septiembre 2009
Sitio web
http://www.prototypejs.org/

Prototype. 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.

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 al desarrollador, y provee al cliente una manera más rápida de acceder al servicio que solicita. Prototype es un Framework basado en JavasScript orientado a proporcionar al desarrollador de técnicas AJAX listas para ser usadas.

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 manejador 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

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>

Alternativas que emplean AJAX

DOJO Toolkit

Sitio Oficial

  • 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

Sitio Oficial

  • 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

Sitio Oficial

  • 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

Véase también

  • Django Framework para Desarrollo Web.
  • Dojo Framework JavaScript.
  • Mootools Framework JavaScript.
  • JQuery Framework JavaScript

Enlaces externos