Web I - SPA y Ajax - Partial Render
Summary
TLDREl guion del video ofrece una explicación detallada sobre cómo utilizar AJAX para el render parcial de páginas web. Se discuten dos enfoques principales: el uso de fragmentos de sistema y la integración de servicios REST para obtener datos en formato JSON y procesarlos en el lado del cliente. El script incluye un ejemplo práctico donde se muestra cómo, al presionar un botón, se puede cargar y insertar un fragmento de HTML sin necesidad de recargar la página. Se abordan conceptos clave como las promesas, el uso de 'fetch' para realizar solicitudes al servidor y cómo manejar respuestas exitosas o fallidas. Además, se menciona la importancia de comprobar el código de estado HTTP en las respuestas para gestionar situaciones como la no existencia de una página o errores de servidor.
Takeaways
- 😀 La segunda parte del video trata sobre AJAX y cómo se utiliza para el render parcial de páginas sin recargar la página completa.
- 🔍 Se mencionan dos formas de render: uno es cargar un fragmento del sistema y otro es utilizar servicios REST para obtener datos en formato JSON y procesarlos en el lado del cliente.
- 🛠 Se da un ejemplo práctico de cómo hacer click en un botón para mostrar un fragmento de HTML, obteniendo el contenido desde un enlace específico.
- 📝 Se describe el proceso paso a paso para implementar el render parcial, incluyendo la creación de HTML y la adición de un evento al botón que desencadena la carga del fragmento HTML.
- 🔗 Se explica cómo utilizar el método `fetch` para realizar una solicitud al servidor y obtener un archivo, y cómo manejar la respuesta de forma asíncrona con promesas.
- 👉 Se destaca la importancia de manejar tanto la resolución como el rechazo de las promesas, implementando los bloques `.then()` y `.catch()` respectivamente.
- 🌐 Se menciona que `fetch` es una interfaz estándar implementada en la mayoría de los navegadores modernos, lo que facilita su uso en desarrollo web.
- 📚 Se proporciona información sobre cómo manejar errores y respuestas HTTP específicas, como el código 404 (no encontrado) y 500 (error interno del servidor).
- 📖 Se sugiere la revisión de la documentación de MDN (Mozilla Developer Network) para obtener más información sobre `fetch` y su uso.
- 🔧 Se discute la necesidad de refactorizar el código para evitar repetir código y mantener una estructura limpia y eficiente.
Q & A
¿Qué es AJAX y cómo se relaciona con el parcial render de páginas web?
-AJAX (Asynchronous JavaScript and XML) es una técnica que permite actualizar parte de una página web sin necesidad de recargar toda la página. Se relaciona con el parcial render porque permite cargar y insertar fragmentos de HTML desde el servidor sin interrumpir la experiencia del usuario.
¿Cuál es la diferencia entre un render de páginas y un servicio REST?
-El render de páginas implica cargar un fragmento del sistema y insertarlo en el HTML existente. Por otro lado, un servicio REST (Representational State Transfer) se enfoca en obtener datos del servidor en formato JSON y procesarlos en el lado del cliente.
¿Cómo se implementa el render parcial utilizando AJAX?
-Para implementar el render parcial con AJAX, se crea un evento en un botón que, al ser presionado, realiza una petición al servidor para obtener un fragmento de HTML. Este fragmento se inserta en la página sin necesidad de recargarla.
¿Qué es el método 'fetch' y cómo se utiliza en el contexto de AJAX?
-El método 'fetch' es una interfaz de JavaScript que permite realizar solicitudes HTTP al servidor y manejar la respuesta. En el contexto de AJAX, se utiliza para obtener datos del servidor y procesarlos en el lado del cliente sin recargar la página.
¿Qué es una promesa en JavaScript y cómo se relaciona con el método 'fetch'?
-Una promesa en JavaScript es un objeto que representa el resultado de una operación asíncrona. El método 'fetch' devuelve una promesa que contiene la respuesta de la solicitud HTTP. Se puede utilizar para manejar el éxito o fracaso de la operación de forma asíncrona.
¿Cómo se maneja el contenido HTML obtenido mediante 'fetch'?
-El contenido HTML obtenido mediante 'fetch' se maneja a través de la propiedad 'text' de la respuesta. Esta propiedad es también una promesa que, una vez resuelta, devuelve el contenido HTML que se puede insertar en la página.
¿Qué navegadores soportan la interfaz 'fetch' y cómo se puede verificar su implementación?
-La interfaz 'fetch' está implementada en los navegadores más comunes como Firefox, Chrome y Safari. Para verificar su implementación, se puede consultar la documentación de soporte de cada navegador o utilizar herramientas de desarrollo para comprobar su presencia.
¿Cómo se maneja un error en la solicitud AJAX utilizando 'fetch'?
-Para manejar errores en una solicitud AJAX con 'fetch', se puede utilizar el método 'catch' que captura cualquier rechazo de la promesa. También se puede comprobar el código de estado HTTP en la respuesta para determinar si la solicitud fue exitosa o no.
¿Qué es un estado de promesa y cuáles son los cuatro estados posibles de una promesa en JavaScript?
-Un estado de promesa en JavaScript indica la situación actual de una operación asíncrona. Los cuatro estados posibles son: cumplida (fulfilled), rechazada (rejected), pendiente (pending) y finalizada (settled).
¿Cómo se implementa la gestión de errores en el ejemplo proporcionado del script?
-En el ejemplo del script, la gestión de errores se implementa mediante un bloque 'catch' que maneja los rechazos de promesa. También se comprueba el código de estado HTTP en la respuesta para mostrar un mensaje de error si la página solicitada no existe o hay algún otro problema.
¿Cómo se puede mejorar la experiencia del usuario al utilizar AJAX para el render parcial de la página?
-Para mejorar la experiencia del usuario, se pueden implementar técnicas como evitar el reflejo de la página al hacer clic en un botón, mostrar mensajes de carga o error adecuados y asegurarse de que la transición entre el contenido antiguo y el nuevo sea fluida y sin interrupciones.
Outlines
😀 Introducción a AJAX y Render Parcial
El primer párrafo introduce la segunda parte de un tema, enfocándose en AJAX y la renderización parcial de páginas. Se mencionan dos métodos principales: cargar un fragmento del sistema y insertarlo en el HTML, y utilizar servicios REST para buscar datos en el servidor y procesarlos en el cliente. Se describe un ejemplo práctico donde se presiona un botón para mostrar un fragmento de HTML sin necesidad de recargar la página, y se detalla el proceso paso a paso, desde la creación del HTML hasta la adición de un evento al botón que desencadena la carga del fragmento HTML desde un enlace específico.
🔗 Utilización de fetch para la carga asíncrona de datos
El segundo párrafo se enfoca en el uso de la función 'fetch' para realizar peticiones asíncronas y cargar datos de forma parcial a una página web. Se explica que 'fetch' devuelve una promesa y cómo se puede utilizar para obtener el HTML de un recurso y reemplazar una porción del documento con dicho contenido. Se muestra un ejemplo de código donde se agrega un evento de clic a un botón que, al ser presionado, ejecuta una función que utiliza 'fetch' para obtener y mostrar el contenido HTML correspondiente.
🚫 Manejo de promesas fallidas y estados
El tercer párrafo discute cómo manejar las situaciones en las que una promesa no se cumple, es decir, cuando la operación asíncrona falla. Se mencionan los cuatro estados de una promesa: cumplida, rechazada, pendiente y finalizada. Se da un ejemplo de cómo se puede utilizar el método 'catch' de 'fetch' para manejar errores, como una conexión fallida o problemas del servidor, mostrando un mensaje de error en lugar del contenido esperado.
🔄 Comprobación de respuestas HTTP y manejo de errores
El cuarto párrafo profundiza en la validación de las respuestas HTTP recibidas y cómo manejar diferentes códigos de estado. Se explica que el objeto 'response' de 'fetch' contiene un código HTTP y que se puede verificar si este código indica éxito (200 OK) o algún otro error. Se sugiere mostrar un mensaje de error si la respuesta no es la esperada, como un 404 (Not Found) o un 500 (Internal Server Error), para informar al usuario cuando la página solicitada no existe o hay problemas en el servidor.
📚 Conclusión y manejo de errores en AJAX
El último párrafo concluye la discusión sobre AJAX y el manejo de errores. Se enfatiza la importancia de verificar la respuesta de la solicitud y de manejar los errores de conexión o de contenido no encontrado. Se sugiere la implementación de un mecanismo para mostrar un mensaje de error si no se puede obtener la respuesta esperada, asegurando así que el usuario esté informado en todo momento sobre el estado de la operación.
Mindmap
Keywords
💡Ajax
💡Partial Render
💡REST
💡JSON
💡Eventos
💡Fetch API
💡Promesas
💡HTML
💡Estados de Promesas
💡HTTP Status Codes
Highlights
Introducción a AJAX y sus dos formas principales: render parcial de páginas y servicios REST.
Render parcial implica cargar un fragmento del sistema y su inserción en el HTML.
Servicios REST implica buscar datos en el servidor y procesarlos en el cliente como un objeto JSON.
Ejemplo práctico de cómo hacer un botón que sin recargar la página, muestre un fragmento de HTML.
Proceso paso a paso para implementar render parcial y agregar un evento al botón.
Uso del método `fetch` para realizar una solicitud al servidor y obtener un archivo.
La función `fetch` devuelve una promesa que se maneja con `.then()` y `.catch()`.
Importancia de manejar el estado de la promesa y cómo se comporta cuando no se cumple.
Implementación del manejo de errores con `.catch()` para mostrar un mensaje de fallo.
Cómo utilizar el objeto `response` para verificar si la respuesta fue exitosa con un código HTTP 200.
Estrategia para manejar diferentes tipos de errores HTTP y mostrar mensajes adecuados.
Demostración de cómo se ve el código en una página web y su estructura HTML.
Explicación de cómo se agrega un evento de clic al botón y se evita el recargar de la página.
Proceso de reemplazo del contenido HTML usando `.innerHTML` con el texto de la respuesta.
Refactoring del código para evitar repetición y mejorar la eficiencia.
Manejo de errores en el caso de que la conexión falle o el archivo no exista.
Uso de la consola para depurar y verificar el estado de las respuestas y errores.
Conclusión sobre la importancia de entender AJAX asíncrono y cómo manejar promesas y errores.
Transcripts
bienvenidos a esta segunda parte
vamos a empezar a ver la primera opción
de ajax que hemos visto que es la de
parcial render con ajax
bueno como habíamos había dos formas
parece un render de las páginas que era
cargar un fragmento del sistema y le
insertaron en nuestro html y por otro
lado de servicios rest
que es ir al server a buscar algún dato
para un objeto jason y procesarlo al
lado del cliente
bueno más un ejemplo vamos a apretar un
botón y mostrar un pedacito html dentro
de un día
el contenido lo vamos a cargar desde
este link que vamos a abrir
y funcionando
para vender a través de mí
e
vamos a crear una página que diga que
tengo un botoncito cuando yo aprieto ese
botón
lo que va a pasar es que va a ir a
buscar sin refrescar la página este
pedazo de html y lo va a insertar acá
adentro
este es el fragmento que vimos recién
ahí y lo vamos a insertar ahí adentro
vamos a ver cómo se hace y para eso
vamos a como siempre tratar de armar el
paso a paso de qué vamos a hacer
como mostramos un fragmento dentro del
sitio usando parcial render primero
creamos el sml después vamos a agregar
un evento en el botón
que ese evento cuando se ejecuta esa
función que tiene asociadas en el
internar va a ir y bajar el archivo
hacer un pedido chiste del servidor y
después va a mostrar dentro del día ese
pedazo de html
qué parte se vamos a hacer las primeras
dos ya las redes sabemos hacer las
segundas dos las últimas dos no sabemos
hacerlo entonces vamos a ir paso a paso
hola es decir de mucho gusto me dijeron
que con voz puedo bajar cosas fáciles
del servidor si es mucho más fácil sólo
tenéis que usar el método page iberred
genial page http dos puntos barra barra
ahora me hace el archivo no tarda mucho
eso pero te prometo que lo bajo
pero necesito para seguir
ya te lo prometo los tenemos que no
tenés vos de civil que archivó qué
quieres que haga después con el archivo
y yo lo hago por vos o contaba un
poquito más terminó vamos a ver no ese 7
nos dice que tenemos una función se
llama fecha vamos a ser fecha y hasta el
archivo no cuando tenemos un archivo del
servidor eso tarda tiempo no es
automático no es un milisegundo que lo
pido
y esperar en ese momento es medio
difícil
vamos a ver cómo funciona
en ese 7 incorpora el interfaz fecha
para estar llamados ajax
y lo que nos devuelve es una promesa
fíjense que nosotros estamos dando
promesa let promise face israel
y es lo que hace esto es ir y hacer esto
mismo estamos en nosotros
de ir a esta web y traerlo pero por
detrás lo hace como lo hace el motor de
ajax
eso me traen la promesa a mí si yo te
prometo que te lo traigo te promete otra
el control atraiga decime qué tengo que
hacer entonces le ponemos punto del
entonces conoce lo traigas lo que venga
hagamos algo
a la otra versión sin la necesidad de la
variable intermedia ser el punto de
henry pons
211
el uso más simple de fech toma un
argumento la ruta del recurso de giro
traer y el resultado es una promesa
que contiene la respuesta a un objeto
response básicamente acá adentro tenemos
el html que lo tenemos en el cdm de
trabajo de la url
fíjense podemos ir a giuseppe para ver
cuánto han implementado esta fecha
fíjense qué
en firefox y chrome en safari que son
los más usados están implementado en
todos
también
e implementado en casi todos es una
interfaz prácticamente estándar hoy
y pueden ver un poco más de información
de fecha
en la ayuda de mochila nivel mano del
gorro
bueno ahora es esto
la carga parcial consiste entonces sería
buscar el texto html a un archivo
externo y ponerlo en un día con haití
news ajax
fíjense que hago fecha otro html de
response
a la response
le sacó el texto que también es una
promesa y el texto lo meto en el ine
html
y así que estamos procesando porque la
respuesta nos prometí acá dentro de
tener un texto va a tener lo que lo que
trae adentro entonces con ese texto lo
vamos a meter adentro del ine html
entonces
vamos a mirarlo en en la demo que
tenemos preparada acá en el cowper así
podemos analizar el código
y ver cómo se hace
tenemos html plane html así como lo
conocemos y fíjense que acá tenemos un
día
que se llama news ajax
no dice esto va a ser borrado
tss no tenemos nada y en javascript
tenemos
cloud clic event
y miren acá lo que hacíamos es vamos a
ver antes de mirar la parte de arriba
vamos a mirar este ejemplo está
partecita acá
yes loud james loud que es ese este
botón
tráeme ese botón
y todos los botones que quieras porque
pones el droid y por cada uno de esos
agarra cada uno de esos for each
y pone los niveles en el clic y que
llame la función load clic
bien entonces estamos diciendo que este
botón o todos los botones que yo pueda
crear
le ponga la función load clic
luego clic recibe un evento como ya
sabemos y le podemos poner el evento en
default esto nos va a ayudar a cuando
por ejemplo tenemos un botón del zombi
de lo que sea no se nos refresca la
página sino que
evite el reflejo de la página el envío
de información al desarrollo
de forma
sin crónica vamos a cuando después acá a
partir de este punto evitó el envío de
información al server y puedo empezar a
hacer cosas de mi lado
lograse será un fecha
primero de la url que le hemos pasado
bien cuando me traigas eso la respuesta
la voy a imprimir en la consola y va a
decir la respuesta al darme un texto y
ese texto
anda al documento y buscar y usa siex
que va a buscar este vídeo
iba a reemplazar en línea siete ml con
el texto entonces cuando yo ahora hago
clic acá
y automáticamente se pisa s
un pedacito de html que teníamos
bien sé que es bastante sencillo quizá
es difícil de entender en el primer
momento pero tan sencillo como
funcionario de las promesas es
anda a buscarme esto
cuando lo traigas si lo traes
la respuesta imprime la y dame el texto
de la respuesta
la respuesta te promete que va a haber
un texto entonces cuando ese texto lo
tengas efectivamente
venid y
busca en él existe ml en donde digamos
los cavaliers que tenemos está
y el html y poner ese texto este texto
es todo ese pedazo de html
así que si yo refresco a la página de
esta hora
this will be the cloud
ahí sí claro
vamos a seguir mirando un poquito más
esto
a dúo
bueno hicimos al nudo si liberamos
y qué pasa
si la promesa no se cumple qué pasa si
la descarga no se puede hacer
piensas
[Música]
la promesa
falsas promesas o sea no no cumple las
promesas entonces qué hacemos
tenemos una forma de decir que cuando no
me cumpla la promesa
entonces la promesa tiene cuatro estados
el primero es cumplida es el fin
la segunda es rechazada la tercera es
pendiente y la cuarta es finalizada
entonces
nosotros hacemos algo por ejemplo el
fecha está mejor una promesa
cuando se cumpla llámame a esto esta
función alcohol va que esté
es si no se cumple si falla si pasa algo
llámame este otra cosa entonces podemos
poner en nuestro caso
en este ejemplo estábamos acá viendo
podríamos agarrar y
decir acá por ejemplo si el fecha del
podría poner acá esta altura un caché
y si no se si no se cumple si fallo por
ejemplo no anduvo bien el servidor o lo
que sea
me cambié el texto de este poder no pudo
traer pedazo de mail ahora vamos a ver
un poquito cómo hacer eso
justo en el siguiente
esto que le decía cuando hacemos el
fecha
si se cumple va a ejecutar esto pero si
no se cumple
pueda reír ponerle en el contenido en
este caso 25 y selectos lo que sea lo
que lo que traigo acá
no tenemos el contenido sé que es pero
alguien ya debe haber error conexión
fail y hacer que se muestre eso fíjense
a ver este ejemplo
tiene la el html todo fenómeno y tiene
además el caché
en el caché
que nos pone container html
[Música]
este contener es el juz a ser o sea es
y acá lo tenemos acá podremos un pequeño
factor y así que estamos repitiendo
código vamos a hacer el pequeño en
refractor
entonces cuando yo era o lou
vino y la promesa se cumplió qué pasa si
yo le pongo huevón acá también la url
que va a fallar en teoría
y prueba
algo pasó de hero coop
quiso traer esto hasta bien
como es una app
y tratan de ir a buscar esto y trae el
html decisión pongo esto en
el fondo está
a traer esa maquinita entonces nos está
poniendo el parche el render
de esa página vamos a entonces vamos a
sacar
vamos a poner fruta y ahora sí
y es efectivamente falla
bien
para ver lo que pasó recién lo que pasó
recién para que entendamos es estamos
yendo a html
pero
web
a olor y esto me trae el pedacito de
html qué
el vecino html
que tenemos en esa aplicación nosotros
cuando yo puse huevo uno acá como heroku
como sigue siendo una página válida
creo q va a ir a tratar de buscarlo como
no lo encuentra nos va a mostrar
nos h este pedazo de html y es una html
entonces lo traemos y lo mostramos
en este pedazo html
yo puse huevo uno acá se va a mostrar la
página que vimos yo la pongo
google.com
vamos a qué pasa
seúl haga
pero si pongo algo no existe
por ejemplo una fruta
paolo ahí sí
me dice con él porque esa página no
existe si yo estoy lo pongo
haga
es decir este sitio cambridge se puede
no se puede acceder
bien entonces tenemos ahora una forma de
manejar estas falsas promesas
ahora tenemos un problema más que es y
si la conexión anduvo
pero el archivo no existe
qué pasa
tenemos música para esto
el objeto response que se que veíamos
que tenemos en la
que la traila fecha
veámoslo este response
tiene además
un código un código de http
si el response es ok no devuelve un
código 200 y si fue por ejemplo porque
no tenía permisos me da un 4.3 hay cada
cada tipo de respuesta tiene un código
específico
en el caso de que se descargue es 200 ok
en el caso de que no tengamos permisos o
que el servidor se rompa
cuando seleccionado se rompe existe pero
el celular está roto nos devuelve un 500
entonces en ese caso nosotros podemos
preguntar
sí
la respuesta fue ok muestra esto
y la respuesta no fue ok fue voy otra
cosa no tengo permiso no en lo que sea
entonces voy a mostrar felibert en el
caso de que no existe la página que no
existe nada
y voy a mostrar el conexión feo vamos a
mirar entonces
en este pedacito de
de html y salir de vuelta a lo mismo
tenemos ahora sí
[Música]
el vecino que mira que la respuesta sea
ok
en algo que yo no hice fue mostrar la
consuela si yo hago loud
ok
con solo que uno hacia arriba está
response
porque nada estaba acción responde
prueba no importa
qué pasa si yo le pongo web 1 unicén a
ver qué pasa ahora
bien sé que ahora como estoy mirando
el tipo de respuesta en lugar de
mostrarme
esta página que estaba viendo acá
1
voy a mostrar en este pedazo esto
esto trajo
un error una respuesta de error nos
trajo dos incluso que se puede mirar
acaba abriendo las civiles por tools
creo que el network
bueno acá nos dicen corriendo
lo que el negro
en ese vendrá con 404
starace de mails y metas con 404
este es el estatus en este que después
de las de las cosas 301 re direct 200
todos estos 200 pero el html yo pedí
mientras un 404 que no es 200 cuales los
cuatro es not found no puedo buscar
html status code
y acá van a ver todos
los más usados son 202 ok después de
algunos por ejemplo 201 fue creado o
aceptado tiene una un poco más
mínimo de semántica como lea
después
cuando el cuadro es el más
solamente el no town y los 500 son
intransables el server existe
me atiende pero está rota y cuando
buscan esto pueden acaba venir y mirar
la explicación el ser encontrado una
condición esperada
que previno que sea
se complete el recuerdo
tiene 200 ok y si no 404 que no existe o
el 500 también puede ser solo más como
unos 400 y cuando empiezas a hacer cosas
autenticación eso 403 que es forbidden
es también bastante común el resto son
más raros
volvamos un poquito haga
perdona este haga
entonces sí así que ahora nosotros
como estamos chequeando que la respuesta
sea 200 ok vamos a mostrar solamente el
7 medio cuando llega
si por alguna razón esta url no existe
nos va a devolver y ahora del fire jon y
si por alguna razón
nada de esto existe en este caso pero q
apuntó cuando existe por eso fuimos y
nos dijo 4 en 24 y después una
redirección y muestra otra cosa pero
nosotros sólo estamos mostrando el
verdadero el verdadero contenido que es
bueno no no existe esto que está
buscando
después en el caso de que no existe el
servicio no exista nada nos va a mostrar
este error conexión fe
bueno qué está ocurriendo con cada
llamado de la función bien
en el del el primer ven es la respuesta
de la solicitud de fecha o sea nos traen
la respuesta
cuando procesamos la respuesta nos da
otra promesa
en esa promesa no sólo ponemos este then
acabe en html
y ahí proceso esta respuesta de este acá
y en el caso de que haya una rueda de
conexión o sea que acá falle este edén
nos debe ejecutar por lo tanto este de
él no se va a ejecutar por lo tanto se
va a ejecutar de caché directamente
con sus dos como de ahora mayor
vamos entonces a ahora a cortar para
después continuar con ajax asíncrono
pero en serio entendido cuando cosas
pueden agregar comentarios acá abajo o
con preguntar en la lista
関連する他のビデオを見る
![](https://i.ytimg.com/vi/FXGquCKOn3U/hq720.jpg)
Aprende lo básico sobre APIs y HTTP para CONECTAR la IA con cualquier aplicación
![](https://i.ytimg.com/vi/l2MihYAj0Iw/hq720.jpg)
⭐PROTOCOLO HTTP 🖥️ Requests y Responses con: GET, POST, PUT, PATCH y DELETE | DESARROLLO WEB 🌎
![](https://i.ytimg.com/vi/pJM3inWDSSA/hq720.jpg?sqp=-oaymwEmCIAKENAF8quKqQMa8AEB-AHUBoAC4AOKAgwIABABGGQgZChkMA8=&rs=AOn4CLDsJiyB91X-3gf7EuyxoQd6HtjfEg)
Web 1 - Formularios con Javascript
![](https://i.ytimg.com/vi/6dYwdDbhpwQ/hq720.jpg)
Curso de Patrones de diseño - 6 Facade
![](https://i.ytimg.com/vi/wt_WpfaUom8/hq720.jpg)
Build your own Amazon price scraper on Google sheets
![](https://i.ytimg.com/vi/2Xm9P_tXtK8/hq720.jpg?v=60a3d396)
CÓMO CONSUMIR UN API con JAVASCRIPT desde la web
5.0 / 5 (0 votes)