[AFO028L7M] Curso de Analista Programador Javascript

[MOD024H2Y] Analista Programador Javascript

[UDI152LMR] Ajax con JavaScript

Introducción

AJAX, o Asynchronous JavaScript and XML, es una técnica fundamental en el desarrollo web que

permite realizar solicitudes asíncronas al servidor sin tener que recargar la página completa. A

través de AJAX, los desarrolladores pueden actualizar dinámicamente el contenido de una página,

interactuar con servidores para obtener o enviar datos, y mejorar significativamente la experiencia

del usuario al ofrecer aplicaciones web más rápidas y fluidas. En lugar de esperar a que se cargue

una nueva página, AJAX permite realizar operaciones en segundo plano, brindando respuestas más

om
rápidas y una interfaz más interactiva. Esta técnica utiliza una combinación de JavaScript, XML o

JSON para transmitir datos y se ha vuelto esencial en el desarrollo moderno de aplicaciones web.

s.c
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
1 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Objetivos

Entender AJAX y conocer eventos asociados a él.

Aprender a realizar solicitudes AJAX.

Identificar y abordar problemas comunes.

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
2 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Mapa Conceptual

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
3 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

1. ¿Qué es AJAX?

AJAX, que corresponde a las siglas en inglés de "Asynchronous JavaScript and XML," constituye un

conjunto de técnicas de desarrollo web que posibilitan el funcionamiento asíncrono de las

aplicaciones web. Esto implica el procesamiento de solicitudes al servidor en segundo plano, lo cual

permite una mayor eficiencia en la interacción con el usuario. Se procederá a revisar cada uno de

los términos que conforman AJAX de manera individual.

om
JavaScript, un lenguaje de programación ampliamente reconocido, desempeña diversas funciones,

incluyendo la gestión del contenido dinámico de un sitio web y facilitando la interacción dinámica

.c
del usuario. Por otro lado, XML, abreviatura de "eXtensible Markup Language," representa otra

variante de lenguaje de marcado, similar a HTML. A diferencia de HTML, que se centra en la

s
ro
presentación de datos, XML está diseñado específicamente para contener y transportar datos.
ha
En el contexto de AJAX, tanto JavaScript como XML operan de manera asíncrona, lo que significa

que las aplicaciones web que emplean AJAX tienen la capacidad de enviar y recuperar datos del
ap

servidor sin necesidad de recargar la página completa.

l

Es necesario hacer hincapié en los siguientes puntos:

au

Ejemplos prácticos de AJAX.

a.

Funcionamiento de AJAX.
os
m

1.1. Ejemplos prácticos de AJAX

ce

Ejemplos prácticos de AJAX pueden encontrarse en diversas aplicaciones web que aprovechan sus

capacidades para mejorar la experiencia del usuario. Un caso destacado es la función de

autocompletado de Google, la cual, al escribir palabras clave, proporciona sugerencias en tiempo

real sin requerir la recarga de la página completa. En comparación con la década de 1990, cuando la

recarga de la página era necesaria para mostrar nuevas recomendaciones, AJAX permite que el

intercambio de datos y la presentación coexistan de manera fluida.

Otro ejemplo emblemático es el uso de AJAX en la funcionalidad de autocompletado de Google. Al

cemosa.aulapharos.com
4 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

ingresar palabras clave, las sugerencias se actualizan en tiempo real sin la necesidad de recargar la

página completa. En la década de 1990, esta función habría implicado la recarga constante de la

página para mostrar nuevas recomendaciones, pero gracias a AJAX, el intercambio de datos y la

presentación pueden operar simultáneamente sin interferencias.

Además de Google, AJAX se emplea extensamente en aplicaciones web para agilizar la comunicación

con el servidor. A continuación, se presentan más ejemplos de su aplicación práctica en la vida

cotidiana:

om
.c
Sistemas de votación y calificación

s
Al calificar productos comprados en línea o completar formularios de votación, AJAX permite

ro
que el sitio web actualice el cálculo sin recargar la página completa, mejorando la eficiencia
de estas operaciones.
ha
Salas de chat
ap

Los sitios web con funciones de chat incorporadas utilizan AJAX para facilitar la
comunicación en tiempo real. Puedes enviar y recibir mensajes sin recargar la página
principal, lo que permite explorar otras secciones del sitio mientras interactúas.
l
au

Notificación de tendencias en Twitter

a.

