Postagens
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 <body></body>
<table width="632" border="1">
<tr>
<td width="338"><label>
<input type="text" name="valor1" id="valor1" />
</label>
<label> +
<input type="text" name="valor2" id="valor2" />
</label>
<label>
<input type="submit" name="button" id="button" value="+" onclick="calcula()" />
</label></td>
<td width="278"><div id="resultado"></div></td>
</tr>
</table>
<tr>
<td width="338"><label>
<input type="text" name="valor1" id="valor1" />
</label>
<label> +
<input type="text" name="valor2" id="valor2" />
</label>
<label>
<input type="submit" name="button" id="button" value="+" onclick="calcula()" />
</label></td>
<td width="278"><div id="resultado"></div></td>
</tr>
</table>
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 <head></head>
<script>
function calcula() {
var head = document.getElementsByTagName('head').item(0);
var eScript = document.createElement('script');
v1 = document.getElementById('valor1').value;
v2 = document.getElementById('valor2').value;
eScript.setAttribute('type','text/javascript');
eScript.setAttribute('src','caucula.asp?V1='+v1+'&V2='+v2);
head.appendChild(eScript);
}
</script>
function calcula() {
var head = document.getElementsByTagName('head').item(0);
var eScript = document.createElement('script');
v1 = document.getElementById('valor1').value;
v2 = document.getElementById('valor2').value;
eScript.setAttribute('type','text/javascript');
eScript.setAttribute('src','caucula.asp?V1='+v1+'&V2='+v2);
head.appendChild(eScript);
}
</script>
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
<%
valor1 = cint(request.Querystring('V1'))
valor2 = cint(request.Querystring('V2'))
resultado = valor1 + valor2
response.write "document.getElementById('resultado').innerHTML='"&resultado&"';"
%>
valor1 = cint(request.Querystring('V1'))
valor2 = cint(request.Querystring('V2'))
resultado = valor1 + valor2
response.write "document.getElementById('resultado').innerHTML='"&resultado&"';"
%>
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='"&resultado&"';, 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
6 comentários:
Olá Adriano, estou precisando fazer com que uma tabela construida com php buscando dados de BD seja atualizada sem refresh, e nas pesquisas pelo google cai no seu site, segui seu tuto mas não consegui fazer funcionar em php.
Se puder me dar uma moral, eu agradeceria muito vlw.
Ta ai meu código
calc.html
head
title
Calculadora sem refresh
title
script
function calcula() {
var head = document.getElementsByTagName('head').item(0);
var eScript = document.createElement('script');
v1 = document.getElementById('valor1').value;
v2 = document.getElementById('valor2').value;
eScript.setAttribute('type','text/javascript');
eScript.setAttribute('src','calcula.php?V1='+v1+'&V2='+v2);
head.appendChild(eScript);
}
script
head
body
table width="632" border="1"
tr
td width="338"label
input type="text" name="valor1" id="valor1"
/label
label +
input type="text" name="valor2" id="valor2"/
label
label
input type="submit" name="button" id="button" value="+" onclick="calcula()" />
/label>/td>
td width="278">div id="resultado">/div>/td>
/tr>
/table>
/body>
calcula.php
?PHP
$valor1 = cint($_GET['V1']);
$valor2 = cint($_GET['V2']);
$resultado = $valor1 + $valor2;
echo "script type='text/javascript'> document.getElementById('resultado').innerHTML='"&$resultado&"';/script>";
?
O seu erro Júnior é o seguinte quando vc carrega o PHP ele vem dentro do JavaScript, na verdade o seu navegador não entende o php só interpreta o que vem dentro do ECHO
quando vc da echo vc faz
echo "script type='text/javascript'> document.getElementById('resultado').innerHTML='"&$resultado&"';/script>";
quando não deveria usar a tag Script, pois vc já cria ela dinamicamente na pagina calc.html
faça simplesmente
echo "document.getElementById('resultado').innerHTML='"&$resultado&"';";
se sobrarem dúvidas mande um e-mail
Vc e um anjo..
Me ajudou mto com esta dica simples.
Vlw!
Simplesmente A MELHOR!!!
Parabéns pela dica, me ajudou demais!
Alterei a página para trabalhar com banco de dados (insert e select) na mesma tela sem precisar utilizar o REFRESH. Usei o conceito da sua dica e ela me tirou de um sufoco! =B
Olá Adriano, tudo bem ?
Desculpe voltar a esse assunto mas preciso de uma rotina semelhante à essa sua. Então, copiei fielmente os arquivos para fazer um teste, mas, infelizmente, não funcionou. Não dá erro mas não funciona. Testei com Windows 7, IE 8, Chrome mais recente. Será que vc poderia me dar uma luz quanto a esse problema ?
Desde já, obrigado.
Cândido.
Postar um comentário