Una Introducción a AJAX para Diseñadores Front-End

() translation by (you can also view the original English article)

Este serie de tutoriales están dirigidos a familiarizarse con los diseñadores font-end y con los desarrolladores novatos con AJAX, es una técnica front-end esencial.

En este primer tutorial, cubriremos lo básico de AJAX. Empezaremos explorando las diferentes cosas relacionadas a AJAX, aprenderemos exactamente qué es, cómo funciona, y dónde están sus limitaciones. ¡Comencemos!

Nota: Esta serie asume que usted está familiarizado con las principales tecnologías front-end, tales como HTML y CSS.

¿Qué es AJAX?

AJAX significa "Asincrónica JavaScript y XML". No es tan sencillo ni tampoco es una tecnología nueva. De hecho, es un grupo de tecnologías que ya existen (por ejemplo, HTML, CSS, JavaScript, XML, etc) que juntas para construir modernas aplicaciones web.

Con AJAX, un cliente (es decir, un navegador) se comunica con un servidor web y consulta datos. Luego, éste procesa la respuesta del servidor y hace cambios a la página sin recargarla totalmente.

Vamos a desglosar las siglas AJAX:

"Asíncrono", significa que cuando un cliente solicita datos desde un servidor web, no se detiene hasta que el servidor responde. Por el contrario, el usuario aún puede navegar a través de las páginas. Tan pronto como el servidor regresa la respuesta, una función relevante manipula los datos retornados detrás de escena.
"JavaScript" es el lenguaje que instancia una solicitud AJAX, analiza la respuesta correspondiente de AJAX y, finalmente, actualiza el DOM.
Un cliente use el XMLHttpRequest o XHR API para hacer una solicitud a un servidor. Piense en la API (Interfaz de Programación de Aplicaciones) como un conjunto de métodos que especifican las reglas de comunicación entre las dos partes interesadas. Sin embargo, note que los datos recibidos desde una solicitud de AJAX pueden ser en cualquier formato y solamente en formato XML.

¿Cómo funciona AJAX?

Para obtener una idea inicial de como funciona AJAX, eche un vistazo a la siguiente visualización:

Esta visualización describe un típico escenario conducido por AJAX:

El usuario quiere mirar más artículos, así que él o ella hacen clic en el botón meta. Este evento activa una llamada AJAX.
Una solicitud es enviada al servidor. Junto con la solicitud, diferentes datos pueden pasarse. La solicitud puede apuntar a un archivo estático (por ejemplo; muestra.json) el cual está almacenado en el servidor. Alternativamente, es posible ejecutar un script dinámico (por ejemplo, functions.php) punto en el cual el script se comunica con la base de datos (u otro sistema) para extraer datos.
La base de datos envía de regreso los artículos solicitados al servidor. Luego, el servidor los envía al navegador.
JavaScript analiza la respuesta y actualiza las partes específicas del DOM (la estructura de la págnia). Aquí, por ejemplo, solamente la barra lateral está siendo actualizada. Las otras partes de la página no cambian.

Con esto en mente, usted puede entender porque AJAX es un importante concepto para la web moderna. Al desarrollar aplicaciones propulsadas por AJAX, somos capaces de controlar la cantidad de datos que son descargados desde el servidor.

Ejemplos en Vivo de AJAX

AJAX está en todas partes. Para demostrarlo, vamos a mencionar brevemente algunos sitios populares que están tomando ventaja de AJAX.

Primero, considere como funcionan Facebook y Twitter. Mientras usted se desplaza hacia abajo, aparece contenido nuevo gracias a AJAX. Segundo, cuando usted actualiza una votación o descarga una pregunta o una respuesta en Stack Overflow, una función AJAX es activada. Finalmente, tan pronto como usted busca algo en Google o Youtube, varias solicitudes AJAX son ejecutadas.

Además, si queremos, podemos monitorear las solicitudes. Por ejemplo, en la consola del navegador Chrome, hacemos clic-derecho y revisamos la opción Log XMLHttpRequests.

