El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

En esta sección, aprenderás cómo realizar solicitudes HTTP desde tu aplicación JavaScript utilizando Fetch API y AJAX. Estas técnicas son fundamentales para interactuar con servidores y obtener o enviar datos de manera asíncrona, lo que permite crear aplicaciones web dinámicas y responsivas.

¿Qué es AJAX?

AJAX (Asynchronous JavaScript and XML) es una técnica que permite actualizar partes de una página web sin recargarla por completo. Aunque el nombre incluye "XML", AJAX puede trabajar con varios formatos de datos, como JSON, HTML y texto plano.

Ventajas de AJAX

Interactividad Mejorada: Permite actualizar partes de la página sin recargarla completamente.
Mejor Rendimiento: Reduce la cantidad de datos transferidos entre el cliente y el servidor.
Experiencia de Usuario: Proporciona una experiencia más fluida y rápida.

Fetch API

Fetch API es una interfaz moderna que permite realizar solicitudes HTTP de manera más sencilla y legible que el antiguo objeto XMLHttpRequest. Fetch API devuelve Promesas, lo que facilita el manejo de operaciones asíncronas.

Sintaxis Básica

fetch(url, options)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // o response.text(), response.blob(), etc.
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Ejemplo Práctico

Vamos a realizar una solicitud GET a una API pública que devuelve datos en formato JSON.

const url = 'https://jsonplaceholder.typicode.com/posts/1';

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Explicación del Código

fetch(url): Realiza una solicitud HTTP GET a la URL especificada.
response.ok: Verifica si la respuesta del servidor fue exitosa.
response.json(): Convierte la respuesta en un objeto JSON.
.then(data => { ... }): Maneja los datos recibidos.
.catch(error => { ... }): Maneja cualquier error que ocurra durante la solicitud.

Envío de Datos con Fetch API

Fetch API también permite enviar datos al servidor utilizando métodos como POST, PUT y DELETE.

Ejemplo de Solicitud POST

const url = 'https://jsonplaceholder.typicode.com/posts';
const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Explicación del Código

method: 'POST': Especifica el método HTTP.
headers: Define los encabezados de la solicitud, en este caso, indicando que el contenido es JSON.
body: JSON.stringify(data): Convierte el objeto JavaScript en una cadena JSON para enviarlo en el cuerpo de la solicitud.

Ejercicios Prácticos

Ejercicio 1: Realizar una Solicitud GET

Realiza una solicitud GET a la API pública https://jsonplaceholder.typicode.com/users.
Muestra los datos recibidos en la consola.

const url = 'https://jsonplaceholder.typicode.com/users';

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Ejercicio 2: Enviar Datos con POST

Crea un objeto con los siguientes datos:

const newPost = {
  title: 'My New Post',
  body: 'This is the content of my new post.',
  userId: 1
};

Envía este objeto a la API https://jsonplaceholder.typicode.com/posts utilizando el método POST.
Muestra la respuesta en la consola.

const url = 'https://jsonplaceholder.typicode.com/posts';
const newPost = {
  title: 'My New Post',
  body: 'This is the content of my new post.',
  userId: 1
};

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newPost)
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

Resumen

En esta sección, has aprendido cómo utilizar Fetch API para realizar solicitudes HTTP en JavaScript. Fetch API es una herramienta poderosa y moderna que facilita la interacción con servidores y el manejo de datos asíncronos. Practica estos conceptos con los ejercicios proporcionados para consolidar tu comprensión y habilidades.

Próximos Pasos

En la siguiente sección, exploraremos WebSockets, una tecnología que permite la comunicación bidireccional en tiempo real entre el cliente y el servidor.

Fetch API y AJAX

Introducción

¿Qué es AJAX?

Ventajas de AJAX

Fetch API

Sintaxis Básica

Ejemplo Práctico

Explicación del Código

Envío de Datos con Fetch API

Ejemplo de Solicitud POST

Explicación del Código

Ejercicios Prácticos

Ejercicio 1: Realizar una Solicitud GET

Ejercicio 2: Enviar Datos con POST

Resumen

Próximos Pasos

JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización

Módulo 10: Frameworks y Librerías de JavaScript

Módulo 11: Proyecto Final