5.7 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d7fae367417b2b2512be3 | Obtén JSON con el método XMLHttpRequest JavaScript | 6 | 301502 | get-json-with-the-javascript-xmlhttprequest-method |
--description--
También puedes solicitar datos de una fuente externa. Aquí es donde entran en juego las API.
Recuerda que las APIs - o Interfaces de Programación de Aplicaciones - son herramientas que las computadoras utilizan para comunicarse entre sí. Aprenderás cómo actualizar HTML con los datos que obtenemos de las APIs usando una tecnología llamada AJAX.
La mayoría de las API web transfieren datos en un formato llamado JSON. JSON significa Notación de Objetos JavaScript.
La sintaxis JSON se ve muy similar a un objeto de JavaScript. JSON tiene propiedades de objetos y sus valores actuales, enrollados entre un { y un }.
Estas propiedades y sus valores a menudo son referidos como "pares clave-valor".
Sin embargo, JSON transmitido por APIs se envía como bytes, y tu aplicación lo recibe como string. Estos pueden ser convertidos en objetos de JavaScript, pero no son objetos de JavaScript por defecto. El método JSON.parse analiza la cadena y construye el objeto JavaScript descrito por ella.
Tú puedes solicitar el JSON desde la API de foto del gato de freeCodeCamp. Este es el código que puedes poner en tu evento de clic para hacer esto:
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
const json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
};
Aquí hay una revisión de lo que cada pieza está haciendo. El objeto XMLHttpRequest de JavaScript tiene un número de propiedades y métodos que se utilizan para transferir datos. Primero, se crea y guarda una instancia del objeto XMLHttpRequest en la variable req. A continuación, el método open inicializa una solicitud - este ejemplo está solicitando datos de una API, por lo tanto es una solicitud GET. El segundo argumento para open es la URL de la API de la que estás solicitando datos. El tercer argumento es un valor booleano donde true lo hace una solicitud asincrónica. El método send envía la solicitud. Finalmente, el manejador de eventos onload analiza los datos devueltos y aplica JSON.stringify para convertir el objeto de JavaScript en una cadena. Esta cadena es luego insertada como el texto del mensaje.
--instructions--
Actualiza el código para crear y enviar una solicitud GET a la API de foto del gato de freeCodeCamp. Luego haz clic en el botón Get Message. Tu función AJAX reemplazará el texto The message will go here con la salida JSON de la API.
--hints--
Tu código debe crear un nuevo XMLHttpRequest.
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
Tu código debe utilizar el método open para inicializar una solicitud GET a la API de foto del gato de freeCodeCamp.
assert(
code.match(
/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g
)
);
Tu código debe utilizar el método send para enviar la solicitud.
assert(code.match(/\.send\(\s*\)/g));
Tu código debe tener un manejador de eventos onload establecido a una función.
assert(
code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g)
);
Tu código debe utilizar el método JSON.parse para analizar el responseText.
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
Tu código debe obtener el elemento con id message y cambiar su HTML interno a la cadena de datos JSON.
assert(
code.match(
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g
)
);
--seed--
--seed-contents--
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
// Add your code below this line
// Add your code above this line
};
});
</script>
<style>
body {
text-align: center;
font-family: "Helvetica", sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
}
.box {
border-radius: 5px;
background-color: #eee;
padding: 20px 5px;
}
button {
color: white;
background-color: #4791d0;
border-radius: 5px;
border: 1px solid #4791d0;
padding: 5px 10px 8px 10px;
}
button:hover {
background-color: #0F5897;
border: 1px solid #0F5897;
}
</style>
<h1>Cat Photo Finder</h1>
<p class="message box">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
--solutions--
<script>
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open('GET', '/json/cats.json', true);
req.send();
req.onload = () => {
const json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
};
};
});
</script>
<style>
body {
text-align: center;
font-family: "Helvetica", sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
}
.box {
border-radius: 5px;
background-color: #eee;
padding: 20px 5px;
}
button {
color: white;
background-color: #4791d0;
border-radius: 5px;
border: 1px solid #4791d0;
padding: 5px 10px 8px 10px;
}
button:hover {
background-color: #0F5897;
border: 1px solid #0F5897;
}
</style>
<h1>Cat Photo Finder</h1>
<p class="message box">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>