php e ajax: do request ao framework

PHP e AJAX: do Request ao Framework

Rafael Machado DohmsCoordenação PHPDF

Rafael Dohms [[email protected]]PHP e AJAX: do Request ao Framework # 2

Licença e distribuição

Esta palestra esta disponibilizada sob a licença Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 3.0 Genérica

• Você pode:▪ copiar, distribuir, exibir e executar a obra ▪ criar obras derivadas

• Sob as seguintes condições:▪ Atribuição. Você deve dar crédito ao autor original, da forma

especificada pelo autor ou licenciante. ▪ Uso Não-Comercial. Você não pode utilizar esta obra com

finalidades comerciais. ▪ Compartilhamento pela mesma Licença. Se você alterar,

transformar, ou criar outra obra com base nesta, você somente poderá distribuir a obra resultante sob uma licença idêntica a esta.

http://creativecommons.org/licenses/by-nc-sa/3.0/


Conteúdo

• Pré-Requisitos• O que é AJAX?

▪Como funciona?▪O Objeto XMLHttpRequest

• Onde devo usar?• Quem está usando?• Caminhos para o aprendizado• Prática 1: no braço• Prática 2: XAJAX• Outras soluções e comentários


Pré-Requisitos

• Javascript• DOM (Document Object Model)• Javascript com XML• PHP com XML• MySQL e conexão com Banco de

Dados• Noções de OO


Quem sou?

Rafael Machado Dohms é Engenheiro da

Computação (DF-13735/D) formado pelo Centro Universitário de Brasília, natural de Porto Alegre/RS. Atua na área de desenvolvimento e implementação de projetos de sistemas web-based, e é Analista de Sistemas no Ministério do Meio Ambiente.

• 8 anos de experiência em PHP• Membro da coordenação do PHPDF


Objetivo

Apresentar a técnica de programação conhecida como AJAX, apresentando sua forma de trabalho e demonstrando como aproveitar a biblioteca XAJAX.


AJAX- O que é?

• Não é uma tecnologia nova!▪Nova forma de se utilizar tecnologias já

consolidadas: CSS, DOM, JS e o XMLHttpRequest

• Asyncronous Javascript And XML▪Envio assíncrono de dados▪Grandes por míudos:

▫Enviar e receber dados novos sem recarregar a página (background)


Como funciona AJAX?

ApacheIIS

Lighthttp...

PHPASPJSP

Ruby ...


O XMLHttpRequest

• Histórico▪2000 - Criado pela Microsoft para o

Outlook WebAccess▪2002 – Incorporado no Mozilla▪2006 – Publicado o primeiro Draft na W3C

▫http://www.w3.org/TR/XMLHttpRequest/


XMLHttpRequest

• Propriedades▪ readyState

▫ 0 = uninitialized (não inicializado)▫ 1 = opened (aberto)▫ 2 = headers_received (cabeçalhos recebidos)▫ 3 = loading (carregando)▫ 4 = done (pronto)

▪ responseText ▪ responseXML ▪ Status (200,404,403...)▪ statusText (Not found…)▪ onreadystatechange -- evento


XMLHttpRequest

• Métodos▪open("method","URL",async,"uname","ps

wd") ▫Ex: open(“POST”,”arquivo.php”,true);

▪setRequestHeader("label","value") ▪send(content) ▪getResponseHeader("headername") ▪getAllResponseHeaders() ▪abort()


Onde usar e onde não?

• Use:▪Auto-complete▪Validação complexa de dados▪Criação de subitens de um item maior▪Carregar dados externos de acordo com

parâmetros em tempo real▪Validação/Processamento de dados

confiávies

• Não use:▪Navegação


Quem já usa?

• Google▪GMail▪Google Calendar▪Google Maps

• Sistemas▪De votação▪De Cálculo de Transporte


Caminhos ao Aprendizado

• Sem utilizar bibliotecas/frameworks▪ Vantagens:

▫ Maio domínio da ferramenta▫ Maior controle (como e onde)

▪ Desvantagens▫ Tempo e esforço

• Utilizando bibliotecas/frameworks▪ Vantagens

▫ Produtividade acelerada▫ JavaScript opcional▫ Menos pré-requisitos

▪ Desvantagem▫ Refém da biblioteca▫ Pouco conhecimento do “por trás das cortinas”


Prática 1: no braço

• Objetivo▪Mural de recados

• Funcionalidades▪Adição de mensagens▪Visualização de mensagens

• Material▪PHP▪Base de dados

O browser FireFox possui uma extensão (componente) chamado FireBug que ajuda muito a debugar sites com AJAX, pois mostra todas requisições feitas, o que foi enviado e o que foi recebido


Prática 1


Prática 1

• Funções Javascript▪criaRequest

▫Cria uma instância do objeto XmlHttpRequest

▪enviaDados()▫Reúne os dados▫Usa o Request para enviar os dados por POST▫Define função de retorno

▪recebeDados()▫Verifica estado▫Recebe valores▫Altera DOM


Prática 1

• Funções PHP▪gravaDepoimento

▫Recebe Dados do POST▫Grava no banco

▪montaTemplate▫Monta template▫Monta XML de resposta▫Retorna dados


Prática 1

• Retorno XML

<?xml version="1.0" encoding="iso-8859-1" ?>

<response>

<erro>0/1</erro>

<item id="1">Retorno em HTML ou Texto</item>

</response>


Prática 1


O XAJAX

• O que é?▪Biblioteca em PHP, que implementa as

funções javascript necessárias

• Onde?▪http://www.xajaxproject.org/


Prática 2: XAJAX

• Objetivo▪Mural de recados

• Funcionalidades▪Adição de mensagens▪Visualização de mensagens▪Remoção

• Material▪PHP▪XAJAX▪Base de dados


Prática 2


Prática 2

• Funções XAJAX▪gravaDepoimento

▫Recebe os dados▫Validação dos dados▫Insere no banco▫Gera retorno

▪delDepoimento▫Recebe id do depoimento▫Deleta do banco▫Define ações javascript


Outras estradas e Comentários

• Bibliotecas▪ Javascript

▫ Prototype, DoJo, JQuery

▪ PHP▫ SAJAX (http://www.modernmethod.com/sajax/)▫ PEAR::HTML_AJAX

(http://pear.php.net/package/HTML_AJAX)▫ Xajax (http://www.xajaxproject.org/)

• Soluções▪ Javascript Remote Invocation▪ XML RPC▪ Flash Remoting

• Segurança??


AJAX com JSON

• JSON: Javascript Object Notation▪Ganhou muito espaço recentemente▪Implementado nativamente no PHP 5.2.1

▫json_encode e json_decode

▪Processamento mais ágil{response: {erro: 0, item: { id:1, texto: “Retorno em Texto ou HTML” } }

Leitura: alert(obj.response.erro); //Alerta 0

{response: {erro: 0, itens: [{ id:1, texto: “primeiro” }, { id:2, texto: “segundo” }] }

Leitura: alert(obj.response.itens[1].texto); //Alerta “segundo”


Contato

Obrigado!Aproveitem o evento

• Blog▪ www.rafaeldohms.com.br

• Email▪ [email protected]

• Links▪ FireFox: http://www.getfirefox.com/▪ FireBug: http://www.getfirebug.com/ ▪ Xajax: http://www.xajaxproject.org/

php e ajax: do request ao framework

Technology