Mundo Geek » ajax http://mundogeek.net Mundo geek, bitácora sobre todo lo geek: software, gadgets, tecnología, internet, ... Wed, 08 Feb 2012 16:09:25 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Enviar formularios con AJAX y jQuery http://mundogeek.net/archivos/2010/05/08/enviar-formularios-con-ajax-y-jquery/ http://mundogeek.net/archivos/2010/05/08/enviar-formularios-con-ajax-y-jquery/#comments Sat, 08 May 2010 09:35:29 +0000 Zootropo http://mundogeek.net/?p=5488 En nuestro tutorial rápido de jQuery ya explicamos cómo enviar peticiones HTTP asíncronas al servidor utilizando distintos métodos de esta librería, como $.load, $.get, $.post y $.getJSON. En esta ocasión, y a petición de varios lectores, utilizaremos un pequeño ejemplo para ver cómo enviar los datos de un formulario utilizando AJAX y jQuery, y cómo hacer uso de estos datos en un archivo PHP situado en nuestro servidor.

Comencemos por el formulario. Nuestra pequeña aplicación de ejemplo no hará más que tomar dos números y sumarlos en el servidor. No es nada que no pudiéramos hacer en la parte de cliente usando JavaScript, por lo que no es un ejemplo muy espectacular, pero sí instructivo. Necesitaremos 2 cajas de texto y un botón de enviar. Tendremos también una etiqueta <p> bajo el formulario, que será donde se muestre el resultado.

<html>
<body>
<form action="sumar.php">
  <input type="text" name="num1" /> + <input type="text" name="num2" /><br/>
  <input type="submit" value="Sumar" />
</form>
<p id="resultado"></p>
</body>
</html>

Vayamos ahora con el código JavaScript que enviará el formulario y actualizará la página con el resultado. Una vez añadido este código, este sería el aspecto de la página:

<html>
<body>
<form action="sumar.php" id="formularioSuma">
  <input type="text" name="num1" /> + <input type="text" name="num2" /><br/>
  <input type="submit" value="Sumar" />
</form>
<p id="resultado"></p>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

<script type="text/javascript">
$('#formularioSuma').submit(function(event) {
  event.preventDefault();
  var url = $(this).attr('action');
  var datos = $(this).serialize();
  $.get(url, datos, function(resultado) {
    $('#resultado').html(resultado);
  });
});
</script>
</body>
</html>

Como vemos, lo que hace este código es establecer una función a utilizar como manejador para el evento submit del formulario, evento que se produce al intentar enviarlo.

Esta función se encarga de bloquear el comportamiento por defecto con event.preventDefault(), de forma que el formulario no se envíe de forma síncrona; obtener la URL a la que enviar el formulario de su atributo action, serializar los datos del formulario para enviarlos en la petición con serialize() y, por último, enviar estos datos utilizando una petición GET, mediante el método del mismo nombre.

El tercer argumento de get es, como recordaréis, una función de callback que será llamada cuando termine de ejecutarse la petición. En nuestro caso, esta función no hará más que sustituir el contenido de la etiqueta <p> con el resultado devuelto por la página PHP, ya sea este un error o la suma de ambos números.

Si imprimimos la variable datos veremos que es una simple cadena con los datos codificados como si se tratara de parámetros en una URL. Si fuéramos a sumar 10 y 20, por ejemplo, su aspecto sería:

num1=2&num2=2

jQuery es lo bastante inteligente para añadir esta cadena a la URL en caso de que se trate de una petición GET, por lo que el resultado sería algo como http://servidor.com/sumar.php?num1=10&num2=20 o dentro de la petición si se envía por POST. El acceso a estos datos en el archivo PHP, por tanto, es de lo más sencillo; sólo tenemos que utilizar las matrices superglobales $_GET y $_POST para acceder directamente a los valores.

<?php
if(is_numeric($_GET['num1']) and is_numeric($_GET['num2']))
  echo $_GET['num1'] + $_GET['num2'];
else
  echo 'Los operandos no son correctos';

Otra opción, a parte de serialize, habría sido utilizar el método serializeArray. Mientras que el primero genera una cadena con los parámetros codificados como si de una URL se tratase, como ya comentamos, la segunda produciría un array de objetos. No obstante, el acceso a los datos en el archivo PHP sería exactamente igual en ambos casos, ya que jQuery se encargaría de procesar el array.




]]> http://mundogeek.net/archivos/2010/05/08/enviar-formularios-con-ajax-y-jquery/feed/ 24 GWT 1.5 http://mundogeek.net/archivos/2008/08/29/gwt-15/ http://mundogeek.net/archivos/2008/08/29/gwt-15/#comments Fri, 29 Aug 2008 19:29:28 +0000 Zootropo http://mundogeek.net/?p=1645 Desde el blog oficial de Google Web Toolkit (GWT) nos informan de que ya está disponible la versión 1.5 de este framework para desarrollar aplicaciones web con AJAX utilizando exclusivamente (si queremos) Java; ni XHTML, ni CSS, ni JavaScript.

