javascript Receber dados pelo metodo XMLHttpRequest com Javascript

lucas70770 · Março 4, 2017

Ola, estou com um código que peguei na internet ele envia meu form com esse método:

var request = new XMLHttpRequest();
request.open('post', '../server.php');

E na pagina server.php eu insiro no banco de dados algumas informações. Porem quero q a pagina server.php me retorne algumas dados e não sei fazer isso com esse método XMLHttpRequest.

Obrigado pela atenção.

wootzor · Março 6, 2017

A propriedade response irá conter os dados devolvidos pela chamada do método open().

gabrieldarezzo · Março 6, 2017

Citar

não sei fazer isso com esse método XMLHttpRequest

Tenho um passo a passo no GitHub focado em explicar como efetuar um Ajax, veja se ajuda:

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

Percebi tmb que você está tentando efetuar via JS nativo (sem jQuery)

Tem um exemplo básico de consulta por CEP aqui: (Utilizando apenas JavaScript)

http://gabrieldarezzo.github.io/busca_cep/vanilla.html

lucas70770 · Março 6, 2017

Obrigado pela ajuda @wootzor e @gabrieldarezzo, mas não consegui o que eu queria. Testei o response mas não deu resultado, ele não me retorna o echo da minha pagina php que estava sendo usada pelo open. Eu também testei com o exemplo do Mozilla mas além de não dar resultado eu não entendi porque o response vem antes do open.

Exemplo:

var url = 'somePage.html'; //A local page

function load(url, callback) {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      console.log(xhr.response); //Outputs a DOMString by default
    }
  }

  xhr.open('GET', url, true);
  xhr.send('');
}

gabrieldarezzo · Março 6, 2017

Você chamou a sua própria função?

Pois testei aqui e funcionou normalmente (ocorreu a impressão no console (F-12 no navegador))

Exemplo completo utilizando o seu:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	
	<script type="text/javascript">
		var url = 'somePage.html'; //A local page

		function load(url, callback) {
		  var xhr = new XMLHttpRequest();

		  xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
			  console.log(xhr.response); //Outputs a DOMString by default
			}
		  }

		  xhr.open('GET', url, true);
		  xhr.send('');
		}
		
		//Chama assim que o JS é carregado..
		load(url, function(){});
		
		
	
	</script>
	
</body>
</html>

Fiquei em duvida com esse callback, mas ok.

Alguns pontos que você pode estar comendo bola:

1- Verifique se no seu Console tem algum erro. (F-12 no Navegador/Aba Console)

2- abra a pagina 'somePage.html' e verifique se a mesma está funcionando.

3- Monitore a requisição pela aba NetWork do seu Navegador

Exemplo pelo Chrome: https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#5---acompanhar-oq-foi-enviado

( Vendo principalmente as sub-abas: Preview/Response )

lucas70770 · Março 6, 2017

Desculpe o incomodo, é que eu esqueci de chamar a função.

gabrieldarezzo · Março 6, 2017

Acho q a ideia do Mozilla seria encapsular a requisição ajax dentro de uma função (Um Click de botão por exemplo?)

Levando em conta que funções são coisas primordiais é deduzível que a mesma deve ser chamada ;)

Da uma lida no Guia de ajax. pode de dar uma ideia mais completa.

Que bom q deu certo ai.

Abraços.

Citar

Fiquei em duvida com esse callback, mas ok.

A ideia principal de callback em funções assincronas é dar continuidade no fluxo, já q você não tem noção de qnd a função vai terminar... porem assim q ela terminar é disparada a função callback saca?

https://pt.wikipedia.org/wiki/Comunicação_assíncrona

lucas70770 · Março 6, 2017

Então quer disser que se eu usar esse função para quando eu clicar em um botão dar um submit em vários formulários e cadastrar no banco de dados pela pagina chamada por essa função pode haver algum erro(no caso haver apenas um cadastramento) se não usar o callback?

gabrieldarezzo · Março 6, 2017

Não o tratamento de erro deveria ser feito dentro da propria requisição.

Ex:

var url = "https://viacep.com.br/ws/05373030/json/";		

ajax = new XMLHttpRequest();			

ajax.onreadystatechange = function() {
	if (ajax.readyState == XMLHttpRequest.DONE ) {
	   if (ajax.status == 200) {
		   var json = JSON.parse(ajax.responseText);							
		
			//Assim que chegar aqui signfica que foi uma requisição 'OK' e pode executar o CallBack
			return callBack(json);
		
	   } else if (ajax.status == 400) {
		  alert('There was an error 400');
	   }
	   else {
		   alert('something else other than 200 was returned');
	   }
	}
};

ajax.open('GET', url, true);
ajax.send();

Lista das resposta HTTP (200 é 'ok'), 404 = Não existente... e por ai vai hehe

https://pt.wikipedia.org/wiki/Lista_de_códigos_de_estado_HTTP

Outra coisa bem comum (e até uma boa pratica) é definir um tempo maximo para a função (o famoso timeout)

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/timeout

Voltando ainda o exemplo acima...

Faz de conta que fora do escopo (do ajax) você tem uma função chamada 'populaEndereco()'

Que recebe os parametros endereço, bairor, cidade e popula isso no HTML.

Exemplo completo:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Busca de CEP Ajax e WebService</title>

	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	
	<meta name="description" content="Uma simples consulta no WebService da ViaCep para preencher o endereço utilizando o CEP">
	<meta name="keywords" content="HTML,JS,JsVanilla,Vanilla,CEP, WebService,Estudo Js,Endereço Automatico">
	<meta name="author" content="Gabriel Darezzo">

	
	<style type="text/css">
		label{
			display: block;		
		}		
		.big-field{
			width: 100%;
			max-width: 310px;
		}
	</style>
