javascript Atribuindo valores do http.response para variáveis Json

Filhote de Dev · Setembro 12, 2019

Estou fazendo um requisição HTTP e de retorno recebo um Json! Então eu quero pegar esse valor de Json e atribuir a outra variável para poder modificá-la e depois exibir as duas lado a lado para comparar. Então me deparei com 2 problemas o primeiro é que não estou conseguindo atribuir o valor httpRequest.responseText a uma variável, já tentei a função eval() e a toString() e quando eu peço para printar com um alert() para verificar me retorna undefined o segundo problema é que eu estava exibindo o resultado na dom por meio de appendChild(), estou exibindo apenas com os valores originais para teste, mas quando ele executa esse trexo do code, ele printa na dom e logo em seguida retira da dom, tipo uma piscadinha rápida. Ficaria grato se me ajudassem a resolver esse problema.

o Json que ele recebe de uma pagina .html é esse:

{"numero_casas":9,"token":"68c56aa784fe216ae92720b76386ea0995055074","cifrado":"fqnw rw mxdkc, unjen rc xdc. sxbqdj kuxlq","decifrado":"","resumo_criptografico":""}

o Script esta assim:

var httpRequest
function request(){
	var url = 'test.html'//apagar depois

	if (window.XMLHttpRequest) { // Mozilla, Safari, ...
		httpRequest = new XMLHttpRequest()
	} else if (window.ActiveXObject) { // IE
		try {
			httpRequest = new ActiveXObject("Msxml2.XMLHTTP")
		}
		catch (e) {
			try {
				httpRequest = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e) {}
		}
	}

	if (!httpRequest) {
		alert('Giving up :( Cannot create an XMLHTTP instance')
		return false
	}
	httpRequest.onreadystatechange = alertContents
	httpRequest.open('GET', url, true)
	httpRequest.responseType = 'jason'
	httpRequest.send()
	httpRequest.onload = function(){
		view(httpRequest)
	}	
}

function alertContents() {
	if (httpRequest.readyState === 4) {
		if (httpRequest.status === 200) {
			alert(httpRequest.responseText)
		} else {
			alert('There was a problem with the request.')
		}
	}
}


function view(httpRequest){
	var resposta = httpRequest.responseText.toString()
	alert(resposta.value)
	var box = document.querySelector('div#decoding')
	box.setAttribute('class', 'shadow')

	var challenge = document.createElement('fieldset')
	challenge.setAttribute('class', 'painting')
	var legendChallenge = document.createElement('legend')
	legendChallenge.innerHTML = 'Challenge'
	challenge.innerHTML = `Número de casas: ${httpRequest.response.numero_casa}<br>
	Token: ${httpRequest.response.token}<br>
	Cifrado: ${httpRequest.response.cifrado}<br>
	Decifrado: ${httpRequest.response.decifrado}<br>
	Resumo Criptografico: ${httpRequest.response.resumo_criptografico}`

	var answer = document.createElement('fieldset')
	answer.setAttribute('class', 'painting')
	var legendAnswer = document.createElement('legend')
	legendAnswer.innerHTML = 'Answer'
	answer.innerHTML = `Número de casas: ${httpRequest.response.numero_casas}<br>
	Token: ${httpRequest.response.token}<br>
	Cifrado: ${httpRequest.response.cifrado}<br>
	Decifrado: ${httpRequest.response.decifrado}<br>
	Resumo Criptografico: ${httpRequest.response.resumo_criptografico}`

	box.appendChild(challenge)
	box.appendChild(answer)
	challenge.appendChild(legendChallenge)
	answer.appendChild(legendAnswer)
}

Index.html:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="style.css">
		<title>Caesar cipher</title>
	</head>
	<body>
		<header>
			<h1>Caesar cipher</h1>
		</header>
		<section>
			<div class="container">
				<div class="box">
					<div class="form">
						<form action="">
							<div>
								<fieldset class="shadow">
									<legend><h1>Decoding</h1></legend>
									<button id="btntoken" onclick="request()">Fetch Encryption Challenge</button>
								</fieldset>
							</div>
							<div id="decoding" class="aling"></div>
						</form>
					</div>
				</div>
			</div>
		</section>
		<footer>

		</footer>
		<script type="text/javascript" src="script.js"></script>
	</body>
</html>

e o style.css para dar sentido as class:

/*zerando margein e padding de todos os elementos*/
*{
	margin: 0;	
	padding: 0;
}
/*definido estilo padrão*/
body{
	font-family: 'Courier New', Courier, monospace;
	font-size: 16px;
	background-color: #F5F6FA;
}
/*Estilização e alinhamento do cabeçario*/
header{
	background-color: #22212F;
	color: #FFF;
	height: 80px;
	font-size: 24px;
	align-items: center;
	display: flex;
	padding-left: 15px;
}
/*Alinhamento das tags presentes na section*/
	section,div.form{
	display: flex;
	justify-content: center;
}
div.container{
	margin:5px;
	width: 800px;
	background-color: #FFF;
	padding: 15px;
	margin-top: 20px;
}
div.parag,div.box{
	display: block;
}
div.form{
	margin-top:30px;
}
p{
	margin-top: 10px;
}
/*estilização do formulario principal*/
.shadow{
	box-shadow: 5px 5px 5px 2px #22212F;
}
fieldset{
	width: 500px;
	min-height:150px;
	padding: 10px;
}
legend{
	font-size: 20px;
}
input#token{
	font-size: 16px;
	width: 350px;
	height: 30px;
}
button#btntoken{
	margin: 5px;
	margin-top:15px;
	width:480px;
	height: 50px;
	font-size: 24px;
}

