Diversas vezes respondi dúvidas sobre como integrar essas duas linguagens nos fóruns da rede e é um tema que me interessa bastante, pois hoje gosto mesmo é de programar em JS, mas não dá prá fugir de certas funcionalidades no servidor, como consultar bancos de dados, gravar e ler arquivos, etc.
Antes de tudo, lembro que já escrevi um post sobre como mesclar PHP com HTML que você deveria ler antes de começar.
A primeira coisa é lembrar que estamos falando de níveis diferentes. O PHP é interpretado no servidor e o JS no navegador. Ou seja, quando o javascript for executado, o PHP já terá cumprido o seu papel. Veja isso:
<script type=’text/javascript’>
function gethost() {
return "http://<?=getenv(’HTTP_HOST’)?>/";
}
</script>
…ao pedir o fonte, verá isso (supondo que estamos em www.sample.com):
<script type=’text/javascript’>
function gethost() {
return "http://www.sample.com/";
}
</script>
E é assim que o navegador vai fazer - quando o JS for interpretado, o PHP já não existirá no documento, restando apenas o resultado do seu processamento.
Com o PHP podemos modificar o texto do documento antes que ele seja enviado ao browser. Já o código Javascript só passa a existir funcionalmente depois que o browser interpretar o documento enviado.
Imprimindo Javascript com PHP
Essa é a forma mais usada e acabamos de ver um exemplo dela no código mostrado acima. Basta escrever o código JS com as funções de impressão do PHP. Mas existe um formato que tem se popularizado bastante ultimamente e que facilita enormemente esse trabalho, o JSON (JavaScript Object Notation), com várias bibliotecas prontas para baixar. Aqui tem um script meu (muito simples, mas bem funcional) para traduzir PHP <-> JSON.
Resumidamente, o JSON é o seguinte…
// criação de arrays e objetos, assim:
var arr = new Array();
// é exatamente o mesmo que
var arr = [];
// e que
var obj = new Object();
// é exatamente o mesmo que
var obj = {};
// ou
var arr1 = new Array("a", 123);
// é exatamente o mesmo que
var arr1 = ["a", 123];
// e que
var obj = new Object();
obj.prop1 = "a";
obj.prop2 = 123;
// é exatamente o mesmo que
var obj = {"prop1": "a", "prop2": 123};
Entendido isso, digamos que o JSON é simplesmente escrever arrays e objetos Javascript na sintaxe reduzida, mas trabalhar com essa construção na forma de string. Isso é utilizado para transporte de dados, num formato leve e muito prático - principalmente para a finalidade que daremos a ele nesse caso.
$arr = array("a", 123);
$arr2 = array("prop1" => "a", "prop2" => 123);
// $arr traduzida para o JSON seria uma string assim
"[’a',123]"
// $arr2 traduzida para o JSON seria uma string assim
"{’prop1′: ‘a’, ‘prop2′: 123}"
Vamos então abstrair (…) uma função tojson(), que representará a passagem de uma variável pela library escolhida, ok?
$userinfo = array(’name’ => ‘fulano’,
‘email’ => ‘user@server’);
$uinfjson = tojson($userinfo); // traduzida para JSON
?>
…
<script type="text/javascript">
var userinfo = <?=$uinfjson?>;
</script>
O resultado do exemplo acima, como será lido pelo browser:
var userinfo = {’name’:'fulano’,'email’:'user@server’};
</script>
Avariável userinfo é agora um object JS contendo os valores enviados pelo PHP. Como o formato JSON é baseado no (idêntico ao) formato da sintaxe reduzida do Javascript, não há nada mais a fazer, basta imprimir como veio - isso será um javascript válido.
Pontos de interseção entre PHP e JS
Apesar da diferença de níveis de execução, como já foi dito, há dois pontos que estão acessíveis tanto para o PHP quanto para o Javascript e que podem muito bem ser usados como forma de comunicação entre os dois.
O primeiro de que falarei é a QUERY STRING na URL do documento em questão. Para o PHP ela está disponível através da superglobal $_GET (ou $_REQUEST ou $HTTP_GET_VARS) e para o Javascript na URL, que pode ser conseguida em location.href. A diferença é que para o PHP as variáveis já vem tratadas, mas o Javascript só tem acesso à query string bruta, mas há meios de contornar isso. Veja aqui um post em que mostro como pegar essas variáveis com Javascript.
Isso significa que, se não carregarmos outra página, as variáveis GET que estiverem disponíveis no PHP também estarão para o Javascript depois de carregada a página no browser. Mas também poderíamos fazer algo assim:
header(’Location: arq_do_js.html?algo=’.$tosend);
exit;
A variável algo com o valor retornado pela função PHP peguealgoimportante() poderá ser lida pelo Javascript na página arq_do_js.html.
O segundo ponto são os COOKIES. São os mesmos para o PHP e o JS. O PHP oferece funções nativas para manipular cookies mas, prá variar, o JS não. Veja aqui algumas funções para manipular cookies em Javascript.
Podemos setar cookies com o PHP (setcookie() e setrawcookie()) e resgatá-los no navegador com o JS. Ou setar com Javascript e chamar um PHP, que poderá ler os cookies e trabalhar com eles, através da superglobal $_COOKIE (ou $_REQUEST).
Uma outra maneira…
O tipo de saída padrão do PHP é "text/html", mas podemos imprimir outros tipos de conteúdos, bastando setar o Content-type, com a função header. Isso significa que podemos gerar um conteúdo Javascript a partir de um arquivo PHP. É inusitado e extremamente útil.
<html>
…
<script type="text/javascript" src="js.php"></script>
…
</html>
<?php
header(’Content-type: text/javascript’);
$info = peguealgoimportante();
print "alert(’$info’);";
?>
Maneiro isso, não? mas não para por aí… olha o que podemos fazer:
<html>
…
<script type="text/javascript" src="js.php?num=12"></script>
…
</html>
<?php
header(’Content-type: text/javascript’);
$info = $_GET[’num’];
print "alert(’$info’);";
?>
ou assim… acho que fica mais fácil. Intercalar o JS com as TAGs PHP ao invés de usar funções de impressão é uma boa estratégia, pois evita a confusão que é imprimir aspas dentro de aspas. Outra é que podemos mudar a extensão do arquivo para .JS temporariamente e editar o JS com a sintaxe realçada no DW, por exemplo.
header(’Content-type: text/javascript’);
$info = $_GET[’num’];
?>
alert(’<?=$info?>’);
Isso funciona! podemos passar parâmetros por GET na URL do script PHP e como estamos usando o content-type = text/javascript, o browser não terá problemas em interpretar a resposta como JS.
Mas e para fazer isso sem recarregar a página?
Também é possível, mas só com ajax. Não é complicado, mas você deveria estudar um pouco sobre ajax antes de tentar esse método…
Essa aqui é a função mais simples possível para usar ajax:
var req = document.all ? new ActiveXObject("Microsoft.XMLHTTP ") : new XMLHttpRequest();
req.open(’GET’, url, false); req.send(null);
// espera enquanto a requisição é processada…
// confissão: esta linha é uma idéia que não foi
// testada… mas deve funcionar…
while(req.readyState < 4) void(0);
return req.status == 200 ? req.responseText : false;
}
usaríamos então dessa forma:
<input type=button value=clique onclick="
var val = this.form.tex.value;
var resp = readFile(’meuphp.php?value=’+val);
alert(resp);" />
…
O que fosse impresso por meuphp.php seria recebido como texto na variável resp, no javascript.
Devem haver outras técnicas que desconheço… se você conhece, comente.
Abraço a todos, Cau Guanabara
Mapa do site
Ótimo texto cau.
Como frequentador de fóruns você sabe a enorme dificuldade de quem ainda não entende muito tem pra entender isto aí hehe.
Recomendarei este texto sempre que eu identificar alguém que ainda não se ambientou sobre a diferença server e client-side.
Por Micox em 2007-04-14 01:11:40, sábado
Valeu Mico, sua opinião é importante.
Grande abraço.
Por Cau Guanabara em 2007-04-14 01:11:40, sábado
Cara você me salvou, era isso mesmo que procuro há dias, uma maneira de ligar as duas linguagens sem nenhum conflito, obrigado pelo texto, abraços
Por Lucas Almeida em 2007-04-14 01:11:40, sábado
Desculpe, o comentário que coloquei em outro post na verdade era para ser nesse:
Nossa Cau, este post não pode ter aparecido em uma melhor hora, estava tentando conseguir o efeito que o Wordpress faz usando uma framework como o scriptaculous para, por exemplo, atualizar tabelas e mostrar na tela sem ser recarregado utilizando ajax, mas nunca imaginei em usar o header como javascript. Agora vou tentar fazer e sei uma saída graças a este artigo. Colocarei no meu blog (http://blog.alexandremagno.net) e farei os agradecimentos a você… Adorei as várias soluções, sendo que não consegui pensar em ao menos uma. Um abraço…
Por Alexandre Magno em 2007-04-14 01:11:40, sábado
Bem, não sei se você está entendendo mas logo vai saber. Você ganhou um fã, realmente vi pela sua trajetória e sua carreira que você tem a voz da experiência…
Por Alexandre Magno em 2007-04-14 01:11:40, sábado
Valeu Alexandre!
fico muito feliz com isso. Esse tipo de reconhecimento vale mais que dinheiro.
Abraço, Cau
Por Cau Guanabara em 2007-04-14 01:11:40, sábado
alert(’’);
//
Por eu em 2007-04-14 01:11:40, sábado