Javascript: Fazendo Javavascript executar um código PHP com XMLHttpRequest

Algo bem útil, uma vez que o Javascript não pode fazer coisas, como conectar ao um banco de dados. Usando o PHP como um intermediário, você pode fazer com que o Javascript consulte um banco de dados sem precisar recarregar a página.

O que precisamos fazer é usar o objeto XMLHttpRequest. Nós já falamos dele uma vez no artigo sobre carregar um arquivo XML, portanto, não vou me prender nos detalhes já ditos:



var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","meuarquivophp.php?n="+nome+"&e="+endereco,true);
xmlhttp.send();

Aqui está o primeiro pulo do gato, logo na segunda linha temos o comando open, com seus três atributos. Entretanto, no atributo em que nós referenciamos a url do arquivo, nós montamos uma estrutura GET e passamos as variáveis que queremos enviar para o script PHP. A regra, para quem não sabe, é simples: depois do nome do arquivo, adicionamos um "?" indicando que vamos passar variáveis pelo método GET. Então, basta colocar o nome da variável, seguido de um "=" e o valor dessa variável. Se precisar passar mais um valor, então adicionamos um "&" e criamos mais uma variável e assim por diante.

Entretanto, esse método aqui é assíncrona, ou seja, o usuário pode continuar interagindo com o ambiente enquanto envia e não tem resposta. E mesmo que fosse síncrona, queremos saber qual é a resposta, ou os dados que o script PHP enviou, então, antes de executar o send, vamos configurar o evento onload do arquivo.

xmlhttp.onload = function(){
   alert(this.responseText);
}

No artigo do que falei como carregar um arquivo XML, eu mostrei que o atributo responseXML serve para pegar o conteúdo do arquivo XML. Entretanto, não vamos estar mexendo com XML, mas sim com texto simples. Portanto, usamos o atributo responseText para pegar os dados que recebemos do PHP, e a partir de então, processamos essa resposta.

Então pessoal, esse foi o tutorial de hoje. Até a próxima.