En este artículo crearemos una función universal para realizar diferentes tipos de solicitudes AJAX con una misma instrucción JavaScript. Como hemos visto en la serie introducción a AJAX existen varias técnicas para realizar peticiones AJAX y varios formatos de datos que podemos recibir. Hasta ahora, cada técnica y cada formato se definían en la misma solicitud. Esto nos obliga a crear código en cada parte de nuestra web que realice una petición AJAX y no es práctico. Para solucionarlo, vamos a crear una función universal capaz de realizar solicitudes AJAX en cualquier formato de datos y adaptar su visualización según nuestras necesidades. De esta manera, podemos tener todas las funcionalidades y ventajas de usar AJAX en una misma función universal, mejorando la experiencia del usuario y optimizando el desarrollo de aplicaciones web.
Función universal para solicitudes AJAX
Después todo lo explicado a lo largo de esta serie de artículos, podemos crear una función universal para realizar solicitudes AJAX con el siguiente código:
function callAJAX(method, url, type, elementId, callBack) {
let myElement = document.getElementById(elementId);
let xhr = new XMLHttpRequest();
xhr.responseType = type;
xhr.open(method, url, true);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) callBack(myElement, xhr.response);
else console.error(`Error: ${xhr.status}`);
};
xhr.onerror = function () {
alert("Solicitud fallida");
};
}La función callAJAX() es nuestra función universal para solicitudes AJAX. Realiza una solicitud HTTP asíncrona a un servidor y maneja la respuesta utilizando el objeto XMLHttpRequest. Los parámetros esperados son los siguientes:
method: El método HTTP que se utilizará para la solicitud (por ejemplo,'GET','POST').url: La URL a la que se enviará la solicitud.type: El tipo de respuesta esperada ('text','json','document','blob','arraybuffer', etc.).elementId: Eliddel elemento HTML donde se mostrará el resultado de la solicitud.callBack: Una función de callback que se llamará con la respuesta de la solicitud. Esta función será la encargada de mostrar el resultado.
El funcionamiento de la función callAJAX() es el siguiente:
let myElement = document.getElementById(elementId);Obtiene una referencia al elemento HTML donde se mostrará la respuesta de la solicitud, utilizando elidproporcionado.
let xhr = new XMLHttpRequest();Crea un nuevo objetoXMLHttpRequestque se utilizará para realizar la solicitud HTTP.
xhr.responseType = type;Establece el tipo de respuesta que se espera recibir del servidor.xhr.open(method, url, true);Configura la solicitud con el método HTTP (method), la URL (url) y el parámetrotruepara indicar que la solicitud será asíncrona.xhr.send();Envía la solicitud al servidor.
xhr.onload = function () { ... }Define una función que se ejecuta cuando se recibe una respuesta del servidor.- (
xhr.status === 200): Si la solicitud es exitosa llama a la función de callback (callBack) y le pasa el elemento HTML y la respuesta del servidor. - (
else): Si la solicitud falla muestra un mensaje de error en la consola con el estado de la solicitud.
- (
xhr.onerror = function () { ... }Define una función que se ejecuta si ocurre un error durante la solicitud (por ejemplo, problemas de red). Entonces muestra una alerta con el mensaje «Solicitud fallida».
Código para mostrar solicitudes AJAX
Como hemos visto, nuestra función universal para solicitudes AJAX recibe un parámetro callBack que se llamará una vez obtenida la respuesta. Ahora vamos a ver unas cuantas funciones que podemos utilizar como parámetro callBack para mostrar los diferentes formatos de datos recibidos.
function displayXML(element, response) {
element.innerHTML = new XMLSerializer().serializeToString(response);
}
function displayJSON(element, response) {
element.innerHTML = JSON.stringify(response, null, 2);
}
function displayTEXT(element, response) {
element.textContent = response;
}
function displayBLOB(element, response) {
let reader = new FileReader();
reader.onload = function (event) {
element.textContent = event.target.result;
};
reader.readAsText(response);
}
function displayARRAY(element, response) {
let dataView = new DataView(response);
let result = [];
for (let i = 0; i < dataView.byteLength; i++) {
result.push(dataView.getUint8(i));
}
element.textContent = result.join(', ');
}La explicación de estas funciones para mostrar los diferentes tipos de formatos de datos es la siguiente:
displayXML(): Muestra los datos en formato XML.new XMLSerializer().serializeToString(response): Convierte un objetoDocumentXML a una cadena de texto XML. La funciónXMLSerializer().serializeToString()toma un documento XML y lo convierte en una cadena que puede ser mostrada en HTML.element.innerHTML: Asigna la cadena XML resultante al contenido HTML del elemento especificado. Esto permite mostrar el contenido XML en la página web.
displayJSON(): Muestra los datos en formato JSON.JSON.stringify(response, null, 2): Convierte un objeto JavaScript en una cadena JSON. El segundo parámetronulles para el reemplazar (no se usa en este caso) y2especifica la cantidad de espacios de indentación para hacer el JSON más legible.element.innerHTML: Asigna la cadena JSON formateada al contenido HTML del elemento especificado. Esto permite mostrar el JSON de una forma legible en la página web.
displayTEXT(): Muestra los datos en formato texto plano.element.textContent: Asigna el texto plano recibido al contenido textual del elemento especificado. Esto muestra el texto tal como es, sin formateo adicional.
displayBLOB(): Muestra los datos en formato Blob (Binary Large Object) que a menudo se usa para manejar grandes cantidades de datos binarios.let reader = new FileReader();Crea un nuevo objetoFileReaderque permite leer archivos y blobs.reader.onload = function (event) { ... }Define una función que se ejecutará cuando elFileReaderhaya terminado de leer el Blob. La propiedadresultdel evento contiene el contenido leído.element.textContent = event.target.result;Asigna el contenido textual leído al elemento HTML especificado
reader.readAsText(response);Lee el Blob como texto. Una vez leído, la funciónonloadasigna el contenido del Blob altextContentdel elemento especificado, mostrando el contenido del Blob en la página web.
displayARRAY(): Muestra los datos en formatoArrayBufferque es una representación binaria de datos en memoria.let dataView = new DataView(response);Crea un objetoDataViewpara acceder a los datos delArrayBufferde manera más flexible.result.push(dataView.getUint8(i));Almacena cada byte leído en el arrayresult.dataView.getUint8(i)Lee un valor de 8 bits (un byte) desde la posiciónidelArrayBuffer.
element.textContent = result.join(', ');Asigna la cadena resultante al contenido textual del elemento especificado. Esto muestra los datos delArrayBuffercomo una lista de valores numéricos en la página web.result.join(', ')Convierte el array de bytes en una cadena de texto, con cada byte separado por comas.
Función universal para solicitudes AJAX
La función universal para solicitudes AJAX callAJAX() proporciona una manera flexible de realizar solicitudes HTTP asíncronas, manejar diferentes tipos de respuesta y mostrar los resultados en un elemento HTML. Al utilizar un callback para procesar y mostrar los datos, la hace adaptable a diferentes tipos de respuestas y necesidades de visualización.
Cada función está pensada para manejar y mostrar diferentes tipos de datos que puedes recibir de una solicitud AJAX de forma genérica. Pero puedes adaptar cada función y su representación de los datos según las necesidades de tu web y/o añadir todas las funciones que te sean necesarias.
Con esta función universal para solicitudes AJAX y tienes una buena base para empezar a implementar AJAX en tus propios proyectos web y utilizar AJAX de manera eficiente y segura.
¡ Espero que este artículo sea de vuestro interés !