Márcio Koch 1
Currículo Formado na FURB em Ciência da Computação Pós graduado em Tecnologias para o desenvolvimento de aplicações web Mestrando em Computação Gráfica na UDESC Arquiteto de software na Senior Sistemas Desenvolvedor web a mais de 12 anos E-mail: lobokoch@gmail.com 2
Agenda Sábado 13/06 Conceitos de Ajax Exemplos de uso do Ajax no braço, muitos exemplos, muito código (HTML, CSS, JavaScript, PHP, XML, JSON) Sábado 20/06 Exemplos de Ajax com jquery, puts porque não mostrou logo Exercícios Explicação/início do trabalho final 3
Ambiente Eclipse for PHP, mas também pode ser o notepad++ ou bloco de notas https://www.eclipse.org/downloads/download.php? file=/technology/epp/downloads/release/luna/sr2/ eclipse-php-luna-sr2-win32-x86_64.zip&mirror_id=575 4
Bibliografia Silva, Maurício S. Ajax com jquery: Requisições AJAX com a simplicidade da jquery. São Paulo: Notatec, 2009. Silva, Maurício S. CSS3: Desenvolva aplicações web profissionais com o uso dos poderosos recursos de estilização das CSS3. São Paulo: Notatec, 2011. Silva, Maurício S. Web Design Responsivo: Aprenda a criar sites que se adaptam automaticamente a qualquer dispositivo, desde desktops até telefones celulares. São Paulo: Notatec, 2014. 5
Conceitos Ajax Asynchronous JavaScript And XML Interação assíncrona entre browser e servidor web Permite a troca de dados com um servidor sem a necessidade de recarregar a página inteira, ou seja, recarregamos apenas a parte da página que nos interessa. 6
O que é Ajax Não é uma nova linguagem de programação Utiliza tecnologias existentes para melhorar a experiência do usuário Cliente: JavaScript Asynchronous HTTP request XML Servidor (qualquer plataforma) PHP, ASP, Servlet... 7
Como funciona? 8
Aplicação Web Clássica (síncrona) 9
Aplicação Web Ajax (assíncrona) 10
Modelo Clássico x AJAX 11
Fluxo 12
Benefícios Experiência do usuário é aprimorada (sem reload ) Diminui o trafego das informações Aplicações mais próximas de um ambiente desktop Menor tempo de carregamento das páginas 13
Exemplos Instanciando um objeto Ajax 14
Exemplos Executando uma requisição Ajax 15
Exemplos Parâmetros da requisição Ajax: requisicaoajax.open(método, URL, [assinc], [usuário], [senha]); Principais métodos: GET, POST, PUT, DELETE URL: mypage.php, mypage.aspx, myservletjava Assinc: true (padrão) a chamada é assíncrona, false a chamada é sincrona Usuário: dificilmente é usado Senha: dificilmente é usado Mais em: https://developer.mozilla.org/pt- BR/docs/Web/API/XMLHttpRequest 16
Exemplos Parâmetros da requisição Ajax: requisicaoajax.setrequestheader(header, value); Permite enviar cabeçalhos para o servidor na requisição Ajax. requisicaoajax.setrequestheader("content-type", "application/x-www-form-urlencoded"); Veja mais em: http://www.w3.org/tr/html401/interact/forms.html Permite sobrescrever o Mime Type do cabeçalho recebido do servidor. Servidor envia: header('content-type: text/plain'); Sobrescreve o mime type via Java Script: requisicaoajax.overridemimetype( text/xml'); 17
Exemplos Parâmetros da requisição Ajax: requisicaoajax.open( GET, mypage.php?id=23 ); requisicaoajax.send(null); //GET requisicaoajax.open( POST, mypage.php ); var dados = new FormData(); dados.append( id, 23); requisicaoajax.send(dados); //POST 18
Exemplos Retornos da requisição Ajax: Evento onreadystatechange É um ponteiro de método para uma função JavaScript que trata os retornos da requisição Ajax. requisicaoajax.onreadystatechange = function(){ //código de tratamento do retorno da requisição Ajax. } 19
Exemplos Estados do retorno da requisição Ajax: requisicaoajax.readystate: Valor Descrição 0 UNSET Comunicação não iniciada. Método open não foi chamado. 1 OPENED Início da comunicação. Foi chamado método open. Ainda não foram enviado dados. 2 HEADERS RECEIVED Início da requisição. Chamado método send. 3 LOADING Servidor em processo de envio da resposta à requisição. 4 DONE Servidor terminou de enviar a resposta da requisição. 20
Exemplos Retornos da requisição Ajax: requisicaoajax.status: Valor Descrição 200 OK - Sucesso 201 Created - Criado 304 Not modified Não modificado, browser pode usar a versão da página no cache. 404 Page not found Página não encontrada 500 Internal Server Error Erro interno do servidor. Veja mais em: https://msdn.microsoft.com/en-us/library/ms767625%28v=vs.85%29.aspx 21
Exemplos Retornos da requisição Ajax: requisicaoajax.statustext: Descrição do código da resposta (requisicaoajax.status) Veja mais em: https://msdn.microsoft.com/en-us/library/ms767625%28v=vs.85%29.aspx 22
Exemplos Retornos da requisição Ajax: requisicaoajax.responsetext: Conteúdo retornado pelo servidor. Pode ser um texto, um HTML, um XML, um JSON, uma imagem, etc. Dica: É aqui que vem o conteúdo que você enviou (php: echo, Java: System.out.print, etc) no lado do servidor. requisicaoajax.responsexml: Conteúdo retornado pelo servidor no formato XML. Dica: Use essa propriedade caso tenha enviado um conteúdo no formato XML. 23
Exemplos 24
25
JSON JavaScript Object Notation Usado para armazenamento e troca de dados Leve e auto entendível Uma boa alternativa ao XML O tipo do arquivo é.json O MIME type é application/json 26
JSON 27
JSON 28
JSON - Exemplo Chave/Valor usa aspas duplas para o nome da chave e valor string Um objeto Um array 29
JSON Sintaxe Java Script 30
JSON Objeto JavaScript Convertendo uma string para um objeto JSON Texto JSON JSON.parse converte um texto para um objeto JSON Valida o texto, forma mais segura eval compila um código JavaScript, neste caso resulta em um objeto JSON Forma menos segura Usa o objeto JSON 31
FIM 32