SlideShare uma empresa Scribd logo

Minicurso de PHP Com Ajax

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 de 27
Baixar para ler offline
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
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
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
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
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
      cliente-servidor

        Cliente    Request
                               Servidor Web
       (browser)
                   Response   (Apache, IIS, etc)




             DB                       PHP




www.x25.com.br
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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




www.x25.com.br
Fim



                 Obrigado pela oportunidade.
 Espero que o mini-curso tenha atendido às suas expectativas.




www.x25.com.br

Recomendados

Mais conteúdo relacionado

Mais procurados

REST Web Services com Java
REST Web Services com JavaREST Web Services com Java
REST Web Services com JavaJugVale
 
Mini Curso Zend Framework
Mini Curso Zend FrameworkMini Curso Zend Framework
Mini Curso Zend FrameworkAdler Medrado
 
WebService Restful em Java
WebService Restful em JavaWebService Restful em Java
WebService Restful em Javaalexmacedo
 
PHP RESTful Web Services
PHP RESTful Web ServicesPHP RESTful Web Services
PHP RESTful Web ServicesFelipe Ribeiro
 
Criando e consumindo webservice REST com PHP e JSON
Criando e consumindo webservice REST com PHP e JSONCriando e consumindo webservice REST com PHP e JSON
Criando e consumindo webservice REST com PHP e JSONMarcio Junior Vieira
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasRodrigo Branas
 
Mini Curso Web Services com PHP
Mini Curso Web Services com PHPMini Curso Web Services com PHP
Mini Curso Web Services com PHPelliando dias
 
Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento WebPeslPinguim
 
Webservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHPWebservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHPFlávio Lisboa
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN StackBruno Catão
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasRodrigo Branas
 
PHP RESTful Web Services - PHPConf'09
PHP RESTful Web Services - PHPConf'09PHP RESTful Web Services - PHPConf'09
PHP RESTful Web Services - PHPConf'09Felipe Ribeiro
 

Mais procurados (20)

MongoDB + PHP
MongoDB + PHPMongoDB + PHP
MongoDB + PHP
 
REST Web Services com Java
REST Web Services com JavaREST Web Services com Java
REST Web Services com Java
 
Mini Curso Zend Framework
Mini Curso Zend FrameworkMini Curso Zend Framework
Mini Curso Zend Framework
 
WebService Restful em Java
WebService Restful em JavaWebService Restful em Java
WebService Restful em Java
 
PHP RESTful Web Services
PHP RESTful Web ServicesPHP RESTful Web Services
PHP RESTful Web Services
 
Criando e consumindo webservice REST com PHP e JSON
Criando e consumindo webservice REST com PHP e JSONCriando e consumindo webservice REST com PHP e JSON
Criando e consumindo webservice REST com PHP e JSON
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Doctrine for Dummies
Doctrine for DummiesDoctrine for Dummies
Doctrine for Dummies
 
RESTful com json
RESTful com jsonRESTful com json
RESTful com json
 
PHP e Redis
PHP e RedisPHP e Redis
PHP e Redis
 
Mini Curso Web Services com PHP
Mini Curso Web Services com PHPMini Curso Web Services com PHP
Mini Curso Web Services com PHP
 
Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento Web
 
Webservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHPWebservices e Computação em Nuvem com PHP
Webservices e Computação em Nuvem com PHP
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Palestra
PalestraPalestra
Palestra
 
Node.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo BranasNode.js - #6 - Core Modules - net - Rodrigo Branas
Node.js - #6 - Core Modules - net - Rodrigo Branas
 
Como fazer boas libs
Como fazer boas libs Como fazer boas libs
Como fazer boas libs
 
PHP RESTful Web Services - PHPConf'09
PHP RESTful Web Services - PHPConf'09PHP RESTful Web Services - PHPConf'09
PHP RESTful Web Services - PHPConf'09
 
Mean Stack
Mean StackMean Stack
Mean Stack
 

Destaque

Entendendo Conceitos Caching com PHP
Entendendo Conceitos Caching com PHPEntendendo Conceitos Caching com PHP
Entendendo Conceitos Caching com PHPAdler Medrado
 
Panorama atual do PHP
Panorama atual do PHPPanorama atual do PHP
Panorama atual do PHPAdler Medrado
 
Phpreact flisol-fb-2014
Phpreact flisol-fb-2014Phpreact flisol-fb-2014
Phpreact flisol-fb-2014Adler Medrado
 
Não é Feitiçaria, é Tecnologia
Não é Feitiçaria, é TecnologiaNão é Feitiçaria, é Tecnologia
Não é Feitiçaria, é TecnologiaAdler Medrado
 
Ferramentas Livres Para Desenvolvimento com PHP
Ferramentas Livres Para Desenvolvimento com PHPFerramentas Livres Para Desenvolvimento com PHP
Ferramentas Livres Para Desenvolvimento com PHPAdler Medrado
 

Destaque (9)

Entendendo Conceitos Caching com PHP
Entendendo Conceitos Caching com PHPEntendendo Conceitos Caching com PHP
Entendendo Conceitos Caching com PHP
 
Webservices
WebservicesWebservices
Webservices
 
Panorama atual do PHP
Panorama atual do PHPPanorama atual do PHP
Panorama atual do PHP
 