Además de corregir más de 400 problemas la nueva versión cuenta con las siguientes mejoras:

  • ¡Soporte de Java 5!
  • Mejoras de rendimiento
  • Mayor facilidad para interaccionar con JavaScript
  • Tres hojas de estilo por defecto que mejoran el aspecto por defecto de los widgets
  • Mejor accesibilidad gracias al soporte de ARIA
  • Mejoras en el paquete DOM
]]> http://mundogeek.net/archivos/2008/08/29/gwt-15/feed/ 1 GWT 1.4 http://mundogeek.net/archivos/2007/09/01/gwt-14/ http://mundogeek.net/archivos/2007/09/01/gwt-14/#comments Sat, 01 Sep 2007 11:09:19 +0000 Zootropo http://mundogeek.net/archivos/2007/09/01/gwt-14/ Google Web Toolkit (GWT) 1.4, con nuevos widgets, montones de correciones de bugs, aplicaciones un 30% más pequeñas y entre 20%-50% más rápidas y un montón de nuevas funcionalidades interesantes.

Si os interesa el desarrollo web no dudéis en echarle un vistazo.

]]> http://mundogeek.net/archivos/2007/09/01/gwt-14/feed/ 1 Ruby on Rails vs. Django http://mundogeek.net/archivos/2007/08/20/ruby-on-rails-vs-django/ http://mundogeek.net/archivos/2007/08/20/ruby-on-rails-vs-django/#comments Mon, 20 Aug 2007 13:26:52 +0000 Zootropo http://mundogeek.net/archivos/2007/08/20/ruby-on-rails-vs-django/ En vaporbase podemos encontrar una comparativa de 45 páginas entre Ruby on Rails y Django, los frameworks de desarrollo web más conocidos para Ruby y Python respectivamente. He resumido las conclusiones del autor, aunque no comparto varios puntos, para aquellos demasiado vagos para leerlo entero.

Comunidad

Ruby on Rails es más popular, debido entre otras cosas a que es open source desde un año antes que Django. Sin embargo, Django está ganando bastante popularidad últimamente. 4 puntos (sobre 5) para Ruby on Rails y 3 para Django.

Lenguaje de programación

Python es mucho más utilizado que Ruby. En occidente Ruby es conocido básicamente debido a Ruby on Rails, mientras que sólo en la web de setuptools se listan más de 10.000 librerías para Python. Según el autor programar en Ruby es más divertido, por lo que concluye dando a ambos 4 puntos.

Concepto del framework

Ambos siguen el patrón MVC (Modelo – Vista – Controlador). RoR tiende a hacer las cosas automágicamente, en Django se prefiere la transparencia en lugar del paternalismo. 4 puntos para Django y 3 para Ruby on Rails.

Instalación / estructura de directorios

Ambos son sencillos de instalar. Ruby on Rails fuerza a utilizar una estructura de directorios predeterminada que no tiene porque funcionar en todos los casos. Django es más flexible. 5 puntos para Django y 4 para Ruby on Rails.

Bases de datos y modelo

Ambos usan ORM, al estilo de, por ejemplo, Hibernate (correspondencias entre clases y tablas de una base de datos relacional). Mientras que en RoR se crea primero la base de datos y la clase modelo inspecciona la tabla para determinar los atributos, en Django se define primero la clase modelo y a partir de esta se crea la tabla o tablas en la base de datos.

Ruby on Rails proporciona alguna herramienta adicional interesante, como la migración del esquema de una base de datos automaticamente usando el comando migration que le sitúa con 4 puntos frente a los 3 de Django.

Redirección y controladores

Las correspondencias entre la URL solicitada y la clase controladora que tratará la petición se listan en ambos casos en archivos de configuración. Django permite utilizar expresiones regulares para definir las URLs. 4 puntos para Django, 3 para Ruby on Rails.

En lo que respecta al desarrollo de los controladores en sí, no existen diferencias significativas que no se traten en otros apartados, por lo que ambos obtienen 3 puntos en este apartado.

Plantillas, formularios

Sin diferencias substanciales. 3 puntos para cada uno en ambos casos.

Administración de los datos y los usuarios

Una de las cosas por las que Django es famoso es por poder generar una interfaz para crear, modificar, borrar y listar items de una clase de objetos del modelo de dominio a partir de la clase. Además también se puede buscar, filtrar y ordenar las listas. El problema es que estas páginas son difíciles de modificar, por lo que si necesitas algo que se salga de lo común tendrás que crear esta interfaz de gestión a mano, como siempre.

Rails permite algo similar a través de plugins, pero la alternativa de Django es algo mejor. La gestión de permisos es muy rudimentaria en ambos casos: 2 puntos para ambos.

