Fetch/XMLHttpRequest en JavaScript
Este artículo explica Fetch/XMLHttpRequest en JavaScript.
YouTube Video
javascript-html-fetch-xhr.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <div id="output"></div>
108 </div>
109
110 <script>
111 // Override console.log to display messages in the #output element
112 (function () {
113 // Override console.log
114 const originalLog = console.log;
115 console.log = function (...args) {
116 originalLog.apply(console, args);
117 const message = document.createElement('div');
118 message.textContent = args.map(String).join(' ');
119 output.appendChild(message);
120 };
121
122 // Override console.error
123 const originalError = console.error;
124 console.error = function (...args) {
125 originalError.apply(console, args);
126 const message = document.createElement('div');
127 message.textContent = args.map(String).join(' ');
128 message.style.color = 'red'; // Color error messages red
129 output.appendChild(message);
130 };
131 })();
132
133 document.getElementById('executeBtn').addEventListener('click', () => {
134 // Prevent multiple loads
135 if (document.getElementById('externalScript')) return;
136
137 const script = document.createElement('script');
138 script.src = 'javascript-html-fetch-xhr.js';
139 script.id = 'externalScript';
140 //script.onload = () => console.log('javascript-html-fetch-xhr.js loaded and executed.');
141 //script.onerror = () => console.log('Failed to load javascript-html-fetch-xhr.js.');
142 document.body.appendChild(script);
143 });
144 </script>
145</body>
146</html>Fetch/XMLHttpRequest en JavaScript
Fetch y XMLHttpRequest (XHR) en JavaScript se utilizan para enviar solicitudes HTTP y recuperar datos de un servidor.
Fetch API
La Fetch API es un método moderno para manejar solicitudes HTTP, diseñado como sucesor de XHR. Es una API asíncrona basada en Promesas, que permite un manejo de solicitudes más simple y flexible.
Uso
1fetch('http://127.0.0.1:3000/example.json')
2 .then((response) => {
3 if (!response.ok) {
4 throw new Error('HTTP error: ' + response.status);
5 }
6 return response.json(); // Parse the response as JSON
7 })
8 .then((data) => {
9 console.log(data); // Use the fetched data
10 console.log(JSON.stringify(data));
11 })
12 .catch((error) => {
13 console.error('An error occurred:', error); // Error handling
14 });- Este código envía una solicitud GET a la URL especificada utilizando la
Fetch API, procesa la respuesta como JSON y muestra el resultado o muestra un error.
Características
La Fetch API tiene las siguientes características:.
- Basado en Promesas Las operaciones asíncronas se pueden gestionar con Promesas, lo que hace el código más limpio y fácil de leer.
- Manejo de errores sencillo
Los errores se pueden manejar fácilmente utilizando el bloque
catch. - Análisis con métodos como
response.json()Los datos de la respuesta pueden ser procesados fácilmente en formato JSON o texto. - Soporte para CORS
Fetchopera basado en las reglas de Compartición de Recursos de Origen Cruzado (CORS). - Configuración de solicitudes flexible No sólo GET/POST, sino que también métodos HTTP como PUT y DELETE pueden configurarse fácilmente.
Ejemplo: Solicitud POST
1fetch('http://127.0.0.1:3000/example.json', {
2 method: 'POST',
3 headers: {
4 'Content-Type': 'application/json'
5 },
6 body: JSON.stringify({ name: 'Alice', age: 25 }) // Send the request body as JSON
7 })
8 .then(response => response.json())
9 .then(data => console.log(JSON.stringify(data)))
10 .catch(error => console.error('Error:', error));- Este código envía una solicitud POST con datos en formato JSON y recibe y muestra la respuesta del servidor como JSON.
Desventajas
La Fetch API tiene las siguientes desventajas:.
- Compatibilidad con navegadores
Los navegadores antiguos (especialmente IE11) no son compatibles con la
Fetch API. - Difícil de realizar control detallado En comparación con XHR, no es adecuado para controles de bajo nivel como el manejo de eventos de progreso.
XMLHttpRequest（XHR）
XMLHttpRequest es una API que se ha utilizado durante mucho tiempo para manejar solicitudes HTTP y se ha utilizado ampliamente como base para AJAX (JavaScript asíncrono y XML). Permite comunicación asíncrona, permitiendo recuperar datos del servidor sin recargar toda la página.
Uso
1const xhr = new XMLHttpRequest();
2xhr.open('GET', 'http://127.0.0.1:3000/example.json', true);
3xhr.onreadystatechange = function() {
4 if (xhr.readyState === 4 && xhr.status === 200) {
5 const data = JSON.parse(xhr.responseText); // Parse the response as JSON
6 console.log(data); // Use the data
7 console.log(JSON.stringify(data));
8 }
9};
10xhr.send(); // Send the request
- Este código envía una solicitud GET utilizando
XMLHttpRequest, analiza la respuesta JSON recibida y la muestra.
Características
XMLHttpRequest tiene las siguientes características:.
- Basado en callbacks
Las funciones de callback como
onreadystatechangese utilizan para monitorizar la finalización o el progreso de la solicitud. - Monitoreo de códigos de estado y estados de preparación
El estado de la solicitud puede comprobarse utilizando
xhr.readyStateyxhr.status. - Amplia compatibilidad Funciona incluso en navegadores antiguos.
- Monitorizar el progreso de la solicitud
El progreso puede ser monitorizado mediante eventos como
xhr.upload.onprogress.
Ejemplo: Solicitud POST
1const xhr = new XMLHttpRequest();
2xhr.open('POST', 'http://127.0.0.1:3000/example.json', true);
3xhr.setRequestHeader('Content-Type', 'application/json');
4xhr.onreadystatechange = function() {
5 if (xhr.readyState === 4 && xhr.status === 200) {
6 const data = JSON.parse(xhr.responseText);
7 console.log(data);
8 console.log(JSON.stringify(data));
9 }
10};
11xhr.send(JSON.stringify({ name: 'Alice', age: 25 })); // Send the data
- Este código envía una solicitud POST con datos JSON utilizando
XMLHttpRequest, recibe la respuesta y la muestra.
Desventajas
XMLHttpRequest tiene las siguientes desventajas:.
- Complejidad del código Gestionar el procesamiento asíncrono con funciones de callback tiende a ser complejo.
- Sin soporte nativo para Promesas Como las Promesas no son compatibles por defecto, el procesamiento asíncrono se vuelve algo más extenso.
Comparación entre Fetch API y XMLHttpRequest
| Características | Fetch API |
XMLHttpRequest (XHR) |
|---|---|---|
| Procesamiento asincrónico | Simple con Promesas | Requiere funciones de callback |
| Manejo de errores | Manejable con .catch() |
Verifica el estado readyState |
| Eventos de progreso | No soportado | Manejado con onprogress |
| Soporte de origen cruzado | Soporta automáticamente CORS | Soporta CORS |
| Compatibilidad con navegadores | No soportado en IE11 y anteriores | Compatible con navegadores antiguos |
| Granularidad del control | Simple e intuitivo | Permite un control detallado |
Resumen
- La Fetch API ofrece solicitudes HTTP simples y flexibles basadas en Promises y se recomienda en navegadores modernos.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.