• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,229
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
57
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. PHP & AJAX 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 www.x25.com.br
  • 2. 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 www.x25.com.br
  • 3. 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. www.x25.com.br
  • 4. 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 www.x25.com.br
  • 5. 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 www.x25.com.br
  • 6. Como funciona o processo cliente-servidor Cliente Request Servidor Web (browser) Response (Apache, IIS, etc) DB PHP www.x25.com.br
  • 7. 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. www.x25.com.br
  • 8. 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. www.x25.com.br
  • 9. 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: www.x25.com.br
  • 10. 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' www.x25.com.br
  • 11. O Objeto XMLHttpRequest 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. www.x25.com.br
  • 12. 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 www.x25.com.br por uma resposta para continuar.
  • 13. 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. www.x25.com.br
  • 14. Interagindo com o PHP 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. www.x25.com.br
  • 15. Interagindo com o PHP (cont.) 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> www.x25.com.br
  • 16. Interagindo com o PHP (cont.) 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; } www.x25.com.br
  • 17. Interagindo com o PHP (cont.) 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); } } } www.x25.com.br
  • 18. Interagindo com o PHP (cont.) 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); www.x25.com.br
  • 19. Interagindo com o PHP (cont.) 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...) www.x25.com.br
  • 20. Interagindo com o PHP (cont.) 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 .= "$recadon"; 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; } } } ?> www.x25.com.br
  • 21. Interagindo com o PHP (cont.) 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); } ?> www.x25.com.br
  • 22. Interagindo com o PHP (cont.) 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). www.x25.com.br
  • 23. PHP AJAX Toolkits 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 www.x25.com.br
  • 24. PHP AJAX Toolkits 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> www.x25.com.br
  • 25. 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) www.x25.com.br
  • 26. Perguntas e respostas www.x25.com.br
  • 27. Fim Obrigado pela oportunidade. Espero que o mini-curso tenha atendido às suas expectativas. www.x25.com.br