Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Ajax
Webdesign

Como Usar a Função “ajax” do jQuery

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called AJAX for Front-End Designers.
A Beginner’s Guide to AJAX With jQuery

Portuguese (Português) translation by Thiago Oliveira (you can also view the original English article)

Tendo seguido os três tutoriais prévios, você deve ter adquirido um bom entendimento de AJAX. Nesse tutorial final, vamos arrematar as coisas trabalhando com um exemplo mais intrincado.

O Markup

Para ter uma ideia da estrutura desse exemplo, considere o seguinte markup:

O markup do elemento main é mostrado abaixo:

Observe os links de texto. Estes correspondem a diferentes frameworks front-end. Como veremos na próxima seção, cada vez que clicarmos nos links, uma requisição AJAX será executada. Então, o elemento com a classe de modal vai aparecer e seu conteúdo será atualizado com os dados recebidos da resposta.

Aqui está como o elemento main se parece:

Main_Element

Markup do Modal

O próximo passo é examinar a estrutura do nosso modal. Aqui está o código HTML:

Como você pode ver, o modal contém alguns poucos elementos vazios. Nós colocamos esses no HTML porque seus textos vão mudar dependendo de qual link clicarmos e da resposta que recebermos.

A imagem abaixo mostra como o modal aparece inicialmente:

Modal

Por padrão, o modal está escondido. Adicionalmente, vamos também esconder o loader. Ele vai aparecer somente quando uma requisição AJAX for disparada.

Dê uma olhada nas correspondentes regras de CSS:

Note que usamos a propriedade opacity (e não a propriedade display) para esconder o modal porque essa propriedade pertence às propriedades CSS animáveis. Dessa maneira, poderemos transicionar os estados do modal (ex. os estados aberto e fechado).

Gerando a Resposta JSON

Para os propósitos desse exemplo, vamos escolher construir nós mesmos a resposta JSON. Especificamente, a resposta esperada (ex. o arquivo Demo.json) será um array de objetos. Cada objeto conterá detalhes a respeito dos frameworks front-end relacionados.

Além disso, o valor da propriedade name será igual aos links de texto do elemento main (veja a seção prévia). Com isso em mente, a estrutura da resposta se parecerá com algo assim:

Nota: os valores que usamos para as propriedades numberOfStars e currentVersion são falsos e puramente para o propósito de demonstração.

Similar aos exemplos prévios nessa série, vamos usar AJAX para requisitar um arquivo estático. Porém, se quisermos embedar conteúdo vindo de outros sites (ex. Google Maps, Flickr), devemos ler a documentação de suas APIs, e se necessário, solicitar uma chave de API.

Além disso, nossos dados alvo vivem no mesmo servidor que a página demo. Portanto, vamos evitar limitações que possam ocorrer quando interagindo com serviços terceiros (veja a seção "Limitações de Requisições AJAX" do primeiro tutorial).

Implementando a Requisição AJAX

Nessa seção, vamos usar a função ajax do jQuery para inicializar uma requisição AJAX. Antes de fazer isso, vamos primeiro definir nossas variáveis cacheando os seletores jQuery mais comumente utilizados:

Agora, é hora de examinar o código responsável pela execução da requisição:

Você notará que a sintaxe para a função ajax se parece com o seguinte:

O parâmetro settings é um objeto de configuração que guarda informações sobre nossa requisição. O número de propriedades que esse objeto pode ter é muito grande (por volta de 34 propriedades). Por questão de simplicidade, vamos somente discutir aqueles que são usados nesse demo. Mais especificamente:

Propriedade Descrição
url Uma string contendo a URL para qual a requisição é enviada.
dataType O formato dos dados da resposta (ex. json, xml, html).
beforeSend Uma função de callback que é executada antes de enviarmos a requisição. Aqui, essa função dispara o código que mostra o loader.

Antes de seguirmos em frente, vale a pena mencionar três coisas:

  • Existe também outra sintaxe para a função ajax$.ajax(url[, settings])
  • Todas as propriedades de configuração do parâmetro settings são opcionais.
  • O método HTTP padrão é GET.

Métodos Promise

A função ajax retorna o objeto jQuery XMLHttpRequest ou jqXHR. Esse objeto implementa a interface Promise, e portanto contém todas as propriedades, métodos, e comportamentos de uma Promise.

