Upload
adler-medrado
View
2.448
Download
7
Embed Size (px)
DESCRIPTION
Mini curso de PHP com AJAX no Flisol e Pascoa Solidaria
Citation preview
www.x25.com.br
Brasília, DF25 de Março de 2006Universidade Católica de Brasília
Adler Brediks Medradohttp://adler.neshertech.net
PHP & AJAXPHP & AJAX
www.x25.com.br
ConteúdoConteú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 AJAXApresentando o AJAXAcrô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 AJAXApresentando 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 similaresConceitos similaresJavascript Remote Scripting: Técnica de desenvolvimentopara criação de aplicações web usando uma combinação deXHTML, DOM e Javascript sem a necessidade de utilizar oobjeto XMLHttpRequest XML-RPC: Protocolo para chamada remota de métodoscodifica 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 XMLFlash Remoting: Acesso a dados do servidor web utilizando FLASH
www.x25.com.br
Como funciona o processo Como funciona o processo cliente-servidorcliente-servidor
Cliente(browser) Servidor Web
(Apache, IIS, etc)
Request
Response
PHPDB
www.x25.com.br
O Objeto XMLHttpRequestO Objeto XMLHttpRequest
Nativo do navegador webCompatível com qualquer versão atual dos navegadores webCriado 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 XMLHttpRequestO Objeto XMLHttpRequestNo 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 XMLHttpRequestO Objeto XMLHttpRequestApó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 XMLHttpRequestO Objeto XMLHttpRequest0 - Unintialized. Valor padrão1 – 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 foicompletado.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 podendoser 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 headersHTTP setados em formato de string.
getResponseHeader(header) – Retorna o valor do header enviado por parâmetro na função. O parâmetro deve ser string.
O Objeto XMLHttpRequestO Objeto XMLHttpRequest
www.x25.com.br
O Objeto XMLHttpRequestO Objeto XMLHttpRequestopen(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 esperarpor uma resposta para continuar.
www.x25.com.br
O Objeto XMLHttpRequestO Objeto XMLHttpRequestuser – Especifica um usuáriopassword – 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 PHPInteragindo com o PHP
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.)
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.)
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)<?phpclass 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.)
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.)
www.x25.com.br
manipulamural.php<?phpinclude_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.)
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 FrameworksFrameworks
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 FrameworksFrameworks
Segue abaixo exemplo de uso do xajax:<?phprequire_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
Maiores informaçõesMaiores 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 respostasPerguntas e respostas
www.x25.com.br
FimFim
Obrigado pela oportunidade.Espero que o mini-curso tenha atendido às suas expectativas.