/*estilização da resposta ao usuário*/
.aling{
	margin: 20px;
}
.painting{
	display: inline-block;
	width: 230px;
	min-height: 100px;
}

gabrielms · Setembro 12, 2019

@Filhote de Dev

Bom amigo isso que eu vou falar e chato porem, é necessário. Seu código está muito bagunçado, ele está meio confuso.

Tem um problema no elemento form. Quando você não definir um tipo para o botão que está dentro de um elemento form, ele por padrão vai ser do tipo submit e quando o usuário clicar nele, ele vai disparar o evento submit do form, assim o form vai fazer uma request para a mesma página recarregando a página e perdendo a chama do método request().

Para resolver isso basta definir um tipo para o botão e bloquear o evento de submit do form.

<form onsubmit="return false">

<button type="button" id="btntoken" onclick="request()">Fetch Encryption Challenge</button>

O form vai ficar assim:

<form onsubmit="return false">
	<div>
		<fieldset class="shadow">
			<legend><h1>Decoding</h1></legend>
			<button type="button" id="btntoken" onclick="request()">Fetch Encryption Challenge</button>
		</fieldset>
	</div>
	<br>
	<div id="decoding" class="aling"></div>
	</form>

Bom tem algumas coisa estranhar que eu nunca vi ser utilizada, como o evento de onload no object XmlHttpRequest; e o responseType com o nome de 'jason'. Também não consegui entender qual a utilidade do método alertContents().

Vou deixar aqui um tutorial de Introdução ao AJAX

Vou deixa também um código de exemplo:

function request()
            {
                let 
                    xmlhttp,
                    url = "server.php"; // remover

                if (window.XMLHttpRequest)
                {
                    // code for modern browsers
                    xmlhttp = new XMLHttpRequest();
                }
                else
                {
                    // code for old IE browsers
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                if (!xmlhttp)
                {
                    alert('Giving up :( Cannot create an XMLHTTP instance')
                    return false
                }

                xmlhttp.onreadystatechange = function()
                {
                    if (this.readyState == 4 && this.status == 200)
                    {
                        let jsonRequest;

                        try {
                            jsonRequest = JSON.parse(this.responseText); // Convertendo o texto em um JSON
                            view(jsonRequest);
                            return;
                        }
                        catch(e)
                        {
                            alert("A resposta do servidor não pode ser convertida em um JSON");
                        }
                    }
                }

                xmlhttp.open("GET", url, true);
                xmlhttp.send();

            }

            function view(jsonRequest)
            {
                if (typeof jsonRequest != "object")
                {
                    return false;
                }

                let 
                    box = document.querySelector('div#decoding'),
                    challenge = document.createElement('fieldset'),
                    legendChallenge = document.createElement('legend'),
                    answer = document.createElement('fieldset'),
                    legendAnswer = document.createElement('legend');

                box.setAttribute('class', 'shadow');
                challenge.setAttribute('class', 'painting');
                answer.setAttribute('class', 'painting');

                legendChallenge.innerHTML = 'Challenge';
                challenge.innerHTML = `
                    Número de casas: ${jsonRequest.numero_casas}<br>
                    Token: ${jsonRequest.token}<br>
                    Cifrado: ${jsonRequest.cifrado}<br>
                    Decifrado: ${jsonRequest.decifrado}<br>
                    Resumo Criptografico: ${jsonRequest.resumo_criptografico}
                `;
                legendAnswer.innerHTML = 'Answer';
                answer.innerHTML = `
                    Número de casas: ${jsonRequest.numero_casas}<br>
                    Token: ${jsonRequest.token}<br>
                    Cifrado: ${jsonRequest.cifrado}<br>
                    Decifrado: ${jsonRequest.decifrado}<br>
                    Resumo Criptografico: ${jsonRequest.resumo_criptografico}
                `;

                box.appendChild(challenge);
                box.appendChild(answer);
                challenge.appendChild(legendChallenge);
                answer.appendChild(legendAnswer);
            }

Filhote de Dev · Setembro 13, 2019

Obrigado Gabrielms! Sua resposta foi recebida com carinho.

A questão do button eu realmente desconhecia que ele recebesse esse atributo como default e isso solucionou o problema da piscadela.

O método alertContents() ele está ae apenas para me orientar se o que estou recebendo, se estou recebendo é o que eu realmente quero receber. Essa linha será comentada no final!

Mas você ajudou bastante resta agora só eu conseguir fazer a atribuição do json para outra variável.

Agora na questão da codificação confusa teria alguma dica de como eu resolver isso?

Entrar

Arquivado

javascript Atribuindo valores do http.response para variáveis Json

Recommended Posts

Filhote de Dev 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Filhote de Dev 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante