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

Um guia de AJAX com jQuery para iniciantes

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Example of AJAX With Vanilla JavaScript
How to Use jQuery’s “ajax” Function

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

No primeiro artigo dessa série, cobrimos os fundamentos do AJAX. No segundo, vimos um exemplo usando vanilla JavaScript. 

Nesse tutorial, vamos passar por algumas das funções e métodos do jQuery relacionadas com AJAX. Mais especificamente, vamos olhar mais de perto o método abreviado load e a função genérica ajax.

Usando o Método load

O método load do jQuery é um simples, mas poderoso método para buscar dados remotos. Abaixo você pode ver sua sintaxe:

A tabela seguinte mostra seus possíveis parâmetros:

Parâmetro Descrição Requerido
url Uma string contendo a URL para qual a requisição será enviada. Sim
data Os dados (como uma string ou simples objeto) que são enviados para o servidor com a requisição. Não
complete Uma função de callback que é executada quando a requisição é completa, seja com sucesso ou sem. Não

Aqui estão os parâmetros da função de callback:

Parâmetro Descrição
responseText Os dados recebidos da requisição.
textStatus Uma string categorizando o status da requisição.
jqXHR O objeto XMLHttpRequest (jqXHR) do jQuery, que é um superconjunto do objeto XMLHttpRequest (XHR) nativo do browser.

A lista seguinte sumariza os possíveis valores do parâmetro textStatus:

Para entender melhor como o método load funciona, vamos revisitar o exemplo discutido no tutorial anterior.

Mais uma vez, veja essa clara estrutura de HTML:

Aqui está como ela fica:

Example

Lembre-se que queremos atualizar o conteúdo do elemento #bio com os dados da resposta, assim que o botão for clicado.

Aqui está o código jQuery necessário:

Assumindo que a requisição teve sucesso (ex. quando o textStatus é success ou notmodified), o resultado final ficaria assim:

success_jQuery

Também, considere a seguinte visualização que descreve uma requisição que teve sucesso:

Javascript_jQuery_Objects

A parte esquerda dessa visualização mostra como o objeto XHR é impresso no console do browser se usarmos Javascript puro (veja o tutorial anterior) para fazer o request. Por outro lado, a parte direita exibe como o respectivo objeto jqXHR é impresso se usarmos o método load

No caso de uma requisição sem sucesso, entretanto, uma mensagem correspondente deve aparecer. Para fazer isso, monitoramos o valor do parâmetro textStatus e exibimos uma mensagem de erro:

error_jQuery

Nota: Se você rodar o exemplo no seu ambiente local (e guardar nele o arquivo Bio.txt), a mensagem de erro provavelmente será diferente. Por exemplo, você pode ver o seguinte resultado:

error_locale_jQuery

Por fim, vale a pena mencionar que, por padrão, o método load usa o método HTTP GET, a menos que enviemos dados como um objeto para o servidor. Só então, o método POST é invocado.

Veja o exemplo relevante no Codepen abaixo:

Agora, vamos modificar o formato do arquivo que fazemos a requisição do servidor. Especificamente, para esse exemplo, os dados desejados estão incluídos no arquivo Bio.html ao invés do arquivo Bio.txt. Também vale notar: o arquivo alvo contém dois parágrafos.

Assumindo que somente queremos carregar o primeiro parágrafo, teremos que atualizar o código inicial da seguinte maneira: 

Aqui está como isso fica:

success_jQuery_trim

E aqui está o exemplo no Codepen:

Conclusão

Nesse tutorial, demonstrei como você pode usar AJAX com jQuery. Para deixar as coisas mais interessantes, também trabalhamos com alguns exemplos práticos. No último tutorial restante dessa série vamos finalizar as coisas trabalhando com um exemplo mais intrincado.

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.