Un EJemplo de AJAX con vanilla JavaScript

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

Siguiendo con nuestra introducción a AJAX, aquí está un ejemplo que usa el objeto XMLHttpRequest API para inicializar una solicitud AJAX.

Ejemplo de AJAX

De un vistazo a la siguiente estructura:

      <div>
          <img src="Einstein.jpg" alt="Einstein">
          <button id="request">Learn more about Einstein</button>
          <div id="bio"></div>
      </div>

Además, considere la visualización relacionada:

Aquí está lo que queremos que pase: cuando hagamos clic sobre el botón, una solicitud AJAX será ejecutada. Luego, el elemento con el id bio aparecerá y su contenido estará lleno con datos de respuesta. Ese dato es estático y está almacenado en el archivo Bio.txt.

Nota: el archivo está cargado en el servidor Codepen. En esta forma, evitamos problemas de origen cruzados que puede ocurrir.

Debajo está el código AJAX que requerimos:

      var btn = document.getElementById('request');
      var bio = document.getElementById('bio');

      var request = new XMLHttpRequest();

      request.onreadystatechange = function() {
        if(request.readyState === 4) {
          bio.style.border = '1px solid #e8e8e8';
          if(request.status === 200) { 
            bio.innerHTML = request.responseText;
          } else {
          	bio.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
          } 
        }
      }

      request.open('Get', 'Bio.txt');

      btn.addEventListener('click', function() {
        this.style.display = 'none';
        request.send();
      });

Dividido en Pasos

Ahora vamos a describir los pasos para ésta solicitud:

Crear un objeto XMLHttpRequest.
Escribir la función que ejecutará cuando el servidor envíe devuelta el dato de respuesta. El objeto XMLHttpRequest tiene la propiedad onreadystatechange que guarda ésta función. Cada vez que el estado de la solicitud cambia, esta devolución de función es ejecutada.
Monitorear algunas otras propiedades del objeto XMLHttpRequest. Primero, la propiedad readyState específica el estado de nuestra solicitud. A través de AJAX llama a su cambio de valor y puede recibir valores desde 0 hasta 4 (por ejemplo, el valor 4 significa que el dato de respuesta está disponible para nosotros). Segundo, la propiedad status indica si la solicitud requerida es exitosa o no (por ejemplo,el valor 200 define una solicitud exitosa). En este ejemplo, asumiendo que recuperamos el dato de respuesta y que la llamada AJAX es exitosa, actualizamos el contenido del elemento destino. De lo contrario, mostramos un mensaje con información extraída desde el objeto XMLHttpRequest.
Especificar el tipo de solicitud usando el método open. Este método acepta dos parámetros requerido y tres opcionales. El primer parámetro requerido define el método HTTP (por ejemplo, GET o POST). El segundo determina la URL para la cual enviaremos la solicitud. Opcionalmente, pasamos un tercer parámetro booleano que indica si la solicitud es asíncrono (por ejemplo, el valor por defecto true) o síncrono. Los otros dos parámetros opcionales, pueden ser usados para propósitos de autentificación.
Enviar una solicitud cuando el botón es presionado a través del método send. Además, en éste punto ocultamos el botón.

Nota: Si en verdad necesita soporte para una versión muy antigua de Internet Explorer (por ejemplo, IE6 o inferior) usted tiene que crear una instancia del objeto ActiveXObject (vea la sección Paso 1).

La siguiente visualización muestra el cuerpo de nuestra solicitud como ésta se imprime en la consola del navegador.

El demo final luce como este:

Por otra parte, si solicitamos un archivo que no existe, veremos un mensaje similar al siguiente:

Nota: si ejecuta el ejemplo desde su ambiente local (y guarda el archivo Bio.txt en él) el mensaje de error probablemente será diferente. Por ejemplo, podría ver el siguiente resultado:

Aquí está incorporado el código Codepen:

Conclusión

En este tutorial exploramos como podemos implementar un sencilla solicitud de AJAX usando JavaScript.

En la siguiente parte de la serie, nos concentraremos en la funciones y métodos AJAX relacionadas con jQuery. Luego, en la parte final de la serie, trabajaremos con uno o más ejemplos complicados. Así que; ¡manténgase atento!