JavaScript, jQuery e Responsive Design

2
Ambientao do Curso

Ajax

3
 Objetivos da Aula

Aula 04

O que Ajax?

Introduo ao Ajax com jQuery;

Persistindo nossos dados via AJAX/JSON;

Definindo eventos para as aes realizadas.

4
Ambientao do Curso

O que Ajax?

5
 O que Ajax?

Ajax a sigla em ingls para Asynchronous Javascript and

XML, e trata-se de uma tcnica de carregamento de contedos
em uma pgina web, com o uso de JavaScript, XML, HTML, TXT,
PHP, ASP, JSON ou qualquer linguagem de marcao ou
programao capaz de ser recuperada de um servidor.

6
 O que Ajax?

Em resumo:

11 Ajax significa Asynchronous Javascript and XML;

22 Utiliza o objeto XMLHttpRequest para se comunicar com o servidor;

33 A principal caracterstica da comunicao ser assncrona;

44 Conseguimos ter aplicaes mais dinmicas e interativas;

55 Menos trfego de informao e processamento no servidor;

66 Portvel (Pode ser utilizado com qualquer linguagem de back-end);

77 No linguagem de programao.

7
O que Ajax?

8
 O que Ajax?

O objeto XMLHttpRequest responsvel pelo funcionamento do Ajax.

O Ajax foi inventado pela Microsoft com o

IE5 para mais dinamismo nas ferramentas de
e-mail (Web Access) com o nome de ActiveX.

Nos anos 2000, a Mozilla criou o modelo

XMLHttpRequest que foi um padro
adotado pela maioria dos navegadores e se
tornou candidato a um Web Standard pela
W3C em 2006.

Nota: XML com o uso do protocolo HTTP para transferncia de arquivos.

9
 O que Ajax?

Para comearmos a trabalhar com Ajax, basta instanciarmos o objeto

XMLHttpRequest que podemos resumir em uma nica linha de cdigo:

varobjAjax=newXMLHttpRequest();

Mas como as vezes necessrio suportar navegadores mais antigos

como o IE, necessrio utilizar um fallback e adicionar este suporte
atravs de um script de verificao global.

O objeto XMLHttpRequest foi adotado pela Microsoft a partir do IE7.

10
 O que Ajax?

Fallback para IE 5 e 6:

varobjAjax;
if(window.XMLHttpRequest){
objAjax=newXMLHttpRequest();
}elseif(window.ActiveXObject){
objAjax=newActiveXObject('Msxml2.XMLHTTP');
if(!objAjax){
objAjax=newActiveXObject('Microsoft.XMLHTTP');
}
}else{
alert('SeunavegadornosuportaAjax');
}

11
 O que Ajax?

Existe alguns mtodos no Ajax para realizar a requisio:

Informa ao servidor o endereo do arquivo que est

open
open
sendo requisitado;

send
send Inicia a requisio j definida pelo mtodo open;

setRequestHeader
setRequestHeader Envia cabealhos HTTP para uma requisio;

abort
abort Cancela uma requisio em andamento.

Ainda existem outros mtodos como onreadystatechange,

getAllResponseHeaders e getResponseHeader.

12
 O que Ajax?

O mtodo onreadystatechange disparado pelo servidor sempre que

ocorrer uma mudana na propriedade readyState. Ele informa ao
navegador que houve uma atualizao no status entre ele e o servidor.

A propriedade readyState possui cinco atributos que retornam um

nmero indicativo do status da comunicao:

0 INSET (Comunicao no iniciada);

1 OPENED (Inicio da comunicao, mas envio de dados no iniciado);

2 HEADERS RECEIVED (Carregamento finalizado e inicio da requisio);

3 LOADING (Servidor Processando a resposta);

4 DONE (Resposta da requisio).

13
 O que Ajax?

Enviando a requisio ao Servidor:

varobjAjax=newXMLHttpRequest();//oufallback
if(objAjax){
objAjax.onreadstatechange=function(){
if(objAjax.readyState==4){
alert('Chegouarequisiofeitaaoserver');
}
};
objAjax.open(GET/POST,URL,true/false);
objAjax.send(produto=celular&modelo=Nexus+5);
}

14
 O que Ajax?

O mtodo setRequestHeader envia cabealhos HTTP para uma

requisio Ajax.

Para requisies feitas com o mtodo POST, necessrio incluir um

cabealho antes de enviar a requisio (send) da seguinte forma:

objAjax.setRequestHeader('ContentType',
'application/xwwwformurlencoded');

15
 O que Ajax?

Uma vez feita a requisio ao servidor, o passo seguinte :

Receber e tratar o contedo recebido utilizando as propriedades

status, statusText, responseText e responseXML.

O servidor tambm devolve cabealhos HTTP contendo

informaes sobre o documento, tais como tipo de contedo,
codificao e outras.

Entre os cabealhos HTTP enviados pelo servidor, um deles

retorna um valor numrico constitudo de 3 dgitos que define
o status da resposta.

16
 O que Ajax?

Devemos esperar pelo valor da propriedade status sempre

200 (OK), caso contrrio o valor ser 404 (Page not Found).

Conhecendo os valores de resposta do servidor, podemos adicionar

uma tarefa de verificao de status, como no exemplo abaixo:

if(objAjax.readyState==4){
if(objAjax.status==200){
alert('Chegouarequisiofeitaaoserver');
}else{
alert('Houvealgumproblemanacomunicao')
}
}

17
 O que Ajax?

O navegador Opera utiliza uma requisio conhecida como GET

condicional que pode retornar 304 (Not Modified).
Esse status significa que o documento no foi modificado desde a ultima
requisio, e o navegador usar a verso em cache do documento.

Portanto, por conta do GET condicional, devemos testar o status de

sucesso para os dois valores:

if(objAjax.status==200||objAjax.status==304){
alert('Chegouarequisiofeitaaoserver');
}

18
 O que Ajax?

Por fim, temos responseText e responseXML que so

propriedades do objeto XMLHttpRequest que retornam dados
enviados do servidor como resposta a requisio.

Em cada propriedade um tipo diferente, onde a primeira em forma de

string pode ser HTML, XML, Texto, etc; E na segunda um formato
XML. Um exemplo prtico disso, uma busca de CEP utilizando GET:

http://jsfiddle.net/marianalino/Lq9pkphs/

19
 Ambientao do Curso

Introduo ao Ajax com jQuery

20
 Introduo ao Ajax com jQuery

Quando vemos exemplos clssicos com o objeto XMLHttpRequest,

ficamos um pouco assustados no comeo, mas importante saber
como as coisas funcionam.

Biblioteca jQuery:

A biblioteca jQuery agrupa funcionalidades Ajax para facilitar o trabalho

do desenvolvedor na escrita dos scripts. Vamos ver algumas funes
Ajax da biblioteca e seu uso no mundo real.

21
 Introduo ao Ajax com jQuery

Funo $.get():

Esta funo realiza uma requisio HTTP com o uso do mtodo GET.
Podemos utilizar uma funo Callback ao ser executada no trmino da
requisio, somente se ela for bem-sucedida.

Como utilizar:

$.get('URL',[dados],[callback],[tipo]);

22
 Introduo ao Ajax com jQuery

Neste mesmo exemplo, podemos enviar uma requisio GET e obter

informaes sobre uma musica:

$.get('URL',
{artist:'RayCharles'},
function(data){
//manipulardadosretornadosem'data'
},
'html'
);

23
 Introduo ao Ajax com jQuery

Assim como fizemos via AJAX a busca de CEP, segue um exemplo de

buscar CEP com get do jQuery:

http://jsfiddle.net/marianalino/bvg31p3L/

24
 Introduo ao Ajax com jQuery

Funo $.post():

Esta funo realiza uma requisio HTTP com o uso do mtodo POST.
Podemos utilizar uma funo Callback a ser executada no trmino da
requisio, somente se ela for bem-sucedida.

Como utilizar:

$.post('URL',[dados],[callback],[tipo]);

25
 Introduo ao Ajax com jQuery

Neste mesmo exemplo, poderamos enviar uma requisio POST para

enviar dados de um usurio:

$.post('URL',
{nome:'Jos',email:'meu@email.com',idade:40},
function(data){
//manipulardadosretornadosem'data'
},
'html'
);

26
 Introduo ao Ajax com jQuery

Funo $.ajax():

Esta funo realiza uma requisio HTTP de qualquer tipo, seja ela GET,
POST, GETJSON e GETSCRIPT.

A diferena, que ela uma funo configurada com muito mais

parmetros que as outras, um conjunto de funcionalidades no
disponveis em funes mais fceis de entender e utilizar como as
anteriores.

$.ajax(options);

27
 Introduo ao Ajax com jQuery

Algumas caractersticas:

Esta chave configurada para retornar uma

