← Volver a la lista de posts

JavaScript, jQuery y Ajax

A mediados de los 90’s, la mayoría de sitios Web consistían de páginas estáticas sin ninguna interactividad. Algunos sitios ya generaban páginas dinámicas en el servidor, pero toda acción del usuario requería refrescar la página completamente para ver los cambios. Se necesitaba un lenguaje de programación que corriera en el navegador.

JavaScript

A finales del 1995 surge JavaScript, un lenguaje creado por Brendan Eich, trabajando en ese entonces para Netscape. (No confundas JavaScript con Java, son lenguajes muy diferentes; simplemente fue una movida de mercadeo porque Java era muy popular en ese momento). JavaScript permitía manipular HTML y agregar interactividad en Netscape, que era el navegador más popular en ese momento.

Microsoft lanzó un lenguaje muy similar llamado Jscript para Internet Explorer, y aunque hubo intentos de unificar el lenguaje, nunca hubo consenso. Para el momento en que Internet Explorer se convirtió en el navegador más popular, JavaScript ya era el estándar para escribir código interactivo en el navegador.

Pero había un problema. Aunque el lenguaje era muy similar en los dos navegadores, la forma de manipular HTML era muy diferente. A medida que más navegadores aparecían en el mercado, el problema se hacía cada vez más inmanejable. Cada navegador lo hacía a su manera.

jQuery

En 2006 surge una librería de JavaScript llamada jQuery, escrita por John Resig, para solucionar las diferencias al manipular HTML y escuchar eventos en los navegadores. Aunque ya existían intentos similares en JavaScript, una de las genialidades de jQuery era que utilizaba los mismo selectores CSS para ubicar y manipular los diferentes elementos del DOM.

¿Qué es el DOM?

EL DOM (Document Object Model) es una representación de un documento HTML que nos permite interactuar con los elementos (etiquetas) del documento HTML. La estructura es en forma de árbol similar a como se organizan los directorios y archivos en un sistema operativo. Puedes encontrar más información del DOM acá.

Veamos un ejemplo que cambia el color de un div al hacer click:

jQuery('.square').click(function() {
  jQuery(this).css('background', 'yellow');
});

En este ejemplo estamos escuchando el evento click sobre el div con clase square y cambiando el color a amarillo cuando el evento es disparado. (Recuerda descargar jQuery en jquery.com e incluirlo en tu página para que el ejemplo funcione).

Podemos simplificar un poco más el ejemplo reemplazando la palabra jQuery por $, que ahorra algunos caracteres y es la forma más conocida:

$('.square').click(function() {
  $(this).css('background', 'yellow');
});

jQuery se encarga de las diferencias de los navegadores exponiendo una interfaz clara y fácil de usar que le permite a los desarrolladores concentrarse en la funcionalidad de la aplicación, y no en los detalles de cada navegador.

Ajax

¿Cómo intercambiar información con el servidor sin tener que refrescar la página? Ese es el problema que soluciona Ajax. Recuerdo la primera vez que lo vi en acción en la página del Australian Open viendo el puntaje en vivo; cada vez que cambiaba el puntaje de un partido, parpadeaba y se actualizaba en tiempo real.

Para entender Ajax, es importante primero entender cómo funciona el protocolo HTTP. La idea es que escribiendo un poco de JavaScript sea posible hacer una petición HTTP y recibir una respuesta del servidor con información que podemos utilizar para actualizar la página.

La forma de utilizar Ajax en los navegadores es engorrosa y no la voy a mostrar acá. En cambio, jQuery ofrece una interfaz mucho más sencilla y unificada para todos los navegadores:

$.get('/url_to_fetch', function(data) {
  // do something with data
});

En este ejemplo estamos haciendo una petición HTTP a la ruta /url_to_fetch. La respuesta la encontraremos en data, que puede ser HTML, XML, JSON, o cualquier otra cosa. Últimamente el formato que más se utiliza es JSON sin embargo.

¿Qué es XML y JSON?

Son formatos de intercambio de información. Hace unos años XML (Extensible Markup Language) era muy popular, pero últimamente JSON (JavaScript Object Notation) es más usado. La razón es que XML es muy verboso y más difícil de interpretar.

Por ejemplo, podríamos representar un vuelo en XML:

<flight>
    <airline>Oceanic</airline>
    <number>815</number>
    <departure>
        <iata>SYD</iata>
        <time>2004-09-22 14:55</time>
    </departure>
    <arrival>
        <iata>LAX</iata>
        <time>2004-09-23 10:42</time>
    </arrival>
</flight>

O en JSON:

{
  "airline": “Oceanic”,
  "number": 815,
  "departure": {
   "iata": “SYD”,
   "time": “2004-09-22 14:55”
  },
  "arrival": {
   "iata": “LAX”,
   "time": “2004-09-23 10:42”
  }
}
Otra ventaja de JSON es que es muy fácil de manipular en JavaScript.

Más recursos

¿Cómo convertirte en Desarrollador Web?

Descarga gratis el e-book

Conoce la mentalidad, los roles y las tecnologías que debes saber para convertirte en desarrollador Web.

Descargar e-book