</head>
<body>



<form action="#" onsubmit="return false">
	<h5>Busca de CEP</h5>

	<label for="cep">Cep</label>
	<input type="tel" placeholder="Informe o Cep" id="cep" name="cep" maxlength="8">
	<!-- Repare no maxlength="8", assim apenas 8 digitos do cep são aceitos -->
		
	<label for="uf" >UF</label>
	<input type="text" placeholder="UF" name="uf" id="uf">
	

	<label for="cidade" >Cidade</label>
	<input type="text" placeholder="Informe a cidade" id="cidade" name="cidade">
		
	<label for="bairro" >Bairro</label>
	<input type="text" placeholder="Informe o Bairro" name="bairro" id="bairro">
	
	
	<label for="endereco" >Endereço</label>
	<input type="text" class="big-field" placeholder="Informe o seu Endereço Ex:(Rua da Consolação)" name="endereco" id="endereco">
	
	<label for="nr_end" >Número</label>
	<input type="text" class="big-field" placeholder="Informe o número do endereço" name="nr_end" id="nr_end">
	
	<hr />
		
	<h3>Tecnologias:</h3>		
	<ul>
		
		<li>JS - Vanilla</li>
		<li>HTML</li>					
		<li>Ajax</li>
		<li>Consumo de WebService</li>
	</ul>
	
	<p>Este tutorial é um bonus do '<a target="_new" href="https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax">Guia definitivo AJAX</a>'
	
	<hr />
	<a href="http://vanilla-js.com" title="Powered By VanillaJs">
		Powered By <img src="http://vanilla-js.com/assets/button.png" alt="VanillaJs" />
	</a>	

</form>


<script type="text/javascript">

	//Foca no Cep
	document.getElementById('cep').focus();


	var lastCepCheck = '';

	document.getElementById('cep').addEventListener('keyup', function() {			
		//Impede inserir algo alem de Números
		this.value = this.value.replace(/[^0-9]/, "");
		
		//Pega apenas os números
		var cep = this.value.replace(/[^0-9]/, "");
		
		//Só pesquisa se tiver 8 caracteres e o ultimo cep pesquisado seja diferente do atual.
		if(cep.length != 8 || lastCepCheck == cep){
			return false;
		}
		lastCepCheck = cep;
		
		ajax = new XMLHttpRequest();
		
		var url = "http://viacep.com.br/ws/"+cep+"/json/";		
		ajax.open('GET', url, true);
		ajax.send();
		
		ajax.onreadystatechange = function() {
			if(ajax.readyState == 4 && ajax.status == 200) {
				
				var json = JSON.parse(ajax.responseText);							
				document.getElementById('endereco').value = json.logradouro;
				document.getElementById('bairro').value = json.bairro;
				document.getElementById('cidade').value = json.localidade;
				document.getElementById('uf').value = json.uf;
				document.getElementById('nr_end').focus();
			}
		}
	});		
</script>
</body>
</html>

lucas70770 · Março 6, 2017

É que o que acabei de citar acima é o que realmente esta acontecendo comigo. Eu tenho vários inputs file em forms diferentes(para processar a porcentagem do update dos arquivos de forma separada) e quando clico no botão <a>('Inserir Updates') ele da um submit em todos os forms mais na pagina php que processa os dados ele já faz o cadastramento do nome do arquivo, tamanho e código. Mas sempre que faço um teste no sistema eu envio três updates e sempre é cadastrado apenas o ultimo form e só é feito o update do arquivo deste form.

Só pra constar os forms são colocados de forma dinâmica(tem um botão que quando usado acrescenta um novo form de update) então o problema não é o form.

gabrieldarezzo · Março 6, 2017

Requisição ajax para inputs-file sempre foi problemáticas. pelo menos eu nunca acertei uma maneira legal garantindo comparatibilidade com browsers antigos, se alguém tiver um exemplo/artigo legal cite por favor.

Oq eu faço normalmente para deixar 'dinâmico' é a pessoa poder inserir multiplos files e enviando pelo Form/submit normalmente.

Exemplo:

https://github.com/gabrieldarezzo/comum/blob/master/upload_file.php

Ps: ei editei ali em cima

lucas70770 · Março 6, 2017

Ok é que eu preciso que ele mostre o process bar contado a porcentagem da transferência, se não o usuário pode fechar a pagina antes de ter transferido os arquivos.

gabrieldarezzo · Março 6, 2017

Deu uma buscada no google?

lucas70770 · Março 6, 2017

Já mas deu muito trabalho fazer todo o sistema de update, então não quero fazer tudo de novo.

gabrieldarezzo · Março 7, 2017

Cria um tópico novo.

Adiantando já...

Testa esse aqui:

http://malsup.com/jquery/form/progress3.html

Aparentemente funciona legalzinho.

Sobre dar muito trabalho.... :tongue:

http://lmgtfy.com/?q=upload+process+bar+javascript

Arquivado

javascript Receber dados pelo metodo XMLHttpRequest com Javascript

Recommended Posts

lucas70770 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

wootzor 103

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas70770 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas70770 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas70770 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas70770 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas70770 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas70770 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Arredondar Valor para cima

PHP - Atualizar INPUT com função moeda

PHP - Atualizar INPUT com função moeda

Conteúdo Similar

Fóruns

Tempo Real

Informação importante