Pegar informações do banco sem submit ou refresh

[marcossantana10 0]

To criando um sistema de vendas e queria saber como faço pra colocar o código do produto (através de código de barras, por exemplo) e ele recuperar as informações desse produto no banco de dados sem que eu precise enviar as informações do código. Especialmente pra o caso de uma venda onde vários produtos podem ser vendidos de uma vez, criando uma lista destes produtos.

[ronaldomarcos 4]

Sem enviar não tem como, o que fará é enviar em segundo plano, pegar as resposta e usar na aplicação atual... isso é feito com httprequest vou te mandar um código de exemplo, mas sugiro estudar isso bem antes, posso até te indicar dois livros, tentei aprender usando a internet e só perdi tempo, só entendendo o funcionamento dos objetos/componentes e como usá-los vai aprender de verdade.

Vejamos só como que usaria e um sistema de comentário de artigos, onde o cara pede para ver os comentários, ele busca e apresenta o resultado:

Essa div conteúdo-comentário está vazia, então nem aparece se não tiver estilo aplicado nela, o span é o botao com um onclick que, nesse exemplo, levo também o codigo (21) do artigo que tem os comentários (no seu caso de produtos pode ser o texto da busca do produto ou codigo de barras):

<div id="conteudo-comentario">
</div>

<span id="chamacomm" onclick="paginaComentarios(21);">Clique para ver os comentários</span>

 

 

Abaixo como poderia ser a função javascript que faria a requisição e devolveria a resposta para você, vou comentar no código.

 

 

function paginaComentarios(codigo) {

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

document.getElementById('chamacomm').innerHTML = 'Carregando...'; // aqui só troco o texto do botão para o cara ver que está buscando, podia sumir com o botao e colocar uma imagem de carregando também, para evitar que ele clique de novo e saber que algo aconteceu.


xmlhttp.open("GET","http://site.com/paginamcomentarios.php?codigo="+codigo+"",false);
xmlhttp.send();
// acima eu passei com get a pagina com as strings para localizar os dados no banco, seja em php, asp, não importa.. poderia ser com POST, o carregamento dessa pagina acontece em segundo plano, e gera um trecho texto/html com dados que será pego pelo httprequest quando terminar de carregar

if (xmlhttp.readyState != 200) { // aqui ele verifica se sua pagina (a passada no get acima) ja terminou de carregar. Dá verficicar mais coisas sobre o carregamento além do final dele.
if (xmlhttp.responseText != '') { // responseText que pega o que foi gerado na pagina.. aqui verifico se nao ficou vazio
document.getElementById('conteudo-comentario').innerHTML = xmlhttp.responseText; //Aqui eu jogo dentro da div que estava vazia (conteudo-comentario) o resultado da pagina passada no get
} else {
document.getElementById('conteudo-comentario').innerHTML = 'Nada foi encontrado'; //Aqui mandei colocar o texto que nada foi achado, se retornou vazio no responseText.
}
}

É um exemplo bem simples, mas acho que dá pra entender a lógica e facilitar o que busca.

Imagine um outro exemplo, em vez de buscar os comentários você queira colocar um novo, voce colocaria um input/textarea/divEditavel para o cara escrever e um botao para enviar (sem submit, chamando apenas o httprequest)...


Aí, você chama o httprequest, pega pelo ID o nome do campo o texto do comentário, e passa por GET ou POST para uma pagina que salva no banco (em qualuqer linguagem, php, asp, etc,), só que você validaria na gravacao com IFs... se salvou você manda dar um response.write (asp) ou echo (php) como o valor 1 se deu certo, 2 se deu errdo e por ai vai... (1 e 2 são exemplo coloque o que voce quiser)

No responseText do httprequest, que trouxe os comentarios no exemplo anterior, nesse caso só traria então um número ... Ali nao função onde eu mandei imprimir na div conteudo-comentario o resultado agora você faria teste para ver o que resultou, se deu 2, você poderia enviar um alert dizendo que deu erro para tentar de novo, se deu 1, poderia avisar que deu certo, mas poderia (e ficaria mais bonito e barato) inserir o comentario novo na tela junto com os outros (e veja que você nem precisaria buscar o registro ou dar refresh, já que la na pagina que salvou, se deu certo a gravacao voce poderia ja pegar o codigo do novo comentario recem gravado e dar a resposta como 1,23 (exemplos apena, onde 1 seria GRAVOU e 23 o codigo do novo comentario)) ...

 

O httprequest deixa você identificar como valores separados usando virgula (ou outro separador que queira usar- no exemplo coloquei 1-23)... Aí ele vê que retornou 1 que voce usou para dizer que está certo, e você na mesma função já tem os dados do comentário que basta mandar imprimir onde quiser na tela, nesse caso o 23 codigo do novo comentário que veio junto e que voceê vai usar também caso queira em outra ação, pois se o cara quiser uma ação de apagar logo depois que foi salvo (e sem o refresh) vai precisar do codigo dele no banco...

Basicamente isso que acontece no Facebook por exemplo, voce escreve e ele ja aparece na lista, sem refresh, o mesmo seria para apagar, se a pagina retornou que apagou, voce manda excluir a div dele na hora (ou nó qualquer)... só tem de pensar em todas as possibilidades do que pode acontecer no segundo plano, para passar isso ao usuario...

Tenho visto que muita gente diz que insere no facebook e some, talvez seja falha nesse ponto.... ele devolve o carregamento como ok, mas nao verificam se a gravacao ocorreu de forma correta (claro que lá é muito mais complexo e envolve bancos diferentes em servidores diferentes etc etc e acaba passando) e eles imprimem na tela, só que depois quando voce da um refresh (e busca no bd de verdade) nao está mais... ou, na demora depois de alguns segundos até a resposta do servidor, mesmo ja tendo aparecido como salvo ele da mensagem de erro e aparece mais apagado com um sinal amarelo sinalizando erro... mas você consegue pensar em todas as possibilidades num sistema não tão grande quanto o deles.