Peticiones AJAX con librerías externas

En este artículo vamos a explicar cómo hacer peticiones AJAX utilizando las librerías externas Axios, jQuery o SuperAgent. Además de las formas nativas de hacer peticiones AJAX en JavaScript con XMLHttpRequest y fetch, puede ser interesante el uso de librerías externas si ya estás haciendo uso de ellas. Este artículo forma parte de la serie introducción a AJAX. Una serie de artículos donde se explican todas las funcionalidades y utilidades de usar AJAX, mejorando la experiencia del usuario y optimizando el desarrollo de aplicaciones web.

AJAX con la librerías externas: Axios

Una de las formas más populares de hacer peticiones AJAX con librerías externas es Axios. Esta librería simplifica la sintaxis de las solicitudes y ofrece una interfaz más intuitiva que la fetch API. Primero, necesitas incluir Axios en tu proyecto, puedes hacerlo a través de un CDN.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

El siguiente código muestra cómo hacer una solicitud GET a una API usando Axios y manejar la respuesta y los errores.

axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('There was an error!', error));

axios.get('https://api.example.com/data'): Esto inicia una solicitud HTTP GET a la URL especificada. La función get de Axios devuelve una promesa. Esto permite manejar la respuesta y los errores de manera asíncrona.
- .then(response => { ... }): Una vez que la promesa se resuelve exitosamente (la solicitud HTTP se completa y se recibe una respuesta del servidor), el método then se ejecuta.
  - response: Es el objeto que contiene la respuesta del servidor.
  - response.data: Este es el cuerpo de la respuesta que generalmente contiene los datos solicitados. En la mayoría de los casos, estos datos están en formato JSON.
  - Muestra los datos recibidos en la consola.
- .catch(error => { ... }): Si la promesa se rechaza (por ejemplo, si ocurre un error durante la solicitud HTTP), el método catch se ejecuta.
  - error: Es el objeto que contiene detalles sobre el error que ocurrió.
  - console.error('There was an error!', error): Muestra un mensaje de error en la consola junto con el objeto error.

Peticiones AJAX con la librería jQuery

Otra de las formas más populares de hacer peticiones AJAX con librerías externas es jQuery. Si ya estás utilizando jQuery en tu proyecto, su función $.ajax() simplifica el manejo de peticiones AJAX. El siguiente código muestra cómo hacer una solicitud GET a una API usando jQuery y manejar la respuesta y los errores.

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error:', textStatus, errorThrown);
    }
});

$.ajax({ ... }) Es el método de jQuery para realizar solicitudes AJAX. Es muy flexible y permite especificar una amplia variedad de opciones para configurar la solicitud.
- url: 'https://api.example.com/data', Esta opción especifica la URL a la que se envía la solicitud AJAX.
- method: 'GET', Define el método HTTP que se va a utilizar para la solicitud. En este caso, se utiliza 'GET', que se emplea para solicitar datos del servidor. Otros métodos comunes incluyen 'POST', 'PUT', y 'DELETE'.
- dataType: 'json', Especifica el tipo de datos que se espera recibir del servidor. En este caso, 'json' indica que se espera recibir datos en formato JSON. jQuery automáticamente analizará el JSON recibido en un objeto JavaScript.
- success: function(data) { ... }, Esta opción define una función de callback que se ejecuta si la solicitud se completa con éxito.
  - data: El parámetro data representa los datos recibidos del servidor, ya convertidos a un objeto JavaScript si dataType es 'json'.
  - console.log(data); Imprime los datos recibidos en la consola del navegador para inspección.
- error: function(jqXHR, textStatus, errorThrown) { ... } Esta opción define una función de callback que se ejecuta si la solicitud falla por cualquier razón (por ejemplo, problemas de red, respuesta del servidor con estado de error, etc.).
  - jqXHR: El objeto jqXHR (jQuery XMLHttpRequest) es una extensión del objeto XMLHttpRequest y contiene propiedades y métodos adicionales útiles para manejar la respuesta de la solicitud AJAX.
  - textStatus: Una cadena que describe el tipo de error que ocurrió. Puede ser uno de «timeout», «error», «abort», o «parsererror».
  - errorThrown: Una cadena que contiene el texto del error lanzado por el servidor.
  - console.error('Error:', textStatus, errorThrown); Imprime un mensaje de error en la consola del navegador, incluyendo el estado del texto del error (textStatus) y el texto del error lanzado (errorThrown).

Tipos de datos AJAX con jQuery

Al realizar peticiones AJAX con librerías externas como jQuery, también podemos definir las respuestas en un formato determinado según el valor de dataType. Los más habituales son los siguientes:

'json' Se utiliza para datos en formato JSON y jQuery convierte automáticamente la respuesta en un objeto JavaScript.
'text' Para datos en formato de texto plano.
'xml' Para datos en formato XML y jQuery convierte la respuesta en un documento XML que se puede manipular con métodos DOM.
'html' Para datos en formato HTML y la respuesta se trata como texto que puede ser insertado directamente en el DOM.
'script' Para datos que contienen código JavaScript y jQuery ejecuta el script automáticamente cuando la solicitud tiene éxito.

AJAX con la librerías externas: SuperAgent

Otra de las formas más populares de hacer peticiones AJAX con librerías externas es SuperAgent. Otra de las librerías más populares para hacer peticiones AJAX. Las solicitudes HTTP son similares a Axios y proporciona una API fácil de usar como alternativa a un estilo de programación más fluido.

Primero, necesitas incluir SuperAgent en tu proyecto, puedes hacerlo a través de un CDN.

<script src="https://cdn.jsdelivr.net/npm/superagent"></script>

El siguiente código muestra cómo hacer una solicitud GET a una API usando SuperAgent y manejar la respuesta y los errores.

superagent
  .get('https://api.example.com/data')
  .then(response => console.log(response.body))
  .catch(error => console.error('Error:', error));

superagent Este es el objeto principal de la librería SuperAgent que se utiliza para realizar solicitudes HTTP. Debes asegurarte de haber importado SuperAgent en tu proyecto.
- .get('https://api.example.com/data') Este método de SuperAgent realiza una solicitud HTTP GET a la URL especificada.
- .then(response => console.log(response.body)) Este método se ejecuta cuando la solicitud HTTP se completa exitosamente. SuperAgent usa promesas para manejar las respuestas de manera asíncrona.
  - response: Es el objeto que contiene la respuesta del servidor.
  - response.body: Es donde se encuentran los datos de la respuesta. SuperAgent automáticamente analiza la respuesta en un objeto JavaScript si la respuesta es JSON.
  - Imprime los datos de la respuesta en la consola.
- .catch(error => console.error('Error:', error)); Este método se ejecuta si la solicitud HTTP falla. Maneja cualquier error que ocurra durante la solicitud.
  - error Es el objeto que contiene detalles sobre el error.
  - console.error('Error:', error) Imprime un mensaje de error en la consola junto con el objeto error.