Twitter incorpora AJAX en sus actualizaciones para mostrar nuevas cifras relacionadas con
temas de tendencia sin afectar la visualización de la página principal. Esta funcionalidad
permite mantenerse al tanto de las tendencias de manera fluida.
os
m

1.2. Funcionamiento de AJAX

ce

El funcionamiento de AJAX implica el uso coordinado de varias tecnologías para lograr la

comunicación asíncrona entre el navegador web y el servidor. Aunque AJAX no constituye una única

tecnología o lenguaje de programación, sino más bien un conjunto de técnicas de desarrollo web,

generalmente se compone de los siguientes elementos:

HTML o XHTML se utiliza como el lenguaje principal para la estructura del contenido, mientras

que CSS se emplea para la presentación y el diseño.

cemosa.aulapharos.com
5 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

El DOM se utiliza para representar dinámicamente y manipular la estructura del documento,

permitiendo la interacción con datos de visualización dinámicos.

XML se emplea para el intercambio de datos entre el navegador y el servidor. Sin embargo,

muchos desarrolladores han optado por JSON debido a su similitud con JavaScript.

XSLT se utiliza para manipular los datos XML, pero en muchos casos, los desarrolladores

prefieren utilizar JavaScript para esta tarea.

El objeto XMLHttpRequest es esencial para la comunicación asíncrona entre el navegador y el

servidor. Facilita el envío y recepción de datos sin tener que recargar la página completa.

om
JavaScript actúa como el lenguaje de programación principal que integra todas estas

tecnologías y coordina las interacciones entre el cliente y el servidor.

s .c
En términos generales, el procedimiento de funcionamiento de AJAX se puede describir de la

ro
siguiente manera:
ha
El navegador web crea una llamada de JavaScript, activando el objeto XMLHttpRequest.
ap

En segundo plano, el navegador envía una solicitud HTTP al servidor sin recargar la página.

El servidor recibe la solicitud, recupera los datos necesarios y los envía de vuelta al navegador.
l
au

El navegador web recibe los datos y los muestra directamente en la página, sin necesidad de

recargarla.
a.
os
m
ce

cemosa.aulapharos.com
6 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

om
s.c
ro
ha
l ap
au
a.
os

Esquema HTML
m

Esta forma de operar contrasta con el modelo convencional, donde cada interacción implicaba una
ce

recarga completa de la página. La implementación de AJAX permite una experiencia de usuario más

fluida al actualizar partes específicas de la página de manera asíncrona, evitando la espera

innecesaria y reduciendo la carga en el servidor.

cemosa.aulapharos.com
7 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

2. Solicitud y respuesta de AJAX

Ajax es una forma convencional de realizar solicitudes HTTP de manera asincrónica, permitiendo el

envío de datos mediante el método HTTP POST y la recepción mediante el método HTTP GET. A

continuación, se explorará un ejemplo de solicitud GET utilizando la API REST gratuita

JSONPlaceholder.

Para llevar a cabo una llamada HTTP mediante Ajax, es necesario inicializar un nuevo objeto

om
XMLHttpRequest(), especificar la URL del punto final y el método HTTP (en este caso, GET).

Posteriormente, se utiliza el método open() para vincular el método HTTP y la URL del punto final, y

.c
se llama al método send() para enviar la solicitud.

s
ro
ha
l ap
au

HTTPREQUEST
a.

Al observar la consola del navegador, se mostrará una matriz de datos en formato JSON como

respuesta a la solicitud. Para verificar si la solicitud se ha completado, se utiliza la propiedad

os

onreadystatechange, que incluye los métodos readyState y status para evaluar el estado de la
m

solicitud. Cuando readyState es igual a 4, indica que la solicitud está completada.

ce

Ready state

Además de realizar llamadas Ajax directamente con JavaScript, existen métodos más potentes para

cemosa.aulapharos.com
8 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

realizar solicitudes HTTP, como $.ajax, que es una función de jQuery. Este enfoque ofrece

funcionalidades avanzadas para el manejo de solicitudes HTTP.

2.1. Métodos de JQuery

jQuery proporciona varios métodos para facilitar el manejo de solicitudes HTTP de manera sencilla.

A continuación, se describen algunos de los métodos clave:

om
$.ajax: este método es uno de los más versátiles para realizar llamadas HTTP en jQuery. Puede

aceptar varios parámetros, algunos de los cuales son obligatorios, y proporciona opciones de

.c
devolución de llamada, como success y error, para manejar la respuesta obtenida.

s
ro
ha
l ap
au
a.
os

Ajax
m

$.get: el método $.get se utiliza específicamente para ejecutar solicitudes GET. Requiere dos
ce

