A question, like button
is an object and onclick
its method to be carried out when I do click , why onreadystatechange
is a property and not a method? since a xmlhttp
(object) I give onreadystatechange
as property, but to equal it to the function is no longer property, is it method ?. Why does it say in Internet that it is a property?
boton.onclick = function(){
//1. new objeto ajax =>
let xmlhttp = new XMLHttpRequest();
// console.log(xmlhttp); // mi objeto
//2. METHOD => A mi objeto le doy un property onreadystatechange(0-4)
xmlhttp.onreadystatechange = function() {
// console.log(xmlhttp);
console.log(xmlhttp.onreadystatechange);
// Retorna el codigo puro (responseText = La respuesta al pedido como texto, o null si el pedido no fue exitoso o todavía no se envió.)
let codigoPuro = xmlhttp.responseText;
document.getElementById("resultado1").innerHTML = codigoPuro;
//recibe codigo parseado, retorna [object Object] =>
let codigoParseado = JSON.parse(codigoPuro);
document.getElementById("resultado2").innerHTML = codigoParseado;
let detalles = "Nombre de la pandilla: <b>" + codigoParseado.nombrePandilla + "</b><br>";
detalles += "Son " + codigoParseado.miembros.length + " superhéroes de " + codigoParseado.cuidad + "<br>";
detalles += "La más fuerte es " + codigoParseado.miembros[1].nombre + ", con " + codigoParseado.miembros[1].superpoderes.length + " superpoderes:<br>";
for (let i in codigoParseado.miembros[1].superpoderes) {
detalles += " - " + codigoParseado.miembros[1].superpoderes[i] + "<br>";
}
document.getElementById("resultado3").innerHTML = detalles;
}
// abrir una llamada una solicitud(request) / (url donde quiero hacer la solicitud) / true es asincrono =>
xmlhttp.open("GET", "archivos/superheroes.json", true);
xmlhttp.send();
}
<html>
<head>
<title>JSON</title>
<meta charset="utf-8">
</head>
<body>
<button id="boton">¡Procesar JSON!</button>
<h4>JSON puro:</h4>
<p id="resultado1"></p>
<h4>JSON parseado:</h4>
<p id="resultado2"></p>
<h4>Objeto literal resultante:</h4>
<p id="resultado3"></p>
</body>
</html>