Engatinhando com AJAX e PHP. Parte 2

Tags: ,
Postado em AJAX, Desenvolvimento WEB, PHP, Tutoriais, XHTML por Felipe Tonello on the January 20th, 2007


Ajude a Combater o Spam! Clique aqui!

Nesse tutorial vamos fazer nosso primeiro exemplo de AJAX + PHP.
Vamos usar primeiramente o XMLHttp GET Request.

Quem não viu ainda, a parte 1 do tutorial você encontra aqui mesmo.

[update 03/10/07]
Parte 1 do tutorial AJAX + PHP
Parte 3 do tutorial AJAX + PHP
[/update]

Bora lá!!

Criando o Objeto XMLHttp

Vamos mexer um pouco no JavaScript para criar a requisição.

  1. function criaXMLHttp() {
  2.  if (typeof XMLHttpRequest != "undefined")
  3.     return new XMLHttpRequest();
  4.  else if (window.ActiveXObject){
  5.     var versoes = ["MSXML2.XMLHttp.5.0",
  6.     "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0",
  7.     "MSXML2.XMLHttp", "Microsoft.XMLHttp"
  8.     ];
  9.  }
  10.  for (var i = 0; i < versoes.length; i++){
  11.     try{
  12.         return new ActiveXObject(versoes[i]);
  13.     }catch (e) {}
  14.  }
  15.  throw new Error("Seu browser nao suporta AJAX");
  16. }

Primeiro ela testa se o browser suporta o XMLHttpRequest e cria se o suportar.. se não ele cria um array com várias versões do XMLHttp para browsers mais antigos(IE). E fica em um loop até conseguir criar um objeto, se não criar nenhum ele retorna a mensagem de erro.
Resumindo: a função testa as possibilidades do browser de criar o objeto XMLHttp. Se for o IE 6.0 ele cria o MSXML2.XMLHttp.5.0 e assim por diante.

Usando o XMLHttp

O objeto XMLHttp tem um método que a mais imporante, a open(). Ela tem 3 parâmetros que precisamos saber:

  • Tipo da requisição: sintrg que indique o tipo: get ou post
  • URL: string com a url que você quer fazer a requisição
  • Async: boolean que indica se o modo da requisição seja feito assincronamente(não sei escrever essa palavra :( )

O ultimo parâmetro é o mais importante.. ele que vai dizer se a sua requisição é AJAX mesmo ou não. Se ele for true, a requisição é feita em tempo real. Já se você colocar false, a requisição é feita e o resto da página só é loadada quando a requisição retornar algo ou terminar.
Exemplo:

  1. var XMLHttp = criaXMLHttp();
  2. XMLHttp.open("get", "info.txt", true);

Outro evento importante no XMLHttp é o onreadystatechange. O XMLHttp tem uma propriedade chamada readyState que muda conforme a requisição é recebida. Existem 5 estados para o readyState:

  • 0(Não Iniciado): O Objeto foi criado mas o método open() não foi chamado ainda.
  • 1(Carregando): O método open() foi chamado mas a requisição não foi enviada ainda.
  • 2(Carregado): A requisição foi enviada.
  • 3(Incompleto): Uma parte da resposta do servidor foi recebida.
  • 4(Completo): Todos as informações foram recebidas e a conexão foi fechada com sucesso.

Toda vez que a propriedade do readyState for mudada, o evento onreadystatechange é disparado. Por causa das diferentes implementações dos browsers, a propriedade do readyState não funciona corretamente em todos os browsers. O unico modo para cross-browser é usando o valor 0, 1 e 4 para o readyState. Mas na maioria dos casos você usará apenas o estado 4 mesmo.
Depois de tudo isso temos que realmente enviar a requisição com o método send(). Quando utilizamos a requisição por GET nós não precisamos passar nenhum parâmetro no send(). Depois quando vermos com POST aí iremos usar mais profundamente. :)
Exemplo:

  1. var XMLHttp = criaXMLHttp();
  2. XMLHttp.open("get", "info.txt", true);
  3. XMLHttp.onreadystatechange = function () {
  4.  if (XMLHttp.readyState == 4)
  5.     alert("EEE primeiro teste com AJAX!! :)");
  6. };
  7. XMLHttp.send();

