HOWTO · JavaScript
Obtener JSON de URL en JavaScript
Para recibir un JSON desde la URL, podemos usar JQuery, Fetch API y también XMLHttpRequest. Cada uno de los métodos es apropiado y muestra el resultado de manera viable.
En esta página
Los formatos JSON se toman de una URL en particular. Los datos pueden estar en múltiples formatos y es una de las formas más legibles para humanos y computadoras.
Aquí, discutiremos tres formas de recuperar JSON de URL y usarlo en JavaScript.
Obtener JSON de URL usando jQuery
Por lo general, jQuery.getJSON(url, data, success) es el método de firma para obtener JSON de una URL. En este caso, la URL es una cadena que asegura la ubicación exacta de los datos, y data es solo un objeto enviado al servidor. Y si la solicitud tiene éxito, el estado viene a través del success. Hay una demostración de código abreviado para este proceso.
Fragmento de código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-1.6.4.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="display"></div>
<script>
$.getJSON('https://jsonplaceholder.typicode.com/todos/1', function(data){
var display = `User_ID: ${data.userId}<br>
ID: ${data.id}<br>
Title: ${data.title}<br>
Completion_Status: ${data.completed}`
$(".display").html(display);
});
</script>
</body>
</html>
Producción:
JSON desde URL por el método API Fetch
En este caso, el método fetch simplemente toma la URL para asignar el servidor de datos y se asegura de devolver los datos JSON.
Fragmento de código:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(result => result.json())
.then((output) => {
console.log('Output: ', output);
})
.catch(err => console.error(err));
Producción:
Use XMLHttpRequest para JSON desde URL
Aquí, primero tomaremos la URL en una función con una instancia de XMLHttpRequest. Usaremos el método open para preparar la solicitud de inicialización, y luego con responseType definiremos el tipo de respuesta. Finalmente, el método onload responderá a la solicitud y previsualizará la salida.
Fragmento de código:
var getJSON = function(url, callback) {
var xmlhttprequest = new XMLHttpRequest();
xmlhttprequest.open('GET', url, true);
xmlhttprequest.responseType = 'json';
xmlhttprequest.onload = function() {
var status = xmlhttprequest.status;
if (status == 200) {
callback(null, xmlhttprequest.response);
} else {
callback(status, xmlhttprequest.response);
}
};
xmlhttprequest.send();
};
getJSON('https://jsonplaceholder.typicode.com/todos/1', function(err, data) {
if (err != null) {
console.error(err);
} else {
var display = `User_ID: ${data.userId}
ID: ${data.id}
Title: ${data.title}
Completion_Status: ${data.completed}`;
}
console.log(display);
});
Producción:
