Maneiras de fazer chamadas do Ajax com jQuery

Maneiras de fazer chamadas do Ajax com jQuery

Agora devemos saber o que realmente é AJAX. E sabemos que, quando o Gmail atualiza algum conteúdo sem redirecionamento, uma chamada AJAX é feita nos bastidores. O conteúdo solicitado pode ser estático (permanece exatamente o mesmo todo o tempo, como um formulário de contato ou uma imagem) ou dinâmico (os pedidos para o mesmo URL recebem respostas diferentes, como a caixa de entrada do Gmail onde novos e-mails podem aparecer a qualquer momento).

Para o conteúdo estático, podemos querer que a resposta seja armazenada em cache. Mas, para o conteúdo dinâmico, que pode mudar no tempo de um segundo, o cache AJAX torna-se um bug, certo? Deve notar-se que o Internet Explorer sempre armazena cache as chamadas AJAX, enquanto outros navegadores se comportam de forma diferente. Então, é melhor dizer ao navegador explicitamente se o AJAX deve ou não ser armazenado em cache. Com jQuery, podemos realizar isso simplesmente digitando:

O uso mais comum do AJAX é para carregar HTML de um local remoto e injetá-lo no DOM. Com a função de carregamento do jQuery (), esta tarefa é um pedaço de bolo. Analise esta demonstração e examinamos alguns usos, um por um.

Clique no primeiro botão chamado “load ().” Um pedaço de HTML é injetado na página, exatamente sobre o que estávamos falando. Vamos ver o que está acontecendo nos bastidores.

Abaixo está o código JavaScript para este efeito:

  1. $ .ajaxSetup força o navegador NÃO a armazenar em cache chamadas AJAX.
  2. Depois que o botão é clicado, demora um pouco antes do carregamento do novo HTML. Durante o tempo de carregamento, é melhor mostrar uma animação para fornecer ao usuário alguns comentários para garantir que a página esteja sendo carregada no momento. A variável “ajax_load” contém o HTML do sinal de carregamento.
  3. “ajax/load.php” é o URL do qual o HTML é carregado.
  4. Quando o botão é clicado, faz uma chamada AJAX para a url, recebe a resposta HTML e injeta-a no DOM. A sintaxe é simplesmente $ (“#DOM”). load(url). Não pode ser mais direto, ah?

Agora, vamos explorar mais detalhes sobre o pedido com o Firebug:

  1. Abra o Firebug.
  2. Mude para a guia “Rede”. Habilite se estiver desativado. É aí que todas as solicitações de HTTP na janela do navegador são exibidas.
  3. Mude para a guia “XHR” abaixo “Rede”. Lembre-se do termo “XHR?” É a solicitação gerada a partir de uma chamada AJAX. Todos os pedidos são exibidos aqui.
  4. Clique no botão “load()” e você deve ver o seguinte.

A solicitação é exibida, certo? Clique no pequeno sinal de mais à esquerda da solicitação, mais informações serão exibidas.

Clique na guia “Params”. Aqui estão todos os parâmetros passados através do método GET. Veja a string de número longo passada sob uma chave “_”? É assim que o jQuery garante que a solicitação não seja armazenada em cache. Cada solicitação tem um parâmetro “_” diferente, então os navegadores consideram que cada um deles é único.

Clique na aba “Response”. Aqui está a resposta em HTML retornada da url remota.

Clique no botão “load() #DOM”. Observamos que apenas o link Envato está carregado desta vez. Isso é feito com o seguinte código:

Com carga (url + “#DOM”), apenas os conteúdos dentro de #DOM são injetados na página atual.

Clique no botão “load() GET” e abra o firebug.

Ao passar uma seqüência de caracteres como a segunda param de load(), esses parâmetros são passados para a URL remota no método GET. Em Firebug, esses params são mostrados da seguinte maneira:

jessica

Leave a Reply

Your e-mail address will not be published. Required fields are marked *