Utilizando Ajax
Utilizando Ajax 1
¿Qué aprenderás? 2
Introducción 2
Utilizando AJAX 3
Ejercicio guiado: Obtener datos financieros con AJAX 4
Ejercicio guiado: Utilizando AJAX 7
Ejercicio propuesto (12) 11
¡Comencemos!
_ 1
www.desafiolatam.com
¿Qué aprenderás?
● Crear un script que realice peticiones asíncronas utilizando la librería jQuery y AJAX
para resolver un problema planteado.
Introducción
Ya hemos visto algunos elementos clave de la teoría que nos permitirán desarrollar APIs y
obtener el mayor beneficio de los recursos tanto externos como propios, para incluir
información de manera asíncrona en nuestros proyectos.
En este capítulo, profundizaremos el concepto de AJAX y utilizaremos esta herramienta para
obtener información e incluirla en un sitio web.
Actualmente, en la web existen diversos recursos que nos pueden ayudar a resolver
requisitos específicos en nuestros proyectos, como el valor del dólar o la UF que veíamos en
los ejemplos anteriores. El poder consultar estos datos y manipularlos, son competencias
altamente valoradas en el mundo laboral.
_ 2
www.desafiolatam.com
Utilizando AJAX
Anteriormente se pudo leer sobre el concepto y finalidad de AJAX, pero hay algo importante
que se debe mencionar y tener en cuenta cuando trabajamos con AJAX. Por defecto y su
acrónimo así lo indica, todas las solicitudes que se realicen implementando jQuery-AJAX se
envían de forma asincrónica, ya que es su valor por defecto. Esto, se puede observar en la
estructura básica de una petición AJAX:
$.ajax({
type:"tipo de petición, puede ser GET, POST, PUT...",
url:"aquí va la url a consultar",
dataType:"puede ser xml, json, script, or html",
success: function(data) {
//si todo sale bien, se agrega la funcionalidad aquí
},
error: function(data) {
//esta función se activa si ocurre algún error durante el proceso
},
async: true,
});
Vamos a ir dejando la teoría un poco de lado para aplicar los conceptos aprendidos
utilizando AJAX. Para que la explicación sea más sencilla, consideraremos un ejemplo en
donde un usuario puede hacer click sobre un botón y mostrar primeramente abajo de ese
botón el mensaje: 'loading . . .'. Seguidamente se debe conectar a una API para traer
la información mediante el método GET y mostrarla al usuario eliminando el mensaje
anterior. La API a la cual se debe conectar el código es: Meetup. Por ende, el extracto del
código HTML a utilizar que gatilla dicha acción sería:
<button type="button" class="btn">Click me!</button>
<p class="text">Replace me!!</p>
<script src="https://code.jQuery.com/jQuery-2.1.1.min.js"></script>
Mientras que el código en JavaScript implementando jQuery es:
$('.btn').click(function() {
$('.text').text('loading . . .');
$.ajax({
type:"GET",
url:"https://api.meetup.com/2/cities",
_ 3
www.desafiolatam.com
success: function(data) {
$('.text').text(JSON.stringify(data));
},
dataType: 'json',
});
});
Vamos analizando paso por paso la solicitud.
Tenemos una función que se gatilla al hacer click en el botón de clase btn. Al realizar la
acción de click, reemplazamos el texto presente en la etiqueta p con otro contenido y de
forma asíncrona realizamos una consulta HTTP utilizando una función AJAX.
Dicha función recibe varios parámetros:
● type: indica el tipo de la petición
● url: el PATH al cual se hará la consulta
● success: una función que gatilla una acción cuando la petición fue realizada con
éxito.
Al gatillar la función de éxito, se reemplaza el contenido en p con la respuesta recibida por la
API. En este caso se aplica una función que transforma la respuesta en formato JSON en
una cadena de caracteres (string) de esa forma entregamos una respuesta comprimida del
resultado. Como pueden observar, una vez interiorizados los conceptos de API y JSON, es
sencillo armar peticiones AJAX considerando los elementos necesarios para realizar dicha
petición.
Considera además, que todas las peticiones son asíncronas, es decir, si esperas la
respuesta de una petición para ejecutar otras acciones, siempre declara estas funciones
dentro de la opción de tipo success. De esta forma nos aseguramos que una vez tengamos
la respuesta, ejecutaremos la acción esperada.
Ejercicio guiado: Obtener datos financieros con AJAX
¿Recuerdan el endpoint de información financiera que revisamos en Postman? ¿Te parece si
llevamos esa API a nuestro sitio web? Lo que haremos será utilizar la API de indicadores
económicos (https://mindicador.cl/api) y, mediante un llamado AJAX, mostraremos la
información de la UF en un proyecto web. Para esto, utilizaremos el siguiente extracto
HTML:
_ 4
www.desafiolatam.com
<div>
<h2>El valor de la UF hoy es de <span id="valorUf"></span></h2>
</div>
Tómate unos minutos e intenta hacerlo tu... ¿Lo lograste?. Si la respuesta es no, no te
preocupes y vamos en conjunto realizando el código.
● Paso 1: Lo primero que haremos será escribir un código HTML en donde
mostraremos el valor de la UF:
<div>
<h2>El valor de la UF hoy es de <span id="valorUf"></span></h2>
</div>
● Paso 2: Tenemos nuestra estructura básica, ahora escribiremos nuestro código con
jQuery para hacer el llamado, esta acción se debe ejecutar cargada la página así que
no debe llamarse al endpoint con algún click o algo por el estilo, por lo que usaremos
$.ajax y completamos la estructura con los datos necesarios.
$(document).ready(function(){
$.ajax({
type:"GET",
url:"https://mindicador.cl/api",
dataType:"json",
success: function(data) {
console.log(data);
}
});
});
Antes de continuar es importante aclarar que el usar el nombre data como argumento de la
función, es un nombre que se usa por convención entre los desarrolladores, pero podrías
usar el nombre que quieras, muchos ejemplos en internet nombran este valor como
response, res, etc. Aclarado este punto veamos que nos entrega data al hacer un
console.log
Object { version: "1.6.0", autor: "mindicador.cl", fecha:
"2020-04-22T02:00:00.000Z", uf: {...}, ivp: {...}, dolar: {...},
dolar_intercambio: {...}, euro: {...}, ipc: {...}, utm: {...}, ... }
_ 5
www.desafiolatam.com
● Paso 3: Como podemos apreciar es la misma respuesta que ya conocíamos por
Postman, ahora que tenemos nuestro llamado realizado, lo único que debemos hacer
es llegar al valor de la UF, esto lo hacemos recorriendo el JSON de respuesta con
notación de puntos (data.uf.valor).
$(document).ready(function(){
$.ajax({
type:"GET",
url:"https://mindicador.cl/api",
dataType:"json",
success: function(data) {
console.log(data.uf.valor);
}
});
});
● Paso 4: Si revisamos ahora deberíamos ver 28664.96 ya tenemos el valor ahora con
jQuery debemos agregarlo en la etiqueta span de nuestro html.
$(document).ready(function(){
$.ajax({
type:"GET",
url:"https://mindicador.cl/api",
dataType:"json",
success: function(data) {
$('#valorUf').text(data.uf.valor);
}
});
});
Lo que hicimos fue usar el selector de ID y con el método text agregar el valor que recibimos
desde la API, si todo salio bien deberías ver lo siguiente en tu navegador:
El valor de la UF hoy es de 28664.96
El valor de la UF puede variar dependiendo cuando realices el ejercicio.
_ 6
www.desafiolatam.com
Ejercicio guiado: Utilizando AJAX
Realizar la conexión a siguiente API que cuenta con datos de usuario, como id, email,
nombre, apellido y una imagen. En base al siguiente HTML, una vez que el usuario haga click
en el botón, se obtendrá la información de la API y será mostrada en el documento web
mediante una función de AJAX:
<h4>Información de la API</h4>
<div>
<button type="button">Mostrar Información</button>
<div class="resultado"></div>
</div>
● Paso 1: Crear una carpeta en tu lugar de trabajo favorito y dentro de ella crea dos
archivos, un index.html y un script.js.
● Paso 2: En el index.html, escribir la estructura básica de un documento HTML,
incorporar el enlace o CDN de jQuery, que nos permita incluir esta librería en nuestro
ejemplo, agregar el extracto del código HTML entregado en el enunciado y enlaza el
archivo externo denominado “script.js”, como se muestra a continuación:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<title>Document</title>
</head>
<body>
<h4>Información de la API</h4>
<div>
<button type="button">Mostrar Información</button>
<div class="resultado"></div>
</div>
<script src="script.js"></script>
</body>
</html>
_ 7
www.desafiolatam.com
● Paso 3: Ahora en el archivo script.js, se debe agregar la función de AJAX para realizar
una petición del tipo GET.
$.ajax({
type:"GET",
url:"aquí va la url a consultar",
dataType:"json",
success: function(data) {
//si todo sale bien, se agrega la funcionalidad aquí.
},
error: function(error) {
//si todo sale bien, se agrega la funcionalidad aquí.
},
});
● Paso 4: Ya dispuesta la estructura de AJAX para una petición del tipo GET, se debe
agregar la función principal de jQuery, además el escucha y manejador de evento
para el botón, porque la idea es que cuando el usuario haga un click sobre el botón,
se realice el llamado a la API, se traiga la información y se muestre.
$(document).ready(function(){
$('button').on('click',function(){
$.ajax({
type:"GET",
url:"https://reqres.in/api/users",
dataType:"json",
success: function(data) {
//si todo sale bien, se agrega la funcionalidad aquí.
},
error: function(error) {
//si todo sale bien, se agrega la funcionalidad aquí.
},
});
});
});
● Paso 5: Con la funcionalidad lista de AJAX más el evento “click” activo en el botón.
Agrega dentro de la función “success” de AJAX, lo que debe ocurrir cuando la
información que retorne la API esté completa y sea correcta la conexión. Mientras
que en la función “error”, se desplegará la información para indicar que hubo un error
con la conexión a la API. En este caso, vamos a mostrar la información
primeramente en un console.log, para ver que trae la API (es recomendable utilizar
_ 8
www.desafiolatam.com
postman para ver la estructura de la información). En este ejercicio, la información la
estamos recibiendo en una variable denominada “datosApi” y dentro de ella se extrae
la data original que viene con la API para esa petición en específico.
$(document).ready(function(){
$('button').on('click',function(){
$.ajax({
type:"GET",
url:"https://reqres.in/api/users",
dataType:"json",
success: function(datosApi) {
console.log(datosApi.data);
}
error: function(error) {
//si todo sale bien, se agrega la funcionalidad aquí.
},
});
});
});
● Paso 6: Al ejecutar el código anterior y si la conexión fue exitosa, en la consola del
navegador el resultado debe ser:
Imagen 6. Información proveniente de la API.
Fuente: Desafío Latam
● Paso 7: Ahora como ya tenemos la información proveniente de la API lista para usar,
vamos a mostrar esa información dentro de la etiqueta <div> con clase “resultado”.
_ 9
www.desafiolatam.com
Por lo tanto, se debe captar el elemento por la clase “resultado” para luego mediante
el método “append” de jQuery podremos agregar una simple etiqueta de párrafo para
la data que retorna la API. Esta información viene encapsulada dentro de un arreglo,
y dentro del arreglo son distintos objetos que contienen el contenido, entonces se
hace necesario el uso de forEach para recorrer el arreglo.
$(document).ready(function(){
$('button').on('click',function(){
$.ajax({
type:"GET",
url:"https://reqres.in/api/users",
dataType:"json",
success: function(datosApi) {
console.log(datosApi.data);
datosApi.data.forEach(element => {
$('.resultado')
.append(`<p>${element.id}-${element.email}-
${element.first_name}-${element.last_name}-
${element.avatar}</p>`);
})
},
error: function(error) {
//si algo sale mal, se agrega la funcionalidad aquí.
},
});
});
});
● Paso 8: Al ejecutar el código anterior en nuestro navegador web y hacer clic sobre el
botón “Mostrar Información”, el resultado debería ser:
_ 10
www.desafiolatam.com
Imagen 7. Mostrando información proveniente de la API en el documento web.
Fuente: Desafío Latam
Ejercicio propuesto (12)
Para la siguiente dirección web (perteneciente a una API):
https://jsonplaceholder.typicode.com/users. Realiza la respectiva conexión mediante AJAX
y luego muestra la información solo cuando un usuario haga click sobre un botón.
_ 11
www.desafiolatam.com