De nuevo Django permite administrar usuarios permitiendo crear grupos y posibilitando registrar nuevos usuarios mientras que en Ruby on Rails esta misma funcionalidad se logra a través de plugins. Ambos distan mucho de ser perfectos: 2 puntos.

AJAX

En Ruby on Rails el uso de AJAX está totalmente integrado dentro del framework y encapsulan la funcionalidad de los toolkits prototype y Scrip.aculo.us de forma que se puedan añadir distintos efectos AJAX a las páginas sin necesidad de tocar una sola línea de Javascript.

En Django, por contra, se intenta facilitar el uso de toolkits AJAX, pero no se integra ninguno dentro del framework.

4 puntos para Ruby on Rails, 3 para Django.

Documentación

Ambos cuentan con excelente documentación, aunque la de Ruby on Rails es más abundante dado que actualmente es más conocido. 4 puntos para Ruby on Rails, 3 para Django.

Extensiones

La instalación de plugins en Ruby on Rails es sumamente sencilla, en Django es más manual. Existen muchos más plugins para Ruby on Rails.

4 puntos para Ruby on Rails, 2 para Django.

Ciclo de desarrollo

Ambos cuentan con herramientas de depuración maduras. 3 puntos para ambos.

En Ruby on Rails las baterías de pruebas están más integradas en el ciclo de desarrollo. 4 puntos para Rails, 3 para Django.

Rails facilita más el proceso de despliegue de la aplicación: 4 puntos, frente a los 3 de Django.

Conclusión

Haciendo la media el autor da un 3.18 sobre 5 a Ruby on Rails y un 3.27 a Django en el apartado técnico.

Sin embargo, en lo relacionado con el soporte (comunidad, documentación, extensiones de los usuarios, …) Ruby on Rails se alza como claro vencedor con 3.67 puntos frente a los 2.83 de Django.

En conclusión, las notas finales son de 3.35 para Ruby on Rails y 3.12 para Django.

Esperemos que Django comience a alcanzar la popularidad que se merece y empiecen a cambiar las tornas dentro de poco ;-)

]]> http://mundogeek.net/archivos/2007/08/20/ruby-on-rails-vs-django/feed/ 23 Más de 1 millón de descargas de GWT http://mundogeek.net/archivos/2007/06/01/mas-de-1-millon-de-descargas-de-gwt/ http://mundogeek.net/archivos/2007/06/01/mas-de-1-millon-de-descargas-de-gwt/#comments Fri, 01 Jun 2007 12:26:54 +0000 Zootropo http://mundogeek.net/archivos/2007/06/01/mas-de-1-millon-de-descargas-de-gwt/ GWT ha sido descargado más de 1 millón de veces.

]]> http://mundogeek.net/archivos/2007/06/01/mas-de-1-millon-de-descargas-de-gwt/feed/ 1 GWT 1.4 RC http://mundogeek.net/archivos/2007/05/30/gwt-14-rc/ http://mundogeek.net/archivos/2007/05/30/gwt-14-rc/#comments Wed, 30 May 2007 10:18:00 +0000 Zootropo http://mundogeek.net/archivos/2007/05/30/google-web-toolkit-gwt-14/ La release candidate de Google Web Toolkit (GWT) 1.4 ya está disponible para descargar.