Tá bom, mas e agora? Enviei tudo, recebi e pronto. Cadê minha informação?
Ta certo, agora é bem simples, existe uma propriedade no XMLHttp que ele tem o retorno do http request, o responseText(no nosso caso, poderia ser responseXML). Lembram da primeira parte do tutorial? Então, agora vamos usar ela.
Primeiro vamos testar se a informação retornada veio com sucesso (200). Para testarmos o status do retorno existe a propriedade status do XMLHttp. Tudo muito simples não? Então olha o exemplo:

  1. if (XMLHttp.status == 200)
  2.     alert("O retorno foi: " + XMLHttp.responseText);
  3. else
  4.     alert("O retorno foi: " + XMLHttp.statusText);

Beleza. Até aí vimos exemplo bem bobos, apenas para intendermos como funciona as coisas.
Agora sim vamos ver como fica uma aplicação com AJAX e PHP.

Já temos a função que retorna o Objeto XMLHttp, então vamos fazer a partir dela.
Agora vamos para o código HTML.
Criamos duas divs. Uma vai exibir o resultado e outra vai ser o campo onde você coloca o id para fazer a pesquisa.

  1.  
  2. <div id="resultado"></div>
  3.  
  4. <div id="lerid">
  5. Id: <input name="id" id="id" type="text" />
  6. <input value="OKA!!" onclick="lerId()" type="button" />
  7. </div>

Agora, na função lerId() temos que pegar o valor do campo id e enviar ele na requisição usando GET e depois disso, recebemos o valor e exibimos na div resultado.
Fica assim:

  1. function lerId() {
  2.     var id = document.getElementById("id").value;
  3.     var divInfo = document.getElementById("resultado");
  4.     var XMLHttp = criaXMLHttp();
  5.     XMLHttp.open("get", "lerId.php?id=" + id, true);
  6.     XMLHttp.onreadystatechange = function () {
  7.         if (XMLHttp.readyState == 4)
  8.             if (XMLHttp.status == 200){
  9.                 divInfo.innerHTML = XMLHttp.responseText;
  10.             } else {
  11.                 divInfo.innerHTML = "Um erro ocorreu" + XMLHttp.statusText;
  12.             }
  13.     };
  14.     XMLHttp.send(null);
  15. }

Como já vimos como funciona a requisição XMLHttp não vamos ter muita dificuldade de entender essa. A unica diferença com o exemplo é que nós passamos um parâmetro para a página pegaId.php e exibir o resultado no div resultado.

Agora vamos criar a página pegaId.php que irá ler o id enviado pela requisição Http e retornar o status.
lerId.php:

  1. <?php
  2. // mudamos o tipo de arquivo.. ao invez de php irá retornar um texto normal
  3. header("Content-Type: text/plain");
  4. // recebe o id que veio pelo parametro usando o método GET
  5. $id = $_GET["id"];
  6. $resultado = "";
  7. // isso agora é um exemplo, você tem que aplicar a conexão e a consulta sql à sua necessidade
  8. $BDUsuario = "seu usuario ou root";
  9. $BDSenha = "senha do usuario";
  10. $BDServidor = "localhost normalmente ou o servidor de banco de dados";
  11. $BancoDeDados = "nome do seu banco de dados";
  12. mysql_connect($BDServidor, $BDUsuario, $BDSenha);
  13. mysql_select_db($BancoDeDados);
  14. $sql = mysql_query("SELECT * FROM tabela WHERE id = " . $id);
  15. if ($resultado = $mysql_fetch_array($sql))
  16.     $resultado = "ID Encontrado
  17.     \n
  18.     Nome: " . $resultado[‘nome’];
  19. echo $resultado;
  20. ?>

Agora o seu primeiro programa com AJAX está escrito.. bem simples não?
Ele só recebe o id que veio por GET, procura no banco de dados, e exibe o nome da pessoa referente ao id(exemplo apenas)..
A unica coisa que pode ficar meio no ar é a questão do header e do echo no final. O header serve para fazer com que o retorno do arquivo fique em formato texto e não em outro tipo(como html, php). Pois nós usamos o XMLHttp.responseText. Se você colocar alguma tag html, na pagina principal, onde o script é rodado, irá funcionar o html, pois a página é html. Agora se você rodar o lerId.php ele irá exibir como se fosse um texto normal.
O echo serve apenas para exibir o resultado. Todo o resultado que você quer que seja exibido no cliente você tem que exibir em seu script php, pois o XMLHttp.responseText pega justamente o que a página php(server-side) exibe, no caso um texto.

Terminamos por hoje nossa aula de AJAX com PHP parte 2.

Na proxima aula vamos ver como funciona a requisição pelo método POST.

Dúvidas podem comentar.

Abraços

33 Comentários