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 [email protected] PHP & AJAX PHP & AJAX 

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 

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. 

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 

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 

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 

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. 

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. 

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: 

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' 

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 

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. 

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. 

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 

www.x25.com.br index.htm Mural de recados Autor:

Conteúdo:


Mural: Interagindo com o PHP (cont.) Interagindo com o PHP (cont.) 

www.x25.com.br Entre as tags 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.) 

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.) 

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.) 

www.x25.com.br mural.php (Classe Mural) arquivo = "/opt/lampp/htdocs/phpajax/txt/mural.txt"; } public function lerMural() { $txt = ""; if ($conteudo = file($this->arquivo)) { foreach ($conteudo as $valor) { $dadosMural = explode("", $valor); $txt .= "Nome: {$dadosMural[0]}
"; $txt .= "Data: {$dadosMural[1]}
"; $txt .= "Recado: {$dadosMural[2]}
"; $txt .= "

"; } } else { $txt = "Erro ao abrir arquivo de dados"; } return $txt; } (Continua...) Interagindo com o PHP (cont.) Interagindo com o PHP (cont.) 

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"; $conteudo .= "$data"; $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.) 

www.x25.com.br manipulamural.php lerMural(); print $textoMural." - ".date("d/m/Y h:i:s"); } else { $mural->escreveMural($_POST); } ?> Interagindo com o PHP (cont.) Interagindo com o PHP (cont.) 

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.) 

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 

www.x25.com.br PHP AJAX Toolkits PHP AJAX Toolkits Frameworks Frameworks Segue abaixo exemplo de uso do xajax: registerFunction("minhaFuncao"); function minhaFuncao($arg) { $objResponse = new xajaxResponse(); $objResponse->addAssign("AlgumElementId","innerHTML", $novoConteudo); return $objResponse->getXML(); } $xajax->processRequests(); ?> printJavascript();?> 

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) 

www.x25.com.br Perguntas e respostas Perguntas e respostas 

www.x25.com.br Fim Fim Obrigado pela oportunidade. Espero que o mini-curso tenha atendido às suas expectativas.