Esta es la release más ambiciosa hasta la fecha, con más de 150 errores corregidos y un montón de nuevas características, mejoras y optimizaciones.

  • Mejoras en el tamaño y la velocidad.
    • Gracias a las mejoras introducidas en el compilador el JavaScript generado ocupa entre un 10 y 20% menos.
    • Mejoras en la secuencia de inicio que reduce el tamaño del script de inicio en un 80%. También se reduce la latencia en el inicio, haciendo que los módulos carguen un 33% más rápido
    • Estas mejoras junto al nuevo ImageBundle hacen que las aplicaciones basadas en GWT sean increíblemente rápidas en cargar
  • Mejoras en el despliegue.
    • Se ha mejorado el protocolo RPC de GWT de forma que no tengamos por qué comunicarnos con servlets en el servidor, podemos usar el backend que queramos.
    • Se ha simplificado el mecanismo para añadir módulos GWT a las páginas HTML
    • Includes de scripts cross-site
  • Widgets y librerías.
    • Se puede arrastrar contenido al RichTextArea
    • Se puede lograr funcionalidad de autocompletado con el widget SuggestBox
    • Con HorizontalSplitPanel y VerticalSplitPanel podemos dividir la interfaz.
    • PushButton y ToggleButton son widgets de tipo botón fáciles de modificar para mejorar el aspecto de nuestra interfaz de usuario.
    • DisclosurePanel es un panel sencillo y de aspecto agradable para permitir a los usuarios ocultar y mostrar porciones de la interfaz facilmente.
    • DateTimeFormat y NumberFormat hacen sencillo el uso de fechas, horas y números independientemente del formato usen los usuarios.
    • IncrementalCommand nos ayuda a implementar tareas que requieren de un largo tiempo de ejecución sin que el navegador muestre avisos por la lentitud del script.
    • Nuevo subsistema de benchmark que se integra con JUnit y nos permite comparar la velocidad de nuestro código entre distintos navegadores con distintos parámetros.
    • Soporte para java.io.Serializable, a todos los efectos es sinónimo con IsSerializable de GWT.
    • Soporte para los eventos disparados por la rueda del ratón en diversos widgets.
    • Un montón de otras mejoras
  • ImageBundle. Permite combinar un grupo de imágenes en una sola tira, de forma que podamos usar una sola petición HTTP para cargarlas todas, aumentando bastante la velocidad de carga.
]]> http://mundogeek.net/archivos/2007/05/30/gwt-14-rc/feed/ 3 Suite ofimática usando Ajax http://mundogeek.net/archivos/2006/12/19/suite-ofimatica-usando-ajax/ http://mundogeek.net/archivos/2006/12/19/suite-ofimatica-usando-ajax/#comments Mon, 18 Dec 2006 23:32:15 +0000 Zootropo http://mundogeek.net/archivos/2006/12/19/suite-ofimatica-usando-ajax/ En Ajax13 tienen una completa suite de oficina implementada, cómo no, con Ajax, que consta de las siguientes utilidades:

  • ajaxWrite, una aplicación de edición de textos que permite exportar al formato de Microsoft Word y OpenOffice.org, a RTF, texto y PDF (aunque a mí, por alguna razón, me da un IOException).
  • ajaxSketch, editor gráfico que utiliza el formato SVG.
  • ajaxXLS, una aplicación de hoja de cálculo compatible con Microsoft Excel y la aplicación de hoja de cálculo de OpenOffice.org
  • ajaxPresents, la última aplicación que han programado. Se trata de un clon de Powerpoint.
  • ajaxTunes, un reproductor de música que permite reproducir streamings y con el que puedes permitir a los visitantes de tu web escuchar música almacenada en tu servidor.
]]> http://mundogeek.net/archivos/2006/12/19/suite-ofimatica-usando-ajax/feed/ 0 GWT 1.3: La libertad http://mundogeek.net/archivos/2006/12/13/gwt-13-la-libertad/ http://mundogeek.net/archivos/2006/12/13/gwt-13-la-libertad/#comments Tue, 12 Dec 2006 23:10:20 +0000 Zootropo http://mundogeek.net/archivos/2006/12/13/gwt-13-la-libertad/ Gran día para los aficionados al framework de Google de desarrollo de interfaces de usuario web basadas en AJAX mediante Java. Y es que hoy se anunciaba a bombo y platillo en su weblog oficial que desde la versión 1.3 RC 1, que ya está disponible, todo el código de GWT pasa a estar bajo licencia Apache 2.0. Además, como efecto de su revelación cósmica-colectiva, la gente de Google ha decidido también modificar la licencia de la documentación del sitio web de GWT, que a partir de ahora pasará a ser algo tan permisivo como la licencia Attribution de Creative Commons.

En la página web creada al efecto podeis encontrar información sobre cómo compilar GWT por vosotros mismos, cómo contribuir con nuevo código o discutir decisiones técnicas.

]]> http://mundogeek.net/archivos/2006/12/13/gwt-13-la-libertad/feed/ 1 GWT 1.2 http://mundogeek.net/archivos/2006/11/17/gwt-12/ http://mundogeek.net/archivos/2006/11/17/gwt-12/#comments Fri, 17 Nov 2006 16:43:29 +0000 Zootropo http://mundogeek.net/archivos/2006/11/17/gwt-12/ Ya está en la calle la versión 1.2 de GWT, el framework para la creación de interfaces web en Java de Google.

]]> http://mundogeek.net/archivos/2006/11/17/gwt-12/feed/ 3 GWT 1.2 RC http://mundogeek.net/archivos/2006/11/02/gwt-12-rc/ http://mundogeek.net/archivos/2006/11/02/gwt-12-rc/#comments Thu, 02 Nov 2006 19:42:57 +0000 Zootropo http://mundogeek.net/archivos/2006/11/02/gwt-12-rc/ Pequeña nota para el que le interese.

Google ha hecho publica una primera versión candidata de lo que será GWT 1.2, su framework de desarrollo de GUIs de aplicaciones web con Java.

Lo más interesante es que al fin se soporta totalmente el desarrollo en MacOS X, un hosted mode mucho más rápido y una nueva API para jugar con las peticiones HTTP.

]]> http://mundogeek.net/archivos/2006/11/02/gwt-12-rc/feed/ 0