Phpreact flisol-fb-2014
Phpreact flisol-fb-2014Phpreact flisol-fb-2014
Phpreact flisol-fb-2014
 
Tales of the Crypto
Tales of the CryptoTales of the Crypto
Tales of the Crypto
 
Zend Framework
Zend FrameworkZend Framework
Zend Framework
 
Não é Feitiçaria, é Tecnologia
Não é Feitiçaria, é TecnologiaNão é Feitiçaria, é Tecnologia
Não é Feitiçaria, é Tecnologia
 
Ferramentas Livres Para Desenvolvimento com PHP
Ferramentas Livres Para Desenvolvimento com PHPFerramentas Livres Para Desenvolvimento com PHP
Ferramentas Livres Para Desenvolvimento com PHP
 
Mercado de Trabalho
Mercado de TrabalhoMercado de Trabalho
Mercado de Trabalho
 

Semelhante a Minicurso de PHP Com Ajax

PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3David Ruiz
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAXRafael Dohms
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1infinitopublicidade
 
Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottTchelinux
 
Integração do Flex com PHP através do AMFPHP
Integração do Flex com PHP através do AMFPHPIntegração do Flex com PHP através do AMFPHP
Integração do Flex com PHP através do AMFPHPelliando dias
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsSuissa
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 

Semelhante a Minicurso de PHP Com Ajax (20)

PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAX
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
 
Ajax
AjaxAjax
Ajax
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1
 
ASP.NET AJAX
ASP.NET AJAXASP.NET AJAX
ASP.NET AJAX
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão Abbott
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
 
Python 08
Python 08Python 08
Python 08
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
 
Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
 
Integração do Flex com PHP através do AMFPHP
Integração do Flex com PHP através do AMFPHPIntegração do Flex com PHP através do AMFPHP
Integração do Flex com PHP através do AMFPHP
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webapps
 
Conciex 2012
Conciex 2012Conciex 2012
Conciex 2012
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 

Último

ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docxATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docxjosecarlos413721
 
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docxATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docxjosecarlos413721
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
ATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docx
ATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docxATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docx
ATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docx2m Assessoria
 
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxjosecarlos413721
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx2m Assessoria
 
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docxATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx2m Assessoria
 
ATIVIDADE 1 - DESENHO TÉCNICO - 512024.docx
ATIVIDADE 1 - DESENHO TÉCNICO - 512024.docxATIVIDADE 1 - DESENHO TÉCNICO - 512024.docx
ATIVIDADE 1 - DESENHO TÉCNICO - 512024.docx2m Assessoria
 
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docxATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docxjosecarlos413721
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx2m Assessoria
 
ATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docx
ATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docxATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docx
ATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxjosecarlos413721
 
Power BI: A ferramenta da Microsoft que vem ganhando o mercado.
Power BI: A ferramenta da Microsoft que vem ganhando o mercado.Power BI: A ferramenta da Microsoft que vem ganhando o mercado.
Power BI: A ferramenta da Microsoft que vem ganhando o mercado.Daniel Mendes
 
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docxATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docxATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docxATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx2m Assessoria
 
Curso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como Código
Curso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como CódigoCurso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como Código
Curso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como CódigoGuilhermeJorgeAragod
 
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docxATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx2m Assessoria
 

Último (20)

ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docxATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
ATIVIDADE 1 - MODELAGEM DE SOFTWARE – 512024.docx
 
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docxATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
ATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docx
ATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docxATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docx
ATIVIDADE 1 - CONTABILIDADE EMPRESARIAL - 512024.docx
 
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
 
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docxATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
 
ATIVIDADE 1 - DESENHO TÉCNICO - 512024.docx
ATIVIDADE 1 - DESENHO TÉCNICO - 512024.docxATIVIDADE 1 - DESENHO TÉCNICO - 512024.docx
ATIVIDADE 1 - DESENHO TÉCNICO - 512024.docx
 
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docxATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
ATIVIDADE 1 - TI - BOAS PRÁTICAS DE GOVERNANÇA EM TI - 512024.docx
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
ATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docx
ATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docxATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docx
ATIVIDADE 1- MICROPROCESSADORES E MICROCONTROLADORES - 512024.docx
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
Power BI: A ferramenta da Microsoft que vem ganhando o mercado.
Power BI: A ferramenta da Microsoft que vem ganhando o mercado.Power BI: A ferramenta da Microsoft que vem ganhando o mercado.
Power BI: A ferramenta da Microsoft que vem ganhando o mercado.
 
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docxATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
ATIVIDADE 1 - TEORIA DAS ESTRUTURAS I - 512024.docx
 
ATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docxATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1 - ADSIS - MATEMÁTICA PARA COMPUTAÇÃO - 512024.docx
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docxATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
ATIVIDADE 1 - PESQUISA OPERACIONAL - 512024.docx
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
Curso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como Código
Curso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como CódigoCurso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como Código
Curso de Verão - Aula 03 - Introdução ao CI-CD e Infraestrutura como Código
 
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docxATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
 

Minicurso de PHP Com Ajax

  • 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
  • 27. Fim Obrigado pela oportunidade. Espero que o mini-curso tenha atendido às suas expectativas. www.x25.com.br