parámetros: la URL del endpoint y una función de devolución de llamada para manejar la

respuesta.

Get

cemosa.aulapharos.com
9 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

$.getJSON: este método se utiliza para recuperar datos en formato JSON. Toma dos

parámetros: la URL del endpoint y una función de devolución de llamada.

om
GetJSON

$.post: se utiliza para enviar datos al servidor mediante una solicitud POST. Requiere tres

.c
parámetros: la URL, los datos a enviar y una función de devolución de llamada para manejar la

s
respuesta.

ro
ha
l ap
au

Post
a.

fetch: es una API web moderna que permite realizar solicitudes asincrónicas. Devuelve una

"Promise" que facilita el manejo de operaciones asíncronas de manera más eficiente. Puede
os

aceptar varios parámetros opcionales.

m
ce

Fetch

Es importante destacar que estos métodos facilitan significativamente el manejo de solicitudes HTTP

en comparación con el enfoque tradicional de JavaScript. Sin embargo, es necesario incluir la

biblioteca jQuery en el proyecto para utilizar estos métodos. Además, se menciona la API fetch, que

cemosa.aulapharos.com
10 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

es una opción moderna y poderosa para realizar solicitudes HTTP, especialmente cuando se trabaja

con Promesas en el contexto de ECMAScript 6 (ES6).

2.2. Eventos con Ajax desde get

Entre todos los eventos disponibles en jQuery para las operaciones Ajax, hay tres eventos que

pueden ser gestionados en las conexiones realizadas mediante la función $.get():

om
Error: este evento ocurre cuando la solicitud experimenta un error, generalmente al intentar

acceder a una URL inexistente o cuando el servidor no responde en el tiempo esperado.

.c
Éxito: este evento tiene lugar cuando la solicitud Ajax se completa exitosamente.

s
Completo: este evento se desencadena cuando la solicitud ha concluido, sin importar si fue

ro
exitosa o fallida. El orden en el que se suceden los eventos asegura que "Completo" sea el
ha
último en ejecutarse. En otras palabras, primero se desencadenará un evento "Error" o "Éxito"

(según si la solicitud Ajax pudo o no obtener una respuesta positiva), y luego se activará
ap

"Completo", independientemente del resultado obtenido.

l
au

En la operación con eventos Ajax utilizando la función jQuery.get(), se puede seguir el siguiente

esquema de trabajo:
a.

En primer lugar, se almacena una referencia al objeto devuelto por la función $.get() en una variable
os

de JavaScript.
m
ce

Get()

El objeto resultante, perteneciente a la clase jqXHR (abreviatura de jQuery XHR object), implementa

métodos relacionados con Ajax.

Luego, se pueden definir los eventos deseados mediante métodos invocados sobre el objeto jqXHR.

El nombre del evento que se desea definir se pasa como parámetro, junto con la función que se

ejecutará como respuesta al evento.

cemosa.aulapharos.com
11 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Error

Este código permite gestionar el evento de error, y se puede seguir el mismo enfoque para otros

eventos como "success" o "complete" según las necesidades. Cada evento puede tener su propia

om
función asociada para manejar la lógica correspondiente cuando se dispare.

.c
2.3. Definición de un evento error y success de solicitud Ajax

s
ro
En el primer ejemplo, se implementa un evento "error" para manejar situaciones en las que la

solicitud Ajax no se completa con éxito. La URL proporcionada a $.get() no existe, por lo que se
ha
generará un evento "error", y se muestra un mensaje de alerta.
l ap
au
a.

Error
os

En el segundo ejemplo, se implementan los eventos "success" y "complete", y se demuestra el orden

de ejecución de estos eventos mediante mensajes en cajas de alerta. Se destacan tres pasos distintos
m

en el proceso de solicitud, y se muestra cómo cada evento se ejecuta en un orden específico.

ce

cemosa.aulapharos.com
12 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Success

Es importante señalar que el evento "complete" se ejecutará tanto en caso de éxito como de fallo en

la solicitud Ajax, mientras que el evento "success" solo se ejecuta cuando la solicitud se realiza con

éxito. Si hay un fallo en la conexión a la página "contenido-ajax.html", solo se mostrará la caja de

alerta del "paso 3", correspondiente al evento "complete".

om
s.c
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
13 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

3.Trabajar con datos JSON

JSON, acrónimo de "JavaScript Object Notation" (Notación de Objetos de JavaScript), es un formato

de datos basado en texto que sigue la sintaxis de objetos de JavaScript. Este formato fue