async
async
requisio sncrona. (Default: true)

Esta chave evita que a pgina requisitada v para o

cache
cache
cache do navegador. (Default: true)

Esta chave uma funo, chamada quando a

complete
complete
requisio termina.

Esta chave uma string, descrevendo o tipo de

contentType
contentType contedo que est sendo enviado ao servidor.
(Default: application/x-www-form-urlencoded).

28
 Introduo ao Ajax com jQuery

Algumas caractersticas:

Esta chave contm os valores a serem enviados ao

data
data
servidor.

Esta chave o tipo de dados que esperado como

dataType
dataType retorno pelo servidor. (Valores: xml, html, script, json,
jsonp, text);

Esta chave uma funo, ela chamada quando

error
error
ocorre uma falha na requisio.

Esta chave habilita o uso de funes globais durante a

global
global
requisio ao servidor. (Default: true);

29
 Introduo ao Ajax com jQuery

Algumas caractersticas:

Esta chave uma funo, ela chamada quando a

sucess
sucess
requisio se completa com sucesso.

Esta chave deve ser definida em milissegundos e

timeout
timeout destina-se a estabelecer o tempo de espera para
abortar a requisio.
Esta chave o tipo de requisio que ser feito ao
servidor, normalmente as requisies so GET e
type
type
POST, porm outros tipos como PUT e DELETE
tambm so suportados. (Default: GET);
url
url Esta chave a URL para qual a requisio feita.
30
 Introduo ao Ajax com jQuery

Exemplo:

$.ajax({
url:'minha_url.php',
type:'GET',
dataType:'json',
success:function(data){
//manipulardadosretonardosem'data
}

});

31
 Ambientao do Curso

Construindo uma aplicao

32
 Construindo uma aplicao

Para compreendermos a construo de uma aplicao, faremos uma

aplicao de ToDo lista de coisas para se fazer.

Baixe o arquivo de template no netClass aula 06.

33
 Continuao da aplicao

Como visto no exemplo do slide anterior, ao escrever uma atividade e pressionar o

ENTER , ser inserido uma nova atividade com o status pendente na lista abaixo, e
nos deparamos com o seguinte evento, que executado ao clicar no checkbox de uma
atividade pendente ou completa alterando o status da task mesma. Toda vez que
manipular elementos da lista temos que alterar o trecho no html que informa a quantidade
de atividades, pendentes, completas e totais.

Vamos abordar parte por parte nos prximos slides e como ainda no aprendemos sobre
orientado a objeto, ento vamos criar um cdigo um pouco extenso para esse processo,
para entender melhor e sentir como isso implica e dificulta o cdigo e a manuteno do
mesmo.

34
 Continuao da aplicao

Temos um Web Service utilizando a url 'http://marianalino.com.br/webservice/', com esse

servio conseguimos listar, inserir, editar e remover nossas atividades da nossa lista.
Primeiramente vamos criar a ao de Inserir uma tarefa. Com Jquery selecione o
elemento body, e aplique um evento keydown utilizando o on. Toda vez que voc
pressionar o enter, ter que inserir o valor que est no input .input-task como uma tarefa

// Exemplo do evento de keydown e verificar se o enter foi pressionado

$('body').on('keydown', function(event) {
// se qualquer tecla digerente de enter for pressionada paramos
if( (event.keyCode || event.which) !== 13){
return true;
}
});

35
 Continuao da aplicao
// Eventos de teclado
$('body').on('keydown', function(event) {
// se qualquer tecla digerente de enter for pressionada paramos
if( (event.keyCode || event.which) !== 13){return true;}
/// bloqueamos outros eventos que possa existir para essa tecla
event.preventDefault();
event.stopPropagation();
/// aqui vamos criar nosso objeto task, pegamos o valor do input
var task ={
description: $('.input-task').val(),
status: 'pendente'
};
/// criamos nosso webservice
$.ajax({
url: 'http://marianalino.com.br/webservice/',
dataType: 'JSON',
data: task,
success: function (data) {
// e vamos chamar a funo para inserir as taks
insertTask(data);
}
});
// Limpe o valor do campo de input
$('.input-task').val('')
});

36
 Continuao da aplicao

Na funo insertTask, vamos receber um objeto como parmetro chamado data e

adcionar em um elemento das duas listas, uma das listas a lista completa e a outra
pendente, quando o status vir pendente devemos criar um html como o exemplo abaixo,
mas ateno o input no pode estar como checked pois uma task nova e no esta
pronta. Mas quando inserirmos uma taks com o status completo devemos criar o mesmo
html mas com o atributo do input como checked, exemplo:

li.html('<p>\
<input type="checkbox" name="done" value="'+data.id+'" checked disabled>\
<span class="description">'+data.task+'</span>\
<a href="#">x</a>\
</p>');
/// adiciona na lista mas verifica qual lista voce vai adicionar
$('.tasks.complete').append(li);

37
 Continuao da aplicao

/// Aqui vamos construir os elementos vindo do nosso webservice

function insertTask(data){
/// crie o html que precisa ser inserido com os dados que o service retornou
var li = $('<li></li>');
if(data.status == 'pendente'){
li.html('<p>\
<input type="checkbox" value="'+data.id+'" name="done">\
<span>'+data.task+'</span>\
<a href="#">x</a>\
</p>');
/// adiciona na lista mas verifica qual lista voce vai adicionar
$('.tasks.pending').append(li);
}else{
li.html('<p>\
<input type="checkbox" name="done" value="'+data.id+'" checked disabled>\
<span class="description">'+data.task+'</span>\
<a href="#">x</a>\
</p>');
/// adiciona na lista mas verifica qual lista voce vai adicionar
$('.tasks.complete').append(li);
}
}

38
 Continuao da aplicao

Para ver se funcionou abra o console, e insira uma atividade se

o status da requisio for 200 est ok, ou se no tiver nenhum
retorno de link em vermelho declarando algum problema seu
cdigo funcionoua, verifique tambm se um objeto inseriu na
sua lista de pendentes.

39
 Continuao da aplicao

Agora podemos criar o load para carregas os elementos j inseridos,

para isso vamos criar uma funo loadTasks que vai ser chamada logo
aps criada. No mtodo ajax no precisamos passar o objeto data, mas
ele no retorna um objeto nico ele retorna uma lista de objeto, ento
utilize o forEach do Jquery e dentro do forEach execute a funo
insertTask passando objeto por objeto do ForEach.

40
 Continuao da aplicao

/// Comeamos carregando a lista de tasks que voce ja inseriu

function loadTasks(){
$.ajax({
url: 'http://marianalino.com.br/webservice/',
dataType: 'JSON',
success: function(data) {
/// verifica se o json que retorna esta vazio
if(data.length<=0) return;
/// percorre objeto por objeto do json e gera o html
data.forEach(function(it){
// e executamos a funo para criar oobjeto novamente
insertTask(it);
});
}
})
}
/// Executa a funo de Carregar as tarefas
loadTasks();

41
 Continuao da aplicao

Agora vamos fazer funcionar a ao de mudar a task para completa, com Jquery
selecione o elemento body, e aplique um evento change utilizando o on, no elemento que
existe ou vai existir .tasks input, a funo como parametro vai ser o completeTask,
exemplo:

// Evento change input

$('body').on('change','.tasks input[type=checkbox]',completeTask);

42
 Continuao da aplicao

Na funo completeTask criamos um objeto a partir do click do input, ou

seja, precisamos do id da task que inserimos no value do nosso input ao
costruir o HTML, crie um objeto com esse Id e com o status completo,
execute um novo ajax passando esse objeto e chame nossa funo de
insertTask novamente. Como ela j est pronta e sabe distinguir cada
status de cada atividade para direcionar a lista certa, ir colocar o
elemento no lugar correto, mas os elementos vao ficar duplicado para
isso remova o antigo, utilize o parent(), para chegar no li que deseja
remover e utilize o remove():

43
 Continuao da aplicao

/// Quando clicamos no checkbox mudamos a task para completa

function completeTask(){
/// construimos um objeto com status completo
var task ={
id: $(this).val(),
status:"completo"
};
$.ajax({
url: 'http://marianalino.com.br/webservice/',
dataType: 'JSON',
data: task,
success: function (data) {
insertTask(data);
}
});
$(this).parent().parent().remove();
}

Nessa aula no vamos colocar as informaes de total de atividades, completas e pendentes,

deixaremos para prxima aula.

44
 Prximos Passos

Para que voc tenha um melhor aproveitamento do curso, participe das

seguintes atividades disponveis na semana 2:

Aula 05: FrontEnd HTML5 APIs

Fazer a leitura da Apostila;

Assista a videoaula;
Realizar o Laboratrio proposto nesta aula;
Responder as questes do Teste de Conhecimento.

Mos obra!

45