PHP & Ajax

Palestra proferida em Março de 2006 na Universidade Católica de Brasília, no evento FLISOL.

Transcript

1. www.x25.com.br Brasília, DF 25 de Março de 2006 Universidade Católica de Brasília Adler Brediks Medrado http://adler.neshertech.net adler.medrado@x25.com.br PHP & AJAX PHP & AJAX
2. www.x25.com.br Conteúdo Conteúdo • Apresentando o AJAX • Conceitos similares • Como funciona o processo cliente-servidor • O Objeto XMLHttpRequest • Interagindo com o PHP • PHP AJAX Toolkits / Frameworks • Perguntas e respostas
3. www.x25.com.br Apresentando o AJAX Apresentando o AJAX Acrônimo para Asyncronous Javascript And XML. AJAX não é uma tecnologia e sim o uso em conjunto de diversas tecnologias como CSS, XHTML, DOM, Javascript e XMLHttpRequest. Permite enviar e receber dados de/para um servidor web como APACHE, IIS, etc, sem a necessidade de reload da página.
4. www.x25.com.br Apresentando o AJAX Apresentando o AJAX Pode ser utilizado em conjunto com diversas linguagens para desenvolvimento WEB, pois ele é executado do lado client. Não é tão complicado como parece (ou como algumas pessoas fazem parecer). O AJAX permite o desenvolvimento de aplicativos web interativos, por exemplo: Google Maps, Google Mail (GMAIL), Flickr e Google Suggest
5. www.x25.com.br Conceitos similares Conceitos similares Javascript Remote Scripting: Técnica de desenvolvimento para criação de aplicações web usando uma combinação de XHTML, DOM e Javascript sem a necessidade de utilizar o objeto XMLHttpRequest XML-RPC: Protocolo para chamada remota de métodos codifica os dados em XML e utiliza o protocolo HTTP como mecanismo de transporte dos dados. Webservices – SOAP: Protocolo para intercâmbio de dados entre softwares. Os dados também são codificados em em formato XML Flash Remoting: Acesso a dados do servidor web utilizando FLASH
6. www.x25.com.br Como funciona o processo Como funciona o processo cliente-servidor cliente-servidor Cliente (browser) Servidor Web (Apache, IIS, etc) Request Response PHP DB
7. www.x25.com.br O Objeto XMLHttpRequest O Objeto XMLHttpRequest Nativo do navegador web Compatível com qualquer versão atual dos navegadores web Criado originalmente pela Microsoft, disponível desde a versão 5.0 do navegador Internet Explorer, acessado via Jscript, VBScript e Javascript ( linguagens suportadas pelo browser). É um objeto ActiveX. Sendo posteriormente implementado de forma nativa para os navegadores Mozilla, Safari e Opera.
8. www.x25.com.br O Objeto XMLHttpRequest O Objeto XMLHttpRequest No Mozilla e Safari é instanciado da seguinte forma: var objAjax = new XMLHttpRequest(); Internet Explorer e Opera: objAjax = new ActiveXObject("Msxml2.XMLHTTP"); ou objAjax = new ActiveXObject("Microsoft.XMLHTTP"); Dependendo da versão do browser.
9. www.x25.com.br O Objeto XMLHttpRequest O Objeto XMLHttpRequest Após instanciado, pode-se utilizar as seguintes propriedades do objeto: onreadystatechange – manipulador dos eventos que monitora todas as mudanças de estado. O Valor atribuído a esta propriedade é sempre uma função. Dependendo da versão do DOM suportada pelo navegador, pode-se passar argumentos. ReadyState – Esta propriedade retorna o status do objeto. A propriedade é do tipo Number e os valores retornados são:
10. www.x25.com.br O Objeto XMLHttpRequest O Objeto XMLHttpRequest 0 - Unintialized. Valor padrão 1 – Open. O Método open() foi chamado com sucesso. 2 – Sent – O método send() foi chamado com sucesso mas ainda não foi retornado nenhum dado. 3 – Receiving – Dados foram recebidos mas ainda não foi completado. 4 – Loaded - A transferência de dados foi completada. responseText – propriedade do tipo string, que retorna os resultado como texto. resposeXML – retorna os dados em formato XML podendo ser manipulado usando DOM. Tipo de dados 'document'
11. www.x25.com.br status – esta propriedade retorna o código de status do servidor, ex: 404 para página não encontrada e 200 para OK. Tipo de dados Number statusText – Retorna o status em formato string O Objeto XMLHTTPRequest possui os seguintes métodos: abort() - Aborta a requisição atual. O método é void (sem retorno) getAllResponseHeaders() - Retorna a lista completa dos headers HTTP setados em formato de string. O Objeto XMLHttpRequest O Objeto XMLHttpRequest
12. www.x25.com.br O Objeto XMLHttpRequest O Objeto XMLHttpRequest open(method, uri, async, user, password) – Especifica o méto- do, URL e outros parâmetros opcionais de uma requisição. method – Forma de submissão dos dados ( GET ou POST ) uri – Este parâmetro pode ser uma URL absoluta ou relativa. O alvo deve residir no mesmo servidor web da página que o requisita. async – Especifica se a requisição deve ser assíncrona ou não. Tipo booleano. True ( opção padrão ) indica que o script deve continuar processando após o método send ser chamado sem esperar por uma resposta. False, indica que o script deve esperar por uma resposta para continuar.
13. www.x25.com.br O Objeto XMLHttpRequest O Objeto XMLHttpRequest user – Especifica um usuário password – Especifica uma senha. send(data) – Envia a requisição. O parâmetro data são os parâmetros passados para o script que fará o processamento. Obrigatório quando o method for POST. Quando for GET, deve- se passar null como parâmetro. setRequestHeader(header, value) – Informa valor a algum header http.
14. www.x25.com.br Mãos à obra!! Iremos implementar um pequeno exemplo de mural de recados bastante simples, mas que demostra com bastante clareza o funcionamento do AJAX. Utilizaremos um arquivo HTML chamado index.html, um arquivo PHP chamado manipulamural.php e uma classe PHP chamada Mural. Por questão de praticidade, iremos gravar algumas informações em um arquivo texto. O procedimento para gravação em um banco de dados é praticamente o mesmo. Interagindo com o PHP Interagindo com o PHP
15. www.x25.com.br index.htm <html> <head><title>Mural de recados</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99"> <form name="formulario" method="POST"> Autor: <input type="text" name="autor" id="autor"><br><br> Conteúdo: <textarea name="recado" id="recado" cols='40' rows='5'> </textarea><br /> <input type="button" name="submete" id="submete" value="gravar no mural" onClick="javascript:submeteMural();"><br> </form> <br> Mural: <div id="mural"> </div> </body> </html> Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
16. www.x25.com.br Entre as tags <head> <script language=”javascript”></script></head> no arquivo index.htm, vamos incluir o seguinte código Javascript: var objAjax = null; function criaObjetoAjax() { if(window.XMLHttpRequest) { try { objeto = new XMLHttpRequest(); } catch(e) { objeto = false; } } else if(window.ActiveXObject) { try { objeto = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { objeto = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { objeto = false; } } } return objeto; } Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
17. www.x25.com.br function verificaStatusMuralLeitura() { if (objAjax.readyState == 4) { if(objAjax.status == 200) { document.getElementById('mural').innerHTML = objAjax.responseText; } else { document.getElementById('mural').innerHTML = "Houve um erro ao recuperar os dados remotos: "+objAjax.statusText; } } } function verificaStatusMuralEscrita() { if (objAjax.readyState == 4) { if(objAjax.status == 200) { document.getElementById('mural').innerHTML = objAjax.responseText; } else { window.alert("Houve um erro ao recuperar os dados remotos: "+objAjax.statusText); } } } Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
18. www.x25.com.br function lerMural() { objAjax = criaObjetoAjax(); url = "http://localhost/phpajax/manipulamural.php?op=ler"; objAjax.open("GET",url,true); objAjax.onreadystatechange=verificaStatusMuralLeitura; objAjax.send(null); } function submeteMural() { objAjax = criaObjetoAjax(); url = "http://localhost/phpajax/manipulamural.php"; autor = document.getElementById("autor").value; recado = document.getElementById("recado").value; objAjax.open("POST",url,true); objAjax.setRequestHeader('Content-Type','application/x-www-form- urlencoded'); objAjax.send('autor='+autor+"&recado="+recado+"&op=escrever"); objAjax.onreadystatechange=verificaStatusMuralEscrita; } lerMural(); // Recarrega a cada 10000 milissegundo (10 segundos) setInterval("lerMural()", 10000); Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
19. www.x25.com.br mural.php (Classe Mural) <?php class Mural { private $arquivo; public function __construct() { $this->arquivo = "/opt/lampp/htdocs/phpajax/txt/mural.txt"; } public function lerMural() { $txt = ""; if ($conteudo = file($this->arquivo)) { foreach ($conteudo as $valor) { $dadosMural = explode("<sep>", $valor); $txt .= "<strong>Nome: </strong> {$dadosMural[0]}<br />"; $txt .= "<strong>Data: </strong> {$dadosMural[1]}<br />"; $txt .= "<strong>Recado: </strong> {$dadosMural[2]}<br />"; $txt .= "<p>"; } } else { $txt = "Erro ao abrir arquivo de dados"; } return $txt; } (Continua...) Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
20. www.x25.com.br public function escreveMural($info) { $autor = $info["autor"]; $recado = $info["recado"]; $data = date("d/m/Y h:i:s"); $fh = fopen($this->arquivo, "a"); if ($fh) { $conteudo = "$autor<sep>"; $conteudo .= "$data<sep>"; $conteudo .= "$recado\n"; if (fwrite($fh, $conteudo)) { print "Gravado com sucesso"; } else { print "Erro ao gravar os dados."; exit; } fclose($fh); } else { print 'Erro ao abrir arquivo. '; exit; } } } ?> Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
21. www.x25.com.br manipulamural.php <?php include_once("/opt/lampp/htdocs/phpajax/classes/Mural.php"); /* * Instanciando classe */ $mural = new Mural(); /* * Verificando se a operação será realizada por GET ou POST */ $operacao = NULL; $operacao = $_POST['op'] ? $_POST['op'] : $_GET['op']; /* * Verifica qual operação será executada. leitura ou escrita */ if ($operacao == "ler") { $textoMural = $mural->lerMural(); print $textoMural." - ".date("d/m/Y h:i:s"); } else { $mural->escreveMural($_POST); } ?> Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
22. www.x25.com.br Após todos estes arquivos serem criados, execute no seu servidor web o arquivo index.htm, da seguinte forma: (de acordo com a sua estrutura de diretórios no servidor web). http://localhost/phpajax/index.htm Ele deve trazer uma tela com um formulário, que é atualizada a cada dez segundos, trazendo os dados gravados no arquivo. Caso seja gravado algo através dos formulários, os dados são submetidos sem que a página index.htm dê um reload. Ou seja: Com AJAX, arquivos server-side devem gerar conteúdo e arquivos HTML mostram o conteúdo. (mas isso não é regra). Interagindo com o PHP (cont.) Interagindo com o PHP (cont.)
23. www.x25.com.br PHP AJAX Toolkits PHP AJAX Toolkits Frameworks Frameworks Alguns toolkits PHP que implementam o AJAX: • Sajax - http://modernmethod.com/sajax •Xajax - http://www.xajaxproject.com •Prototype - http://prototype.conio.net/ •AjaxAgent - http://ajaxagent.org/ •BackBase - http://www.backbase.com
24. www.x25.com.br PHP AJAX Toolkits PHP AJAX Toolkits Frameworks Frameworks Segue abaixo exemplo de uso do xajax: <?php require_once("xajax.inc.php"); $xajax = new xajax(); $xajax->registerFunction("minhaFuncao"); function minhaFuncao($arg) { $objResponse = new xajaxResponse(); $objResponse->addAssign("AlgumElementId","innerHTML", $novoConteudo); return $objResponse->getXML(); } $xajax->processRequests(); ?> <html> <head><?php $xajax->printJavascript();?></head> <div id="AlgumElementoId"></div> <button onclick="xajax_minhaFuncao(argumento);"> </html>
25. www.x25.com.br Maiores informações Maiores informações •X25 – Treinamentos – PHP com AJAX e Webservices (http://www.x25.com.br) •Nesher Technologies – Consultoria (http://www.neshertech.net) •Meu site pessoal (http://adler.neshertech.net)
26. www.x25.com.br Perguntas e respostas Perguntas e respostas
27. www.x25.com.br Fim Fim Obrigado pela oportunidade. Espero que o mini-curso tenha atendido às suas expectativas.