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

Ajax y jQuery 2/6 – Implementando Hijax

Entendiendo el concepto de Hijax

Demos continuidad al artículo anterior sobre Ajax y jQuery agregando un concepto muy importante a la tecnología Ajax.

El concepto de Hijax es muy interesante aunque realmente no lo suelo escuchar mucho y realmente me costo un poco encontrar una manera de implementarlo, más por el hecho de encontrar una manera sencilla de hacerlo y sin dar tantas vueltas antes que por desarrollar código.

Básicamente se trata de no permitir que nuestro código Ajax elimine la posibilidad de que la funcionalidad normal de nuestra página continúe normalmente. Cuando empezamos a usar Ajax nos entra como una desesperación de usarlo en todo y considero que ese concepto no es el más acertado ya que hay que tener en cuenta a los clientes que no pueden interpretar JavaScript o cuando una página está aún cargando y los usuarios ya quieren dar click a los elementos.

Para ir entendiendo el concepto utilicemos un ejemplo que me parece bastante interesante: twitter.com. No se si lo habrán notado pero cuando entran al sitio y quieren ingresar el usuario y contraseña vemos que hay un botón “Iniciar Sesión”, el cual tiene dos comportamientos diferentes

  • Si el JavaScript necesario ya fue descargado veremos que abre un div para que introduzcamos los datos
  • En caso de que todavía no fue descargado y ya lo presionamos nos daremos cuenta que directamente nos redirecciona a una página diferente para ingresar los datos.

Continúa leyendo Ajax y jQuery 2/6 – Implementando Hijax

Ajax y jQuery 1/6

Introducción a la librería jQuery para Ajax

Dejando por un tiempo los artículos sobre PHP y Symfony, pasemos a hablar sobre uno de los frameworks JavaScript que más me gusta. jQuery es según wikipedia:

… una biblioteca o framework de JavaScript, …, que permite simplificar
la manera de interactuar con los documentos HTML, manipular el árbol
DOM, manejar eventos, desarrollar animaciones y agregar interacción
con la tecnología AJAX a páginas web…
… jQuery, al igual que otras
bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript
que de otra manera requerirían de mucho más código, es decir, con las
funciones propias de esta biblioteca se logran grandes resultados en
menos tiempo y espacio.

Dicho con otras palabras, jQuery es un archivo .js que contiene un montón de código JavaScript programado para hacernos la vida más fácil, abreviandonos el trabajo escribiendo menor cantidad de código. Para dar un ejemplo claro, si quiero obtener un elemento de la página con javascript lo haríamos usando el método getElementById() del objeto document, pasandole como parámetro el nombre del ID del elemento, mientras que con jQuery lo haríamos usando selectores CSS escribiendo jQuery(‘#ELEMENT_ID’). Veamos un ejemplo con el HTML que vamos a usar para el ejemplo.

Continúa leyendo Ajax y jQuery 1/6