Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.>
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)
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('');
}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](https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#5---acompanhar-oq-foi-enviado)
( Vendo principalmente as sub-abas: Preview/Response )Desculpe o incomodo, é que eu esqueci de chamar a função.
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?
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?
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](https://pt.wikipedia.org/wiki/Lista_de_c%C3%B3digos_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](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>É 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.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
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.
Deu uma buscada no google?
Já mas deu muito trabalho fazer todo o sistema de update, então não quero fazer tudo de novo.
Cria um tópico novo.
Adiantando já...
Testa esse aqui:
http://malsup.com/jquery/form/progress3.html
Aparentemente funciona legalzinho.
Sobre dar muito trabalho....
A propriedade response irá conter os dados devolvidos pela chamada do método open().