O documento apresenta conceitos sobre PHP e AJAX. Resume os principais pontos sobre: 1) como o AJAX permite enviar e receber dados de um servidor sem recarregar a página usando tecnologias como Javascript, XML e HTTP; 2) o objeto XMLHttpRequest que permite fazer requisições assíncronas; 3) um exemplo prático de um mural de recados interativo usando PHP no servidor e AJAX no cliente.

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