Ajax

Anderson RodriguesDanilo Guimarães

com

jQuery

Ajax Asynchronous JavaScript and XML; Linguagem de programação? Técnica de carregamento de conteúdos; Utiliza JavaScript e XML; Pode recuperar HTML, TXT, PHP, ASP,

JSON ou qualquer linguagem de marcação ou programação capaz de ser recuperada de um servidor;

Ajax Popularizou-se em 2005 através do

google suggest;

XMLHttpRequest O que é? Objeto XMLHttpRequest (Requisição XML com

o uso do protocolo HTTP). Foi inventado pela Microsoft; Atender necessidade de um cliente de email

que rodava em um browser; Implementado inicialmente no IE 5.0; O IE 7.0- usa o ActiveXObject enquanto os

outros browsers usam o objeto interno do JavaScript.

XMLHttpRequest Em 2006 o W3C publicou as primeiras

especificações para tornar o XMLHttpRequest uma recomendação oficial;

XMLHttpRequest IE 5.0 e 6.0 utilizam ActiveX . Demais browsers utilizam objeto nativo

JS;

Funcionamento Ajax

Exemplo de Requisiçãovar requisicaoAjax = iniciaAjax();if (requisicaoAjax){

requisicaoAjax.onreadystatechange = funciton(){If (requisicaoAjax.readyState==4){ alert(“Chegou a requisição feita ao servidor”); } };requisicaoAjax.open(“POST”, “/requisicoes/arquivo-requisitado.php?”. true);requisicaoAjax.setRequestHeader(“Content-Type”, “application/x-www-form-urlencode”);requisicaoAjax.send(“produto=mouse+sem+fio&modelo=Microsof”);}

Requisição e inserção Ajax Requisição TXT:

Mostraremos o conteúdo de um arquivo.txt em uma caixa de alerta.

Exs: ajaxtext.js, arquivo-1.6.1a.php Requisição HTML:

A função mostraResposta(requiscaoAjax) foi adaptada para requisição de um arquivo HTML.

Conteúdo mostrado em uma div id=insere_aqui, usamos a propriedade JavaScript innerHTML.

Exs: ajaxhtml.js, arquivo-1.6.2a.php

Vantagens no uso do Ajax Possibilita uso de recursos desktop em

sistemas Web; Reduz o tráfego de dados entre cliente e

servidor; Maior aproveitamento do

processamento no lado cliente; AJAX não é uma tecnologia por isto não

é necessário pagar para a utilizar.

Problemas no uso do Ajax AJAX não é a solução milagrosa para todos os males e se

usado de forma inadequada pode piorar uma situação que já era feia;

Os Navegadores usam diferentes métodos por isso temos que estar atentos quanto a eles para não impossibilitar o uso de nossos sistemas por tais navegadores;

Como existe uma divisão de processamente entre o cliente e o servidor, temos que minimizar este processamento pois os Navegador em geral não suporta uma carga muito pesada de scripts;

Os botões voltar, avança e histórico não funcionam muito bem com AJAX.

Ajax e JavaScript Escreve muito; Trabalho árduo para o desenvolvedor; Pouco Resultado; Qual a solução? Utilizar a biblioteca jQuery;

jQuery O que é? Biblioteca JavaScript disponibilizada

como código livre Criada por John Resig Foco principal é a simplicidade Não é necessário conhecer JavaScript a

fundo

Ajax e jQuery Principais funções eventos jQuery

(manipulação ajax): $.get(); $.post(); $.ajax(); ajaxStart; ajaxStop;

jQuery - Função $.get Função $.get Requisição HTTP com o uso do método GET. Admite apenas uma função callback a ser

executada ao fim da requisição em caso de sucesso.

Para tratamento de erros deve-se usar a $.ajax()

$.get(url, [data], [callback], [tipo])

jQuery - Função $.get url: O URL do arquivo requisitado data: Dados no formato chave/valor a

serem enviados ao servidor (facultativo).

callback: Função a ser executada após o carregamento do arquivo requisitado.

tipo: tipo do dado da requisição. Ex: “html”

Requisições Ajax - Função $.get Exemplo:$.get(exemplo-get.php, {nome: “Danilo”, cidade: “Itabuna”}, function(data){ //manipular os dados retornados }, “html”)

jQuery - Função $.get Exemplos:

exemplo-get.php - processa dados enviados ao servidor e retorna uma resposta ao usuário.

arquivo-2.2a.php – envia um nome e o nome de uma cidade para serem processados pelo arquivo anterior.

arquivo-2.2b.php – o usuário entra com os nomes para serem processados em exemplo-get.php

jQuery - Função $.post Função $.post Requisição HTTP com o uso do metodo

POST. Admite só uma função callback a ser

executada ao término da requisição se esta for bem sucedida.

$.post(url, [data], [callback], [tipo])

jQuery - Função $.post url: O URL do arquivo requisitado data: Dados no formato chave/valor a

serem enviados ao servidor . callback: Função a ser executada após o

carregamento do arquivo requisitado. tipo: tipo do dado da requisição. Ex: “html”

jQuery - Função $.post Exemplo:$.post(exemplo-post.php, {nome: “Anderson”, email: “andereson@pweb.com”, comentario: “Texto...”}, function(data){ //manipular os dados retornados }, “html”)

Arquivo exemplo: arquivo-2.2c.php

jQuery – Função $.ajax Semelhante ao $.get e $.post Fornece a possibilidade de receber

vários parâmetros Considerada uma função de baixo nível

$.ajax(opções)

jQuery – Função $.ajax Parâmetros

async{true, false} beforeSend {function(){....}} cache{true, false} complete {function(){....}} contentType{‘text/XML’,’application/x-

www-form-urlencoded’} data{campo1: ‘valor1’, campo2: ‘valor2’}

jQuery – Função $.ajax Parâmetros

dataFilter{function(){....}} dataType{xml, html script, json, jsonp,

text} error {function(){....}} global{true, false} ifModified{function(){....}} url{string} type{‘GET’, ‘POST’, ‘PUT’, ‘DELETE’ }

jQuery – Função $.ajax Parâmetros

sucess{function(){....}} Timeout{function(){....}}

Evento ajaxStart Ocorre quando se inicia uma requisição

AJAX e nenhuma outra atividade está em curso na página.

ajaxStart(callback)

Função callback a ser executada por ocasião da ocorrência do evento.

Evento ajaxStart Exemplo:

$(‘#carregando’).ajaxStart(function(){ $(this).show(‘slow’); });

Evento ajaxStop Ocorre quando todas as atividades de

uma requisição Ajax chegam ao fim. Sintaxe semelhante à AjaxStart. ajaxStop(callback)

Evento ajaxStop Exemplo:

$(‘#carregando’).ajaxStop(function() {$(this),hide();});