popularizado por Douglas Crockford. Aunque guarda similitud con la sintaxis de objetos literales de

JavaScript, puede ser utilizado de manera independiente a JavaScript. Muchos entornos de

programación cuentan con la capacidad de leer (convertir o analizar) y generar JSON.

om
Las representaciones en JSON son cadenas de texto y resultan especialmente útiles cuando se desea

transmitir datos a través de una red. Para acceder a los datos contenidos en un objeto JSON, es

.c
necesario convertirlo a un objeto nativo de JavaScript. Afortunadamente, JavaScript proporciona un

objeto global llamado JSON que contiene métodos para facilitar esta conversión.

s
ro
Es importante destacar que la conversión de una cadena a un objeto nativo se denomina "parsing",
ha
mientras que la conversión de un objeto nativo a una cadena, para que pueda ser transferido a

través de la red, se denomina "stringification".

ap

Un objeto JSON puede almacenarse en un archivo propio, que es esencialmente un archivo de texto
l

con la extensión .json. Además, suele tener un tipo MIME (en-US) de application/json.
au
a.

3.1. Estructura del JSON

os

Una jerarquía de datos puede ser creada a través de JSON, el cual presenta un formato similar al de
m

los objetos literales de JavaScript. En JSON, es posible incorporar los mismos tipos de datos

fundamentales que se encuentran en un objeto convencional de JavaScript. Estos datos incluyen

ce

cadenas, números, arreglos, booleanos y otros literales de objeto:

cemosa.aulapharos.com
14 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

om
.c
s
ro
ha
l ap
au
a.
os

JSON
m

Si este objeto se carga en un programa de JavaScript y se convierte (se parsea) en una variable,
ce

como por ejemplo superHeroes, se pueden acceder a los datos que contiene utilizando la notación

de punto/corchete, tal como se revisó en el artículo sobre los fundamentos de los objetos en

JavaScript. Por ejemplo:

Active

Acceder a los datos situados en capas más profundas de la estructura jerárquica implica

cemosa.aulapharos.com
15 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

simplemente unir los índices de los arreglos y los nombres de las características correspondientes.

Como ilustración, para alcanzar el segundo talento extraordinario del héroe número dos consignado

en el registro de integrantes, se procedería de la siguiente manera:

Acceso

om
Este enfoque permite gestionar la información contenida en el objeto JSON, accediendo a las

diferentes propiedades y elementos del arreglo de manera impersonal.

s .c
3.2. Arreglos como JSON

ro
ha
Los arreglos también pueden representarse como JSON. Como se mencionó anteriormente, el texto

JSON se asemeja a un objeto JavaScript, y esto se aplica también a los arreglos. Un arreglo en sí
ap

mismo es un JSON válido, como se muestra en el siguiente ejemplo:

l
au
a.
os
m
ce

Arreglos

Este es un JSON completamente válido. Para acceder a esta versión convertida, se debe iniciar con

un índice de arreglo, por ejemplo, [0]["powers"][0].

cemosa.aulapharos.com
16 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Algunas consideraciones adicionales:

Un formato de datos exclusivo es JSON, y solo contiene propiedades, sin métodos presentes.

Para las cadenas y los nombres de propiedades en JSON, es imperativo usar comillas dobles;

las comillas simples no tienen cabida.

La incorrecta colocación de comas o dos puntos puede resultar en un mal funcionamiento de un

archivo JSON. Validar cualquier dato que se quiera usar es esencial. Aunque los JSON

generados por la computadora tienen menos posibilidades de contener errores, esto depende

om
de que el programa generador funcione adecuadamente. La validación de JSON se puede llevar

a cabo utilizando herramientas como JSONLint.

.c
Cualquier tipo de datos válido puede ser representado en JSON para su inclusión, no

s
restringiéndose solo a arreglos u objetos. Por ejemplo, objetos JSON válidos podrían ser una

ro
cadena o un número único.
ha
A diferencia del código JavaScript, donde las propiedades del objeto pueden no estar entre

comillas, en JSON, solo se pueden usar como propiedades las cadenas entre comillas.
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
17 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

4. Uso de XMLHttpRequest

XMLHttpRequest es un objeto nativo del navegador que posibilita realizar solicitudes HTTP desde

JavaScript.

Aunque lleva la palabra "XML" en su nombre, tiene la capacidad de trabajar con cualquier tipo de

datos, no limitándose únicamente al formato XML. Esto implica que se puede cargar y descargar

