Atualização em Banco de Dados sem refresh - ASP e PHP
Autor: Adriano Moura | Publicado: 2010-05-13T10:45:00-03:00

Olá meus caros amigos, estava com saudades de vocês.

Aproveitei Hoje para fazer um tópico super-especial, criaremos um sistema que executa funções ASP ou PHP ou qualquer outra sem a necessidade de darmos REFRESH no browser.

AH?
Deixa eu explicar, sempre que fazemos alguma solicitação em alguma página, seja PHP, ASP, .NET, JSP, essas linguagens trabalham com servidor, ou seja, tudo o que solicitamos é enviado ao servidor o mesmo processa a informação e retorna com o resultado, o nosso computador se responsabiliza apenas em exibir o HTML enquanto todos os processos dinâmicos param no servidor, por esse motivo é necessário o REFRESH, pois o servidor tem que atualizar o conteúdo da página que estamos abrindo.

Certo, mas se é assim no que consiste esse tutorial?
Boa Pergunta, usaremos de um artifício usando Java Script, simplesmente isso, o Java Script inter-mediara nossa comunicação entre HTML e ASP ou PHP, tanto faz. 


Mãos na massa
Criaremos aqui uma calculadora de soma. QUE? É isso mesmo eu sei que isso não necessita de muito conhecimento, inclusive poderia fazer somente com Java Script, mas esse tutorial ira explicar apenas o conceito do processo, o resto depende da sua criatividade.

Calc.htm - digitem entre &lt;body&gt;&lt;/body&gt;

&lt;table width="632" border="1"&gt;
&nbsp; &lt;tr&gt;
&nbsp;&nbsp;&nbsp; &lt;td width="338"&gt;&lt;label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="valor1" id="valor1" /&gt;
&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label&gt; +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" name="valor2" id="valor2" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label&gt;
&lt;input type="submit" name="button" id="button" value="+" onclick="calcula()" /&gt;
&lt;/label&gt;&lt;/td&gt;
&nbsp;&nbsp;&nbsp; &lt;td width="278"&gt;&lt;div id="resultado"&gt;&lt;/div&gt;&lt;/td&gt;
&nbsp; &lt;/tr&gt;
&lt;/table&gt;
Vejam a div resultado não tem valores dentro pois os mesmos serão inseridos após o calculo, e reparem que o botão chama a função calcula, é essa função que intermediara nosso processo, vejam como


digitem entre &lt;head&gt;&lt;/head&gt;

&lt;script&gt;
function calcula() {
&nbsp;&nbsp;&nbsp; var head&nbsp;&nbsp;&nbsp; = document.getElementsByTagName('head').item(0);

&nbsp;&nbsp;&nbsp; var eScript&nbsp;&nbsp;&nbsp; = document.createElement('script');

&nbsp;&nbsp;&nbsp; v1 &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = document.getElementById('valor1').value;
&nbsp;&nbsp;&nbsp; v2 &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = document.getElementById('valor2').value;

&nbsp;&nbsp;&nbsp; eScript.setAttribute('type','text/javascript'); 
&nbsp;&nbsp;&nbsp; eScript.setAttribute('src','caucula.asp?V1='+v1+'&amp;V2='+v2);
&nbsp;&nbsp;&nbsp; head.appendChild(eScript);
}
&lt;/script&gt;

Ai é que está o nosso segredo, reparem só o Script cria um objeto do tipo script porém não se trata de um script e sim de um asp, essa é uma grande vantagem que muita gente não sabe, o ASP ou PHP não são linguagens diretamente ligadas ao HTML, elas podem muito bem servir de script, css, rss, xml, etc. pois como ela é interpretada em servidor o resultado que chega ao usuário não contém asp.

Agora iremos montar a página calcula.asp

calcula.asp

&lt;%
valor1 = cint(request.Querystring('V1'))
valor2 = cint(request.Querystring('V2'))

resultado = valor1 + valor2


response.write "document.getElementById('resultado').innerHTML='"&amp;resultado&amp;"';"
%&gt;

Simples assim, o asp pega os valores soma e logo imprime a linha de script com o innerHTML, concatenando o resultado.

Explicando um pouco melhor
Nosso projeto inteiro consiste em apenas, a página pega os valores executados e manda para Java Script, porém ao invés de um script trata-se de um ASP, o ASP pega os valores soma e imprime na tela "document.getElementById('resultado').innerHTML='"&amp;resultado&amp;"';, como a página principal achava que era um script ela somente vai entender esse pedaço, por exemplo se digitamos 7 e 1 na página inicial eu receberei a seguinte linha "document.getElementById('resultado').innerHTML='8'; ou seja posso fazer aqui qualquer coisa, inserir um registro no banco de dados e já dar uma resposta para o usuário, ou enviar um e-mail, o que você imaginar que o ASP seja capaz de fazer nós poderemos fazer sem refresh.

Para adaptar para PHP mude request.querystring por $_GET e response.write por echo.


Valeu a todos e um grande abraço


Adriano Moura - adrianoaruom@hotmail.com