Requisição AJAX com o método load() da jQuery

Definindo AJAX

AJAX é a sigla em inglês para Asynchronous JavaScript and XML e trata-se de uma técnica de carregamento de conteúdos em uma página web com uso de JavaScript e XML.

Tal definição é mais do que conhecida e repetida exaustivamente em livros e matérias escritas em sites, contudo pode levar os menos avisados a um grave erro de entendimento da técnica.

Sem demais considerações a respeito é bom que fique claro que o XML constante da definição, eu costumo dizer, ali está somente para viabilizar a letra X (xis) no final da sigla e chegar-se ao nome do bravo guerreiro grego, filho de Telamon feroz adversário dos troianos e que foi imortalizado na Íliada de Homero. (wikipedia: Ajax)

Assim, a definição de AJAX, para estar em acôrdo com suas reais possibilidades poderia ser escrita:
AJAX é a sigla em inglês para Asynchronous JavaScript and XML e trata-se de uma técnica de carregamento de conteúdos em uma página web com uso de JavaScript e XML, HTML, PHP, ASP, JSON ou qualquer linguagem de marcação ou de programação capaz de ser recuperada de um servidor.

Introdução

Nesta matéria estudaremos a técnica AJAX com uso da biblioteca jQuery para requisição de um fragmento HTML hospedado em um arquivo no servidor. Veremos como carregar conteúdos solicitados pelo usuário sem necessidade de carregamento da página inteira o que, em última análise, é a finalidade maior do AJAX.

Desenvolvemos uma trecho simples de uma página web, baseado em uma página real sobre notebooks da HP do Brasil, na qual quando o usuário clica em um dos modelos de notebook é levado a uma nova página contendo informações detalhadas sobre o modelo clicado.

No modelo AJAX que desenvolvemos as informações são carregadas na mesma página na qual o usuário se encontra em uma espécie de janela popup. Faça uma visita ao site da HP do Brasil e depois à página que desenvolvemos, para uma visão antecipada do produto final de que trata esta matéria.

Por tratar-se de uma matéria com a finalidade de mostrar as técnicas de requisição de fragmentos HTML com uso de AJAX e da biblioteca jQuery está fora de questão considerações sobre o layout da página, posicionamento do conteúdo requisitado, comparações com abertura de janela popup por meios tradicionais ou qualquer outra ilação irrelevante para a técnica. Até porque layout e posicionamento são controlados por CSS e aplicáveis a cada caso.

Muito menos vamos nos estender analisando a marcação HTML e as regras CSS que usamos para construir a página. Portanto sugiro uma visita ao código de marcação da página que desenvolvemos denominada index.html e também ao arquivo HTML, denominado arquivo-html.html contendo os três fragmentos a carregar. Notar que este arquivo não contém declaração DOCTYPE, elemento raiz HTML, seção HEAD e nem mesmo BODY. A marcação de arquivos HTML a carregar em páginas existentes resume-se ao(s) fragmento(s) HTML a carregar. Observe ainda que no arquivo existem os seguintes três DIVS div#tx2000br, div#dv3000br, div#dv contendo as informações detalhadas sobre cada um dos três modelos de Notebook apresentados.

O método jQuery load()

Para injetar no DOM um fragmento HTML (seja texto HTML puro ou gerado dinamicamente) contido em um arquivo remoto a biblioteca jQuery fornece o método load() cuja sintaxe geral é mostrada a seguir:

load( url, [data], [callback] )

Exemplos:

1. load( 'arquivo-html.html' ); // carrega todo o arquivo
2. load( 'arquivo-html.html #injetada' ); // carrega todo o conteúdo da div#injetada do arquivo
3. load( 'arquivo.php', { 'cidades[]': ['Curitiba', 'Manaus'] } ); // carrega o arquivo e passa dados para o servidor
4. load( 'meu-arquivo.json', minha_funcao ) // carrega o arquivo e executa minha_funcao

A requisição padrão para tráfego de dados é GET, contudo caso sejam passados parâmetros adicionais a requisição torna-se POST.

Na sintaxe do método load() o parâmetro url é obrigatório é informa o endereço no qual se encontra hospedado o fragmento HTML a ser requisitado. Os parâmetros [data] e [callback] são opcionais sendo o primeiro destinado a enviar dados para o servidor e o segundo para definir uma função a ser executada tão logo a requisição tenha se completado.

Até a versão 1.2 da biblioteca todo o HTML do arquivo existente no endereço url constante como parâmetro do método era carregado no documento. A partir daquela versão podemos selecionar um fragmento HTML do arquivo, para ser carregado no documento. A sintaxe para definir tal fragmento é um seletor constante do arquivo a carregar, conforme mostrado a seguir.

load( 'arquivo-html.html #tx2000BR' ); // carrega todo o conteúdo da div#tx2000BR constante do arquivo

Sobre codificação de caracteres

A codificação de caracteres em páginas web é um assunto que suscita muitas dúvidas e principalmente confusão e que quando incorretamente tratado resulta na renderização de sinais muito estranhos em substituição, principalmente, dos caracteres acentuados da língua portuguesa. Você, desenvolvedor, com certeza já esteve face a este problema se não em um projeto próprio pelo menos visualizando um site codificado incorretamente.

Não vou me estender em detalhes de codificação. Caso você queira se aprofundar no assunto comece lendo uma tradução para o português de Portugal das Recomendações para HTML no seu capítulo referente a: Representação dos documentos HTML