archivos, realizar seguimiento y llevar a cabo diversas tareas más allá de la manipulación de datos

om
en formato XML.

Aunque actualmente existe un método más moderno llamado "fetch" que, en ciertos aspectos, ha

.c
vuelto obsoleto a XMLHttpRequest, este último sigue siendo utilizado en el desarrollo web moderno

s
por varias razones:

ro
ha
Razones históricas: Es necesario mantener la compatibilidad con scripts existentes que

utilizan XMLHttpRequest.
ap

Compatibilidad con navegadores antiguos: En ocasiones, se debe dar soporte a

navegadores más antiguos que no son compatibles con el método "fetch". Además, en algunos
l
au

casos, no se desea utilizar polyfills (soluciones que emulan funcionalidades no nativas) para

mantener los scripts lo más pequeños posible.

a.

Funcionalidades específicas: XMLHttpRequest sigue siendo preferido cuando se necesita

os

realizar operaciones específicas que fetch no puede manejar completamente, como rastrear el

progreso de una subida de archivos.

m
ce

4.1. Conceptos básicos

XMLHttpRequest cuenta con dos modos de operación: síncrono y asíncrono. En esta explicación,

abordaré primero el modo asíncrono, ya que es el más comúnmente utilizado.

Para llevar a cabo una solicitud mediante XMLHttpRequest en modo asíncrono, se siguen los

siguientes tres pasos:

Uno. Crear el objeto XMLHttpRequest.

cemosa.aulapharos.com
18 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

El constructor no requiere argumentos.

xmlhttprequest

Dos. Inicializar el objeto.

om
.c
Inicialización

s
ro
Este método establece los parámetros fundamentales para la solicitud:
ha
method: método HTTP, generalmente "GET" o "POST".

URL: la URL a la cual realizar la solicitud, puede ser una cadena o un objeto URL.
ap

async: si se asigna explícitamente a false, la solicitud será síncrona. Este parámetro es

l

opcional y su valor predeterminado es true. No obstante, se abordará la asincronía en la

au

siguiente sección.
a.

user, password: usuario y contraseña para autenticación HTTP básica (si se requieren).
os

Es importante destacar que la llamada a open, a pesar de su nombre, no abre la conexión. Solo
m

configura la solicitud. La actividad de red comienza con la llamada al método send.

ce

Tres. Enviar la solicitud.

Este método inicia la conexión y envía la solicitud al servidor. El parámetro adicional "body"

contiene el cuerpo de la solicitud. Algunos métodos, como GET, no requieren un cuerpo, mientras

que otros, como POST, utilizan el parámetro "body" para enviar datos al servidor.

Envío

cemosa.aulapharos.com
19 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Cuatro. Escuchar eventos de respuesta.

Los eventos más comúnmente utilizados son:

load: se activa cuando la solicitud está completa, independientemente del estado HTTP. La

respuesta se ha descargado por completo.

error: se activa si la solicitud no se puede realizar satisfactoriamente, como por una red caída

o una URL inválida.

om
progress: se activa periódicamente mientras la respuesta está siendo descargada, indicando

cuánto se ha descargado.

.c
Ejemplo de manejo de eventos:

s
ro
ha
l ap
au
a.
os

Manejo de eventos
m

Una vez que el servidor ha respondido, se puede acceder al resultado a través de las siguientes
ce

propiedades del objeto xhr:

status: código del estado HTTP, representado por un número. Por ejemplo, 200 indica éxito,

404 indica que no se encontró el recurso, 403 indica acceso prohibido, y así sucesivamente.

Puede ser 0 en caso de una falla no relacionada con HTTP.

statusText: mensaje del estado HTTP, representado por una cadena. Por ejemplo, "OK" para el

código 200, "Not Found" para el código 404, "Forbidden" para el código 403, y así

sucesivamente.

response (en scripts más antiguos, se puede usar responseText): contiene el cuerpo de la

cemosa.aulapharos.com
20 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

respuesta del servidor. Puede ser texto, JSON, XML u otros formatos, dependiendo de la

naturaleza de la respuesta.

Además, se puede especificar un límite de tiempo para la solicitud mediante la propiedad timeout.

Si se asigna un valor en milisegundos, como en el siguiente ejemplo:

om
Timeout

.c
La solicitud se cancelará si no se completa con éxito dentro del tiempo especificado, y se activará el

s
evento timeout. Esto es útil para manejar situaciones en las que una respuesta rápida es esencial, y

ro
se desea evitar que una solicitud tarde demasiado en completarse.
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
21 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

