AJAX y Peticiones Asíncronas en JavaScript

AJAX (Asynchronous JavaScript and XML) es una técnica que permite enviar y recibir datos del servidor de forma asíncrona, es decir, sin tener que recargar toda la página. Vamos a explorar cómo hacer peticiones asíncronas al servidor y actualizar la interfaz en consecuencia utilizando JavaScript.

Creación de una Petición AJAX

Para crear una petición AJAX, utilizamos la clase `XMLHttpRequest`. También puedes usar `fetch` para hacer peticiones.

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

    if (this.readyState === 4 && this.status === 200) {

        // Acciones a realizar cuando la respuesta está lista

        console.log(this.responseText);

    }

};

xhttp.open("GET", "mi_archivo.txt", true);

xhttp.send();

Tipos de Petición

Existen varios métodos HTTP que puedes utilizar en una petición:

• GET: Obtener datos del servidor.

• POST: Enviar datos al servidor para ser procesados.

• PUT: Actualizar datos en el servidor.

• DELETE: Eliminar datos en el servidor.

Petición GET

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

    if (this.readyState === 4 && this.status === 200) {

        console.log(this.responseText);

    }

};

xhttp.open("GET", "mi_archivo.txt", true);

xhttp.send();

Petición POST

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

    if (this.readyState === 4 && this.status === 200) {

        console.log(this.responseText);

    }

};

xhttp.open("POST", "mi_archivo.php", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("nombre=Juan&edad=30");

Uso de Fetch (Peticiones Modernas)

fetch("mi_archivo.txt")

    .then(response => response.text())

    .then(data => console.log(data))

    .catch(error => console.error("Error:", error));

Actualización de la Interfaz

Puedes actualizar la interfaz en función de la respuesta del servidor.

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

    if (this.readyState === 4 && this.status === 200) {

        document.getElementById("resultado").innerHTML = this.responseText;

    }

};

xhttp.open("GET", "mi_archivo.txt", true);

xhttp.send();

Tratamiento de Respuestas JSON

Si recibes una respuesta en formato JSON, puedes analizarla y trabajar con ella.

fetch("mi_archivo.json")

    .then(response => response.json())

    .then(data => {

        console.log(data);

        // Trabaja con los datos en formato JSON

    })

    .catch(error => console.error("Error:", error));

Estos son los conceptos básicos para hacer peticiones asíncronas al servidor y actualizar la interfaz en consecuencia utilizando AJAX y `fetch` en JavaScript. Esta técnica es fundamental para crear aplicaciones web interactivas y dinámicas. ¡Sigue practicando y experimentando para mejorar tus habilidades en JavaScript!