Nesse exemplo, usamos os seguintes métodos de Promise:

O método done é disparado se a requisição tem sucesso. Ele recebe um ou mais argumentos, todos os quais podem ser ou uma única função ou um array de funções. Por exemplo, no nosso demo, a successFunction() é passada como um argumento.

A função de callback (ex. successFunction()) aceita três argumentos. Primeiro, os dados retornados. Segundo, uma string categorizando o status da requisição (veja o artigo prévio para seus possíveis valores). Por último, o objeto jqXHR.

O método fail é chamado se a requisição falha. Ele recebe um ou mais argumentos, todos os quais podem ser ou uma única função ou um array de funções. Por exemplo, no nosso demo, a errorFunction() é passada como um argumento.

A função de callback (ex. errorFunction()) aceita três argumentos: o objeto jqXHR, uma string categorizando o estado da requisição, e uma outra string que especifica o erro resultante. Esse erro recebe a porção textual do estado HTTP, como Not Found ou Forbidden.

O método always é executado quando a requisição termina, independentemente do sucesso (ex. o método done é executado) ou não (ex. o método fail é executado) dela. Novamente, ele recebe como um argumento uma única função ou um array de funções. Por exemplo, no nosso demo, a alwaysFunction() é passada como um argumento.

O estado da requisição especifica os argumentos da função. No caso de requisições de sucesso, o callback (ex. alwaysFunction()) recebe os mesmos argumentos que o callback do método done. Caso contrário, se a requisição falhar, ele aceita os mesmos argumentos do callback do método fail.

Nota: Ao invés dos métodos Promise de done, fail e always que são usados nesse exemplo, poderíamos igualmente termos usado as funções de callback success, error e complete. Essas funções são definidas no parâmetro settings.

Exibindo os Dados

Se a requisição tiver sucesso, somos capazes de receber os dados da resposta. Então, os manipulamos de modo a popular os elementos vazios do modal.

Considere o código para o callback successFunction.

Embora tenhamos atualizado o conteúdo do nosso modal, ele ainda está escondido. Ele torna-se visível e o loader desaparece quando a requisição termina. Só então, o callback alwaysFunction é executado.

A classe active é assim:

Abaixo você pode ver a aparência esperada do modal se clicarmos no link de texto Bootstrap.

success_jQuery

Alguns Cenários

É importante entender o código que é executado sob certas circunstâncias. Vamos cobrir dois cenários comuns:

  • O valor da propriedade name não é igual ao dos links de texto do elemento main. Por exemplo, vamos assumir que definimos uma URL onde o valor da propriedade name do objeto que é relacionado ao framework Foundation é Foundation2 ao invés de Foundation. Em tal caso, se clicarmos no link de texto Foundation, o modal abaixo irá aparecer:
Error_Modal
  • O dado da resposta é vazio. Digamos, por exemplo, que definimos uma URL que aponta para uma array vazia. Nesse caso, o modal ficaria assim:
Empty_Response

Lidando com Erros

Então, cobrimos o código que é disparado quando a requisição tem sucesso. Mas o que acontece se a requisição falha? No caso de uma requisição sem sucesso, escondemos a lista e mostramos uma mensagem customizada.

Aqui está o código da failFunction() que demonstra aquele comportamento:

Para nos familiarizarmos com esse código, especificamos uma URL que não existe. Por isso, o método fail será disparado e o modal abaixo será exibido:

Fail_Modal

Nota: Novamente, a mensagem de erro pode ser diferente se você rodar esse exemplo localmente.

Aqui está o demo do Codepen:

Conclusão

Nesse tutorial concluímos nossa examinação do AJAX da perspectiva de um web designer–bem feito por segui-lo até o fim! Espero que tenha achado essa série útil e que tenha aprendido algumas novas habilidades.

Como um próximo passo, encorajo a examinar as seguintes coisas:

  • Torne-se familiar com os métodos abreviados para AJAX do jQuery que não cobrimos (ex. o método $.getJSON).
  • Implemente suas próprias requisições AJAX acessando sejam arquivos estáticos ou até mesmo dados dinâmicos vindos de serviços terceiros (ex. Flickr).
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.