Ajax y jQuery 6/6 – Procesando formularios con validaciones

Siguiendo con el ejemplo visto en el artículo anterior sobre la serie de Ajax y jQuery, usemos el mismo ejemplo en el cual habíamos creado un script super sencillo y genérico para hacer que nuestro menú utilice llamadas asíncronas al servidor y agreguemos la funcionalidad de envío a nuestro formulario de contacto. Los archivos del ejemplo anterior los puedes descargar de aquí.

El objetivo de este artículo será agregar validaciones a nuestros formularios enviados por Ajax, ya que el envío en sí se encuentra explicado en el artículo sobre Hijax.

Continúa leyendo Ajax y jQuery 6/6 – Procesando formularios con validaciones

Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

Para continuar con la gente que quiere seguir viendo ejemplos sobre la serie de Ajax y jQuery, les tengo preparado un ejemplo más completo, muy sencillo, implementando peticiones asíncronas en los links de un menú. Por supuesto si hacemos esto vamos a usar la idea de Hijax para asegurarnos de que el sitio funcione con y sin Ajax.

Comencemos sin Ajax

El HTML que usaremos de ejemplo, como así también el CSS será muy básico para no desconcentrarnos del punto inicial del Ajax usado con jQuery. Básicamente se trata de un menú creado con una lista no ordenada (<ul><li>). En primer lugar les dejo los archivos del mini sitio sin absolutamente una línea de JavaScript, completamente funcional. Veamos el ejemplo de la primera página.

Continúa leyendo Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

Ajax y jQuery 4/6 – Mostrando mensaje de cargando

En el artículo anterior sobre esta serie de Ajax y jQuery vimos como utilizar las librería jQuery para realizar llamadas asíncronas al servidor de tipo GET y POST. Lo que nos quedaría pendiente sería como hacer para mostrar al usuario algún mensaje que indique que una llamada de este tipo se está realizando, ya que si no mostramos nada el usuario no sabrá que algo se está ejecutando. Pasemos entonces a ver como jQuery nos ayuda con esta funcionalidad.

Eventos de jQuery para detectar llamadas Ajax

Existen 6 eventos en jQuery que nos permiten manejar los estados de la conexión asíncrona que realizamos.

  • ajaxStart(): La conexión al servidor se ha abierto. ver más
  • ajaxSend(): La petición GET o POST fue enviada. ver más
  • ajaxSuccess(): La petición volvió sin errores en la comunicación. ver más
  • ajaxError(): La petición obtuvo un error por ejemplo un 404. ver más
  • ajaxComplete(): La petición ha finalizado, independientemente de haberse devuelto un success o error. ver más
  • ajaxStop(): La conexión al servidor se ha cerrado. ver más

Al principio tantos eventos me resultaron un poco confusos, especialmente entre ajaxStart() y ajaxSend(), y ajaxComplete() y ajaxStop() pero sin embargo con el ejemplo que veremos se puede ver bien el funcionamiento.

Continúa leyendo Ajax y jQuery 4/6 – Mostrando mensaje de cargando

Ajax y jQuery 3/6 – Utilizando GET y POST

Usando Ajax con jQuery para peticiones GET y POST

Habiendo visto los artículos anteriores sobre la introducción a jQuery para la utilización de Ajax y sobre implementación de Hijax, y habiendo entendido la diferencia entre los métodos GET y POST, veremos como realizar llamadas asíncronas con la librería jQuery que nos facilita ampliamente el trabajo.

Veamos un ejemplo sobre el cual trabajaremos usando el Firebug del Firefox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript">
 
        </script>
 
        <style type="text/css">
            #test{
                border: solid #000 1px;
                width:300px;
                height: 350px;
                overflow: auto;
            }
        </style>
 
    </head>
    <body>
 
        <div id="test">contenido inicial</div>
 
    </body>
</html>

Tenemos entonces una página con html que contiene la librería jQuery incluída, un div con id igual a test y un CSS que da formato a dicho div. Abramos el Firebug y comencemos con unos métodos del objeto Element de jQuery que nos permiten manipular el DOM del documento.

Continúa leyendo Ajax y jQuery 3/6 – Utilizando GET y POST

Métodos GET vs POST del HTTP

Entendiendo el concepto de GET y POST

Muchas veces tenemos una idea equivocada sobre la utilización de GET y POST. Tendemos a entender que cuando doy click a un link eso es GET y cuando envío un formulario es POST. Mucho peor, solemos pensar que enviando peticiones POST los datos viajan seguros por no ir como parte de la URL como lo hace GET. Hay un error en este concepto que considero que cuando empezamos a aprender a usar tecnologías Web como por ejemplo PHP es entendible pero que a medida que vamos madurando debemos darnos cuenta que GET y POST no son la diferencia entre links y formularios.

Se suele prestar a confusión ya que tanto GET como POST son métodos del protocolo HTTP el cual esta compuesto por un envío al servidor conocido como petición (request) y una respuesta a dicha solicitud (response).

Protocolo HTTP

Tanto GET como POST, justamente por ser métodos ambos de HTTP, ejecutan un request y response, y a mi criterio esto suele ser parte de la confusión sobre los objetivos reales de ambos métodos.

Continúa leyendo Métodos GET vs POST del HTTP