A maneira segura de evitar conflitos de codificação de seus documentos, conflitos com a codificação nativa de scripts e linguagem de programação em geral e conflitos com codificação no lado do servidor é com uso do conjunto de caracteres utf-8 que abrange todos os caracteres existentes na face da terra. Mas atenção: Não basta você declarar no seu documento HTML uma devida metatag como charset=utf-8 é imprescindível que você salve seu documento como utf-8. Portanto, o editor HTML que você usa deve estar configurado para tal. Em ambiente Windows o Bloco de Notas oferece a opção de salvar o documento com codificação ANSI (default), Unicode, Unicode big endian e utf-8.

Mas, talvez você esteja trabalhando em um site já existente codificado com charset=iso-8859-1 que é o conjunto de caracteres conhecido como latin-1 ou Europeu Ocidental que é um subconjunto de utf-8. Neste caso você deverá optar por uma das duas soluções indicadas a seguir:

1. Salvar o fragmento HTML projetado para ser carregado com a codificação utf-8
2. Usar codificação de caracteres com entidades númericas ou alfabéticas no fragmento HTML projetado para ser carregado com a codificação utf-8 iso-8859-1

Para o segundo caso uma tabela de codificação pode ser encontrada em: HTML Codes

Script jQuery

Antes de prosseguir recomendo que caso você ainda não tenha examinado, analisado e entendido os dois arquivos HTML que usamos para esta demonstração o faça agora visitando os seguintes links:

• Página web onde serão carregados os conteúdos index.html
• Marcação HTML da página web onde serão carregados os conteúdos: index.txt
• Marcação dos conteúdos a carregar: arquivo-html.txt

Observe o script jQuery que faz a requisição AJAX e carrega o conteúdo na página

1. $(document).ready(function(){
2.  var carregando = $('#carregando')
3.  var conteudoAjax = $('#conteudo-ajax')

4.  function mostrarCarregando(){  
5.    carregando.css('display', 'block').fadeIn(1000);  
6.  };

7.  function aposCarregamento(){  
8.    carregando.fadeOut(1000);
9.    conteudoAjax.slideDown();
10. $('.fechar').click(function() {
11.  conteudoAjax.slideUp('slow'); 
12. });
13.};

14.  $(conteudoAjax).css('opacity', .94);

15.  $('#ajax a').click(function(event){
16.    event.preventDefault();
17.    mostrarCarregando();
18. switch(this.id){
19.  case 'm1':
20.   conteudoAjax.slideUp();
21.   conteudoAjax.load('arquivo-html.html #tx2000br', aposCarregamento);
22.  break;
23.  case 'm2':
24.   conteudoAjax.slideUp();
25.   conteudoAjax.load('arquivo-html.html #dv3000br', aposCarregamento);
26.  break;
27.  case 'm3':
28.   conteudoAjax.slideUp();
29.   conteudoAjax.load('arquivo-html.html #dv4', aposCarregamento);
30.  break;
31.  default:
32.   aposCarregamento();
33.   break;
34.  }
35.  });
36.})

Código comentado:

Linha	Descrição
2	Cria a variável carregando e a ela atribui como valor o objeto jQuery div#carregando que receberá o ícone indicando carregamento AJAX. Este div encontra-se no arquivo index.html
3	Cria a variável conteudoAjax e a ela atribui como valor o objeto jQuery div#conteudo-ajax que receberá o fragmento HTML a ser carregado no arquivo index.html. Este div encontra-se no arquivo index.html
4 a 6	Define a função mostrarCarregando() que mostra o ícone de carregamento AJAX, tão logo a requisição tenha início. Notar que o ícone é uma gif animada constante da marcação HTML da página index.html e inicialmente encontra-se escondido com regra CSS.
7 a 13	Define a função aposCarregando() que esconde o ícone de carregamento AJAX, tão logo a requisição tenha início termine. Notar que o ícone é uma gif animada constante da marcação HTML da página index.html e inicialmente encontra-se escondido com regra CSS.
10 a 12	Dentro da função aposCarregando()definimos o fechamento da janela popup que foi carregada. Notar que o elemento span com a classe fechar que contém o link [X] FECHAR é inserido no DOM juntamente com o conteúdo carregado. Caso tivéssemos defiunido o fechamento da janela (linhas 10 e 11) fora da função aposCarregamento() o link não iria funcionar. Importante: Se você pretende manipular elementos HTML inseridos no DOM via AJAX defina os métodos de manipulação em uma função no parâmetro CALLBACK (após o carregamento) do método load() .
14	Define um efeito de opacidade na cor de fundo do texto carregado.
15 a 35	Condicional identificadora do link clicado e requisição do fragmento apropriado.
15	Captura um clique do usuário em um dos três links Mais » que acionam o carregamento das informações adicionais sobre cada um dos modelos de Notebook.
16	Equivalente jQuery para return false da linguagem JavaScript, impede que a página "salte" para o topo quando o link é clicado. Notar que href = "#" nos links.
17	Tão logo um link seja clicado é mostrado o ícone indicativo de carregamento AJAX.
18	Chave para identificar o link clicado com uso da condicional JavaScript switch().
19	Se o id do link clicado (this.id) for m1 trata-se do primeiro modelo de Notebook (ver marcação de index.html).
20	Esta linha faz com que, caso o usuário tenha carregado as informações adicionais de um modelo e clique em outro modelo as informações presentes se fechem.
21	Carrega na div#conteudo-ajax o conteúdo da div#tx2000br do arquivo-html.html e tão logo termine o carregamento executa a função aposCarregamento().
22 a 36	Funções idênticas as descritas, completam a condicional.