Fichas
jQuery - The Return Flight
Fichas del conjunto (53)
- 1qual é a estrutura básica de um método AJAX em jQuery?$.ajax(url, [ settings]);
digamos que queremos chamar o arquivo 'confirmation.html'
$.ajax('http://example.org/confirmation.html', {
sucess: function(response) {
//Runs only when the server returns a successful response
$('.ticket').html(response).slideDown();
//Introdus a resposta do servidor no elemento '.ticket' com um slideDown();
}
}) - 2Podemos utilizar URL relativas?sim, as chamadas AJAX utilizam o mesmo dominio em que elas foram carregadas, por isso ao adicionar o URL podemos utilizar caminhos relativos ao URL que a ajax será carregada.
- 3Quais são os parâmetros que o método $.get aceita?$.get(url, success);
Então se rescrevermos a request do primeiro card, no método get, teremos:
$.get('confirmation.html', function(response){
$('.ticket').html(response).slideDown();
}); - 4Como nos podemos enviar uma 'request' que envia junto um numero de confirmação? -algo que adicione um numero de confirmação no URL -confirmation.html?confNum=1234
podemos adicionar a opção 'data' do ajax,
aplicável assim:
$.ajax('confirmation.html', {
success: function(response {
$('.ticket').html(response).slideDown();
},
data:{'confNum': 1234}
\\um objeto javascript com keys:values e adicione eles ao URL
}
});
então esse codigo data é equivalente há:
$.ajax('confirmation.html?confNum=1234' ) - 5Compo podemos obter um numero de confirmação do HTML?Armazenando ele no html, como por exemplo uma div:
então em nossa ajax request podemos especificar:
$.ajax('confirmation.html', {
success: function(response) {
$('.ticket').html(response).slideDown();
},
data: { 'confNum': $('.ticket').data('confNum') } //obtendo o numero armazenado na div
}
})
o que resulta também na url request:
confirmation.html?confNum=1234 - 6Se nosso codigo esta tudo certo, ele irá rodar o success: function, porém e se tivemos um problema como, timeout, abort or server error, como adicionamos isso em nossa $.ajax request?$.ajax('confirmation.html', {
success: function(response){
\\success function
}
error: function(request, errorType, errorMessage) {
alert('Error: ' + errorType + ' with message: ' + errorMessage);
}
}); - 7Quanto tempo demorar para o ajax retornar um erro de 'time-out'?Varia entre os navegadores, o que podemos fazer é definir um tempo limite para essa ajax request, com o comando timeout: value;
$.ajax('confirmation.html', {
success: function(response) {...},
error: function(request, errorType, errorMessage) {...},
timeout: 3000 -> aguarda até 3000 ms ou 3 segundos, até que retorne o erro timeout.
}) - 8Qual comando em nossa ajax request podemos utilizar para rodar um spinner ou loading page?Temos que adicioanr uma função para:
beforeSend: function() {
\\code here, usualmente algo para download.
}
beforeSend roda basicamente ANTES da AJAX REQUEST ser enviada.
então ficaria:
$.ajax('url-of-data', {
success: function
error:function
timeout: 3000,
beforeSend: function() {
\\loading or other information.
}
}); - 9Qual comando em nossa ajax request podemos utilizar para parar de rodar nosso spinner ou loading?vamos utilizar o:
complete: function(){
\\roda depois de sucess ou de um error
\\podemos utilizar para parar a sessão de carregamento
}
então ficamos com:
$.ajax('url-of-data', {
success: function
error:function
timeout: 3000,
beforeSend: function
complete: function() {
\\run something in sucess and error case.
}
}); - 10Quais problemas podem surgir se colocamos um manipulador de eventos em um elemento que não existem em nosso DOM no momento do carregamento $(document).ready , apenas após uma AJAX request? - A ajax request traz um novo element, digamos um e esse novo elemento possui um manipulador de eventos para o click, quais problemas podem surgir....?Quando temos essa situação, vamos precisar utilizar a tecnica de 'event delegation',
$('.confirmation .view-boarding-pass').on('click', function(){...})
\\ se o elemento .view-boarding carregar somente após uma AJAX request, essa função não ira rodar, pois ele terá procurado esse botão no inicio do codigo, não encontrando não ira rodar.
Por isso temos que usar o event delegation:
$('.confirmation').on('click', '.view-boarding-pass', function({...}))
dessa formas nos não estamos falando para script olhar para o botão exatamente, mas sim para a div pai, assim que clickamos em um elemento da div pai, ele vai verificar se o elemento existe ou não para performar a função.
dessa forma pode ser carregado no começo do codigo e quando o ajax trouser o botão, ele funcionará. - 11Como podemos organizar melhor nosso codigo utilizando JavaScript Object?Poremos iniciar um javascript object com todas os 'event handlers' :
e chamar as funções dentro desses handlers com outros elementos do objeto:
no fim, adicionamos nosso objeto para começar a executar, com confirmation.init(); - 12Quais problemas podemos ter ao utilizar 'this' em funções reutilizaveis que possuem AJAX?ao utilizar this dentro de uma ajax request, vamos perceber que this do AJAX é utilizado para suas proprias configurações, e opera com o mesmo escopo do this da função.
para isso temos que declarar uma variavel na função e atribuir o valor this,
var confirmation = this;
e dentro da nossa $.ajax request, vamos colocar junto os outros valores do objeto:
timeout: 3000,
context: confirmation,
success: function(response)
//context: confirmation é onde poderemos usar o this do escopo da função.
para corrigir esse problema - 13Como funciona uma função reutilizável ?function Vacation(destination) {
this.details = function() {
console.log(destination);
}
}
$(document).ready(funciton(){
var paris = new Vacation('Paris');
var london= new Vacation('London');
paris.details(); \\vai aparecer Paris no console
london.details(); \\vai aparecer London no console
}); - 14Como podemos resolver o problema de conflito de variaveis 'this' no jquery, em funções reutilizadas?
- 15como funciona o ajax em funções reutilizaveis?
- 16Como fazemos para enviar dados de uma form via jQuery - AJAX request?$('form').on('submit', function(event){
event.preventDefault();
var form = $(this);
$.ajax('/book', {
type: 'POST',
data: form..serialize(),
success: function(result) {
form.remove();
$('#vacation').hide().html(result).fadeIn();
}
})
});
lembrar que existe outro método além de serialize para enviar os dados:
poderia ser:
data: {
'destination' : $('#destination').val(),
'quantity': $('#quantity').val()
} - 17O que é JSON?JSON é um método padrão de formatar dados, significa:
JavaScript Object Notation, é um tipo de formato de dado com XML.
Até agora foram visto apenas repostas do servidor como 'HTML' como:
Here goste the text
e isso era o que o servidor respondia.
Porém o servidor se retornar dados como JSON teremos isso:
{
totalPrice: 2196.00,
night: 4,
location: 'Paris, France',
confirmation: '345feab'
}
Então quando o servidor retorna um JSON, ele returna detalhes que podemos utilizar como queremos. - 18O que temos que fazer com nossa $.ajax request no método POST para receber dados JSON?$.ajax('/book', {
type: 'POST',
data: form.serialize(),
*dataType: 'json',
success: function(result){
form.remove();
$('#vacation').hide().html(result).fadeIn();
},
contentType: 'application/json'
})
dataType: 'json' -> parse the response as JSON.
*contentType: 'application/json' -> Ask the server to respond with JSON.
**** NESTE CASO TAMBÉM PRECISAMOS REMOVER O .html(response), já que é um objeto JSON, nos não podemos jogar simplesmente o dado em um .html(); - 19Como fazemos para ler o JSON resultado de nossa $.ajax request e criar com esses dados um elemento HTML?Nosso JavaScript, vai automaticamente converter o JSON em um JavaScript Object, então nos podemos usar esse objeto para construir nosso HTML.
Então temos a nossa função success:
success: function(result){
form.remove();
var msg = $('
');
msg.append('Destination: " + result.location + ". "');
msg.append("Price: " + result.totalPrice + ". ");
msg.append("Nights:" + result.nights + ". ");
msg.append("Confirmation: " + result.Confirmation + ".");
Então juntamos ao elemento HTML:
$('#vacation').hide().html(msg).fadeIn();
} - 20Como podemos evitar o hardcode de uma form, na hora de colocar o action em nossa $.ajax request?$.ajax('/book', {object})
\\vamos remover o hardcode da url - form com:
$.ajax($('form').attr('action'),{
object
}) - 21Como acessamos os dados JSON para criar um elemento HTML e introduzir em nosso DOM?success: function(response) - qualquer nome de parametro - poderia ser viagem, resultado...
sucess: function(viagem){
var msg = $('
');
msg.append( viagem.description )
}
Então acessamos os elementos do json, com o nome do parametro dot, key do arquivo JSON.
function(parameter)
no arquivo JSON:
{
key1:value1,
key2:value2
}
parameter.key1 // return value 1
parameter.key2 // return value 2 - 22Normalmente como é estruturado um arquivo de dados JSON com varias informações?Como um array de objetos:
[
{
image: 'url',
name: "name"
},
{
image:'url',
name: "name"
},
{
image:'url',
name:"name"
}
] - 23para que serve o método $.each()?Serve para iterar através de um array.
A função $.each() tem 2 parâmetros:
$.each(response, function(, )) {});
response -> é o elemento que recebemos do servidor via o método AJAX. - 24Como podemos utilizar $.each em função success, para pegar dados de de nossa $.ajax request e colocar nessas divs no front-end? exemplo:success: function(result) {
$.each(result, function(index, city){
var favorite = $('.favorite-' + index);
favorite.find('p').html(city.name);
favorite.find('img').attr('src', 'city.image')
})
}; - 25Como podemos utilizar o método $.getJSON ao inves do $.ajax$.getJSON('/status' , function(result){
})
result = JSON - 26Como funciona o método $.map()?Os parâmetros de $.map()
$.map(collection, funciton(, ){});
collection -> é um array
function -> é uma função que é chamada em cada item dentro da nossa collection.
onde o primeiro parametro é o item e o segundo o index.
NOTE QUE OS PARAMETROS ESTÃO TROCADOS ENTRE O:
$.map() vs $.each();
$.map() retorna um array modificado pelo que foi modificado pela função passada como argumento.
EXEMPLO :
var myNumbers = [1,2,3,4];
//myNumbers is the collection
var newNumbers = $.map(myNumbers, function(item, index){ return item + 1});
então temos que notar que, a coleção continua igual e a variavel novo numero é o array collection inicial performado pela função.
myNumbers = [1,2,3,4]
newNumbers=[2,3,4,5] - 27Como podemos utilizar o método $.map() para transformar JSON em HTML?
- 28como podemos utilizar o método $.map() com o $.getJSON?$.getJSON('/status', function(result){
var statusElements = $.map(result, function(status, i){
var listItem = $('
');
$(''+status.name+'
').appendTo(listItem);
$(''+status.status+'
').appendTo(listItem);
return listItem;
});
$('status-list').html(statusElements);
})
note que mesmo que statusElements sendo um array de dados, ele pode ser colocado via .html(), criando varios elementos como no exemplo. - 29Qual é a diferença entre $.each vs $.map?$.each() roda uma função em cada um dos items, porém retorna o ARRAY ORIGINAL sem modificações, então se temos um array:
var cities = ['Paris', 'London', 'Orlando'];
$.each(cities, funciton(index, city) {
var result = city + " " + index;
console.log(result);
});
Print no console:
Paris 0
London 0
Orlando 2
returna ['Paris', 'London', 'Orlando'];
agora usando o $.map(cities, function(city, index){
var result = city + ' ' + index;
console.log(result);
return result;
})
console.log vai retornar a mesma coisa:
Paris 0
London 1
Orlando 2
Porém o array será:
['Paris 0', 'London 1', 'Orlando 2'] - 30como funciona o método .detach()?.detach() remove um elemento do DOM, preservando todos os dados e eventos, isto é util quando queremos minimizar as inserções com multiplos HTML elementos.
Então no lugar de usar: de atualizar todos os elementos HTML enquanto eles estão sendo mostrados, nos vamos remover eles da pagina, modificalos, e então vamos mostra-los todos de uma vez.
OLD METHOD:
$('.status-list').html(statusElements);
COM DETACH:
$('.status-list').detach()
.html(statusElements);
.appendTo('.status');
então o que fazemos aqui usando .detach() é remover o elemento do DOM, manipullar ele, inserindo os elementos, como exemplo, e então coloando ele de volta.
//lembrar de criar uma variavel se for usar uma query mais de uma vez. - 31Como funciona o método .off do jQuery?Imaginemos que temos 2 event handlers em um botão:
$('button').on('click', function1);
$('button').on('click', function2);
quando chamamos o método .off em:
.off()
$('buton').off('click');
\\ele vai parar de assistir todos os event handlers relacionados ao evento que foi desligado, com off.
\\interessante principalmente quando clickamos varias vezes em algo e ela continua aparecendo alguma coisa, para evitar esse comportamento podemos colocar no final da função:
$(this).off('click');
para parar com o comportamento repetivivo - 32Como funciona o sistema de 'nameing spacing' nos event handlers?Podemos adicionar labels, nome em nossos event handlers para facilitar a utilização ou remoção deles:
exemplo:
$('button').on('click.image', function1);
$('button').on('click.details', function2);
...
assim, com o name spacing poderemos desligar um só event handler de um elemento que possua mais que um, com o nome spacing:
EXEMPLO:
$('button').off('click.image');
\\turn off the event handler 1;
Também podemos remover somente com o name spacing:
$('button').off('.image');
\\ essa remoção ocorre em todos os events handlers com o name spacing de '.image'.
então .image pode ser name spacing para varios event handlers em um mesmo elemento:
$('button').on('click.image', functionName);
$('button').on('mouseover.image', functionName);
$('button').off('.image');
\\ desativa os 2 event handlers - 33como funciona o método trigger() em jQuery?
- 34Como fazemos um custom event com .trigger()?
- 35Como fazemos 'custom events'?
- 36Por padrão jQuery executa os eventos conforme eles foram declarados, mas e se queremos a execução em uma ordem diferente, como podemos fazer?Temos nossas 2 funções:
$('button').on('click', functioName);
$('button').on('click', function2);
caso queiramos alterar a ordem que o evento será executado, podemos mudar o nome do evento no primeiro caso, para:
$('button').('custom-event', functionName);
e então na function2 podemos acionar quando exatamente queremos que o primeiro gatilho seja acionado, chamando a função:
$(this).trigger('custom-event');
//vai acionar o custom-event - 37Porque podemos querer criar um plugin?Plugins são um caminho de encapsular comportamos que podemos querer reutilizar em diferentes lugares em nosso site.
- 38Como fazemos para fazer a configuração basica de nosso plugin?$.fn.priceify = function() {
//.pricedy é o nome do nosso plugin
//Utilizar o .fn faz com que o método seja disponível para todos os objetos jQuery.
Em nossa função podemos adicionar:
console.log('Pricify Called');
console.log(this);
}
Então podemos chamar o método para algumas items:
$('.vacation').priceify();
\\this no método priceify será um array com todos os elementos .vacation. - 39Qual jQuery Object Method nos utilizamos para lidar com o array que é retornado em nosso 'this' em nosso plugin?each(function) //pode ser usado em qualquer jQuery object
para utilizarmos temos que usar na função:
$.fn.priceify = function() {
//o this do each é o array com os elementos.
this.each(function(){
var vacation = this;
//de code to perform something
//AGORA O THIS É CADA ELEMENTO, E NÃO MAIS O ARRAY COM TODOS.
})
} - 40Como fazemos para que nosso plugin aceite parâmetros?$('.vacation').priceify({ day: 5 });
\\Enviando um objeto como parametro:
Em nosso plugin:
$.fn.priceify = function(options) {
var price = vacation.data('price');
var details = $(' Book ') + options.days + ' days for $';
} - 41Como funciona o método $.extend?O método utilitario $.extend combina objetos gerando apenas um, então se temos como entrada 2 objetos:
$.extend({ day: 3 }, { price: 5 });
o $.extend retorna:
{ days: 3, price: 5}
combinou 2 objetos, resultando em 1.
Se passamos um objeto vazio e outro com algo, ele simplesmente retorna a junção dos 2, que no caso seria só os elementos de 1;
Se passamos o mesmo value, o ultimo objeto vai sobreescrever o outro:
$.extend( { days: 3 }, { days: 5 });
\\return: { days: 5 };
O ULTIMO SOBRE ESCREVE. - 42Como fazemos para que os parâmetros de nosso plugin sejam opcionais?utilizando o $.extend:
$.fn.priceify = function(options){
this.each(function(){
var settings = $.extend({days: 3}, options);
Dessa forma settings terá o valor padrão caso options seja um objeto vazio, ou terá o valor de options caso options contenha algum valor.
})
} - 43Como podemos utilziar nosso plugin para ficar com 100% prototipado?
- 44Como fazemos para adicionar o botão 'Show All Price', para que ele funcione em todos os elementos que estão em nosso plugin? -show = function -é o comportamento que queremos individualmente para cada elemento.
- 45porque demos adicionar um evento customizado junto do on('click'), quando queremos por exemplo que um botão faça tudo?ao termos:
show = function(){};
$('element').on('click', 'button', show);
$('element').on('custom-event', show);
assim podemos usar o 'custom event', para acionar esse comportamento quando clickarmos em um elemento que visualiza tudo:
$('button-show-all').on('click', function(event){
event.preventDefault();
$('element').trigger('custom-event');
})
quando clickamos no botão show-all ele ativa todos os custom-events dos elements. - 46Como nos podemos criar ajax requests reutilizaveis? - Caso queiramos utilizar uma ajax request em mais de um lugar no nosso codigo. -Um jeito de fazer isso é utilizando 'promises'.
- 47Como construimos uma 'promise object'?primeiramente vamos criar um objeto com nossa função ajax:
var Weather = {
today: function(location){
var promise = $.ajax('/weather', {
data: {q:location}
});
return promise;
}
} - 48Como utilizamos esse objeto 'promise object' em nosso event handler?$('button').on('click', function(){
var location = $('.loc').text();
var todayPromise = Weather.today(location); // todayPromise vai conter a 'promise' retornada da nossa ajax request.
$('.weather').text(result.weather);
}); - 49Qual função podemos utilizar com 'promises' que é similar com 'success' callback?.done(function(result));
então utilizamos em:
todayPromise.done(function(result){
$('.weather').text(result);
})
dessa forma, apos definir nossa variavel todayPromise passando o parametro correto para nosso método com ajax reutilizavel, vamos poder manipular a resposta variando de acordo com a chamada que fazemos, não necessitando de um success: na ajax padronizada, somente após já passado todos os parâmetros corretos. - 50Como fica nossa promise para executar corretamente?
- 51Quais são os passos para criar uma nova 'promise'?criar um $.deferred();
var promise = $.Deferred();
//jQuery method for creating a promise object
promise.resolve(value) -> que vai chamar a callback do done, se ela existir:
promise.done(function(value){})
Da mesma maneira, podemos criar uma função caso a promise falhe com :
promise.reject(value); -> chama a fail callback:
promise.fail(function(value){}) - 52Como fica nossa função completa com sucess e fail?
- 53Como lidemos com 2 ajax requests que podem ser enviadas em uma ordem e recebidas aleatoriamente, como fazemos para ordem a ordem que serão mostradas?$.when(, ...).then(function(p1data, p2data){})
//então quando chamamos as 2 promises no when, nosso codigo vai esperar até que as duas estejam prontas, então ele vai chamar o .then para que seja exibidas ao mesmo tempo.
Información
- Descripción
- asa (JavaScript / jQuery) Technical Skills Fichas sobre jQuery - The Return Flight, creado por Victor Bini el 22/12/2016.
- Creado por
- Victor Bini
- Visitas
- 3
- Valoración