minicurso de php com ajax

www.x25.com.br

Brasília, DF25 de Março de 2006Universidade Católica de Brasília

Adler Brediks Medradohttp://adler.neshertech.net

[email protected]

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;}


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); }

}}


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


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


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;

}}

}?>


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

}?>


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


http://localhost/phpajax/index.htm

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

http://www.xajaxproject.com/

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.

minicurso de php com ajax

Technology