5. Uso de FetchAPI

La API Fetch ofrece una interfaz en JavaScript para interactuar y manipular aspectos del canal

HTTP, como peticiones y respuestas. También proporciona el método global fetch() que facilita la

obtención asíncrona de recursos a través de la red.

Anteriormente, este tipo de funcionalidad se lograba utilizando XMLHttpRequest. Fetch presenta

una alternativa más eficaz y es fácilmente utilizable por otras tecnologías, como Service Workers.

om
Además, centraliza la definición de conceptos relacionados con HTTP, como CORS y extensiones

para HTTP.

.c
Hay dos diferencias clave entre la especificación de fetch y JQuery.ajax():

s
ro
El objeto Promise devuelto por fetch() no será rechazado con un estado de error HTTP, incluso
ha
si la respuesta es un error HTTP 404 o 500. En cambio, se resolverá normalmente (con un

estado ok configurado a false), y solo se rechazará en caso de un fallo de red o si algo impidió
ap

completar la solicitud.

Por defecto, fetch no enviará ni recibirá cookies del servidor, lo que resulta en peticiones no
l
au

autenticadas si el sitio mantiene una sesión de usuario. Para enviar cookies, las credenciales de

la opción init deben configurarse.

a.
os

Una solicitud básica con fetch es bastante simple. Aquí hay un ejemplo:
m
ce

Fetch

En este caso, se está recuperando un archivo JSON a través de la red e imprimiéndolo en la consola.

La función fetch() toma un argumento (la ruta del recurso que se desea obtener) y devuelve un

objeto Promise que contiene la respuesta, un objeto Response.

Es importante destacar que la respuesta obtenida es un objeto Response HTTP, no directamente el

archivo JSON. Para extraer el contenido del cuerpo del JSON de la respuesta, se utiliza el método

cemosa.aulapharos.com
22 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

json() definido en el mixin de Body, que está implementado por los objetos Request y Response.

Es fundamental tener en cuenta que las peticiones Fetch están controladas por la directiva connect-

id de Content Security Policy en lugar de la directiva de los recursos devueltos.

om
.c
s
ro
ha
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
23 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Recuerda

AJAX utiliza solicitudes HTTP para interactuar con el servidor. Las solicitudes pueden ser de

tipo GET o POST, y la respuesta del servidor puede contener datos en formatos como XML,

JSON o simplemente texto.

Una vez que se recibe la respuesta del servidor, JavaScript puede manipular el DOM para

actualizar dinámicamente el contenido de la página sin necesidad de recargarla. Esto permite

om
crear interfaces de usuario más interactivas y receptivas.

Una vez que se recibe la respuesta del servidor, JavaScript puede manipular el DOM para

actualizar dinámicamente el contenido de la página sin necesidad de recargarla. Esto permite

.c
crear interfaces de usuario más interactivas y receptivas.

s
AJAX puede manejar diferentes formatos de datos, siendo JSON uno de los más comunes

ro
debido a su simplicidad y facilidad de manipulación en JavaScript. También se pueden utilizar
ha
XML o texto plano según los requisitos del proyecto.
l ap
au
a.
os
m
ce

cemosa.aulapharos.com
24 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

Autoevaluación

¿Qué significa la sigla AJAX en el contexto del desarrollo web?

Qué significa la sigla AJAX en el contexto del desarrollo web

Asynchronous JavaScript and XHTML

om
Advanced JavaScript and XML

s.c
ro
¿Cuál es uno de los principales beneficios de utilizar AJAX en una aplicación
web?
ha
Recargar la página completa
l ap

Actualizar dinámicamente el contenido sin recargar la página.

au
a.

Recargar la página complet.

os

¿Qué formato de datos es comúnmente utilizado con AJAX debido a su facilidad

m

de manipulación en JavaScript?
ce

JSON.

HTML.

XML.

cemosa.aulapharos.com
25 / 26
[AFO028L7M] Curso de Analista Programador Javascript
[MOD024H2Y] Analista Programador Javascript
[UDI152LMR] Ajax con JavaScript

¿Qué evento se activa cuando una solicitud AJAX se completa con éxito?

Success.

Progress.

Complete.

om
.c
¿Qué consideración de seguridad es importante tener en cuenta al usar AJAX
para solicitudes entre dominios diferentes?

s
Same-Origin Policy.
ro
ha
Cross-Site Scripting.
l ap

Cross-Site Request Forgery.

au
a.
os
m
ce

cemosa.aulapharos.com
26 / 26