Haciendo actualizaciones

Como mencione anteriormente, para configurar una solicitud de AJAX, usamos XMLHttpRequest API. Adicionalmente, jQuery, la biblioteca más popular de JavaScript, ofrece varias funciones y métodos relacionados con AJAX.

A través de está serie de tutoriales, nos dirigiremos a través de diferentes ejemplos que usan totalmente JavaScript y jQuery para enviar una solicitud a un servidor.

Manipulando las respuestas.

Cuando extraemos datos desde un servidor web, éstos pueden estar en diferentes formatos. XML, JSON, JSONP, completamente de texto, y HTML son los formatos de datos posibles.

XML

XML (eXtensible Lenguaje de Marcado) es uno de los formatos más populares para intercambiar datos entre aplicaciones. Es similar a HTML, ya que XML usa etiquetas para definir su estructura. Sin embargo, note que XML no viene con cualquier etiquetas predefinidas, de hecho, configuramos un documente XML especificando nuestras propias etiquetas. Un ejemplo de su estructura se muestra debajo:

      <person>
          <name>Mike</name>
          <surname>Mathew</surname>
          <nationality>Australian</nationality>
          <languages>
              <language>English</language>
              <language>Spanish</language>
              <language>French</language>
              <language>Russian</language>
          </languages>
      </person>

Hay muchos editores en línea que puede usar para construir documentos XML. Mi editor favorito es:

XMLGrid.net.

Basado en este editor, nuestro ejemplo sería visualizado como se aprecia a continuación:

JSON

JSON (Notación de Objetos de JavaScript) es otro formato de datos de intercambio que es muy popular. Al usar JSON, la mencionada estructura XML se vería así:

      {
        "name"        : "Mike",
        "surname"     : "Mathew",
        "nationality" : "Australian",
        "languages"    :	["English", "Spanish", "French", "Russian"]
      }

De nuevo, usted puede encontrar alrededor de la web muchos editores en línea para JSON. Aquí están los editores que me gusta usar:

Basado en la herramienta de JSON editor en línea, el ejemplo anterior lucirá como este:

Limitaciones de las Solicitudes de AJAX

Antes de empezar a usar AJAX, es importante entender sus limitaciones. Especificamente, mencionaremos dos asuntos muy comunes.

Primero, considere el siguiente error que aparece en la consola del navegador Chrome.

Este error ocurre cuando nuestra solicitud apunta a un archivo local. Aquí hemos tratado de acceder a los datos almacenados en un archivo local (por ejemplo, Demo.json) y no en un servidor. Para superar este problema, podemos instalar un servidor local (por ejemplo, configurar XAMPP como un ambiente de desarrollo local) y almacenar el archivo destino en él.

Segundo, mire el siguiente mensaje de error:

Esto pasa cuando solicitamos datos localizados en otro dominio relativo a nuestra página (conocido como política de restricción del mismo origen). Aquí, por ejemplo, los datos están almacenados en un servidor local, considerando que la página está almacenada en un servidor de Codepen. Aunque por fortuna, hay soluciones para esta restricción.

Una solución para tomar ventaja del CORS (Compartición de Recursos de Origen Cruzados) mecanismo propuesto por la W3C. Note que éste mecanismo nos requiere para hacer algunos cambios en los archivos de configuración de nuestro servidor. Por ejemplo, esta página describe como podemos personalizar el servidor Apache.

Otra opción es para usar la técnica JSONP (JSON con Padding).

En conclusión

Este resumen tendría que haberle dado un buena idea de qué es AJAX, dónde puede encontrarlo y dónde están algunos temas potenciales. Además, examinamos rápidamente los formatos de intercambios más populares que existen. En el siguiente tutorial empezaremos a trabajar en un ejemplo. ¡Lo veré ahí!

Lectura adicional

Si usted quiere saber más acerca de AJAX y Codepen, entonces asegúrese de revisar los siguientes recursos: