À medida que nos aproximamos do final da nossa série de mini-tutoriais da jQuery, já era hora de dar uma olhada mais profunda em um dos recursos mais usados do jQuery. O AJAX permite que um site se comunique com um servidor em segundo plano sem exigir que a página inteira seja recarregada. De fluxos de status infinito no estilo do Facebook até o envio de dados de formulário, há um milhão de situações diferentes da vida real nas quais essa técnica pode ser útil.
Se você ainda não leu os tutoriais anteriores, sugiro que o faça antes de abordar isso, pois eles são baseados uns nos outros.
- Introdução: O que é o jQuery e por que você deveria se importar? Tornando a Web interativa: uma introdução ao jQuery Tornando a Web interativa: uma introdução ao jQuery jQuery é uma biblioteca de scripts do lado do cliente que quase todos os sites modernos usam - ela torna os sites interativos. Não é a única biblioteca Javascript, mas é a mais desenvolvida, a mais suportada e a mais usada .... Read More
- 1: Seletores e Fundamentos Tutorial do jQuery - Introdução: Fundamentos e Seletores Tutorial do jQuery - Introdução: Fundamentos & Seletores Na semana passada, falei sobre o quão importante o jQuery é para qualquer desenvolvedor web moderno e por que ele é incrível. Esta semana, acho que é hora de sujarmos as mãos com algum código e aprendermos como ... Leia mais
- 2: Métodos Introdução ao jQuery (Parte 2): Métodos e Funções Introdução ao jQuery (Parte 2): Métodos e Funções Esta é parte de uma introdução contínua aos iniciadores da série de programação web jQuery. Parte 1 cobriu os fundamentos do jQuery de como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com ... Leia mais
- 3: Aguardando carga de página e funções anônimas Introdução a jQuery (parte 3): esperando pela página para carregar e funções anônimas Introdução ao jQuery (parte 3): esperando pela página para carregar e funções anônimas jQuery é indiscutivelmente uma habilidade essencial para o desenvolvedor web moderno, e nesta pequena mini-série, espero dar-lhe o conhecimento para começar a usá-lo em seus próprios projetos web. Em ... Leia mais
- 4: Tutorial de jQuery de Eventos (Parte 4) - Ouvintes de Evento Tutorial de jQuery (Parte 4) - Ouvintes de Eventos Hoje vamos dar um pulo e realmente mostrar onde jQuery brilha - eventos. Se você seguiu os últimos tutoriais, agora deve ter uma boa compreensão do código básico ... Leia mais
- Depuração com ferramentas de desenvolvedor do Google Chrome Descubra os problemas do site com as ferramentas de desenvolvedor do Chrome ou com o Firebug Se você estiver seguindo meus tutoriais do jQuery até agora, talvez já tenha encontrado alguns problemas de código para consertá-los. Quando confrontado com um pouco de código não funcional, é muito ... Leia Mais
O que?
AJAX é um acrônimo para Javascript assíncrono e XML, mas a palavra-chave aqui é assíncrona . Assíncrono refere-se ao fato de essas solicitações ocorrerem em segundo plano, sem interromper a experiência de navegação do usuário. Você provavelmente nunca notou isso antes, mas se um site está se atualizando dinamicamente, há uma boa chance de usar o AJAX para fazer isso.
Antes do AJAX, qualquer forma de interação com um servidor, seja buscar novos dados ou postar informações do usuário, teria que ser feita usando um novo carregamento de página e redirecionamentos.
Hoje vamos olhar para usar um serviço de terceiros, o Flickr - de quem podemos usar o AJAX para buscar algumas fotos usando um tipo de dados JSON. Na verdade, não importa como o Flickr implementa o lado do recebimento das coisas, porque essa é a beleza das APIs - tudo o que precisamos saber é uma URL da API, que tipo de dados recuperaremos e como manipulá-los.
Para ler mais, eu escrevi outro tutorial há algum tempo sobre como lidar com AJAX no WordPress para uma submissão de formulário de contato Um tutorial sobre como usar AJAX no WordPress Um tutorial sobre como usar AJAX no WordPress AJAX é uma tecnologia da web notável que nos moveu além do simples link de clique, vá para outra página ”estrutura da Internet 1.0. Ele permite que os sites busquem e exibam conteúdo dinamicamente sem o usuário ... Leia Mais, então você pode querer verificar isso também; envolve escrever seu próprio manipulador PHP e integrá-lo ao processo “oficial” WordPress AJAX.
O método AJAX
Aqui está o formato básico de uma solicitação AJAX:
$.ajax({ type: "GET or POST", url: "API or your PHP handler URL ", datatype:"JSON", // depending on what kind of data you want back, but JSON is the most common data: { //a set of key:"value" pairs }, success:function(data){ //handle a successful return of data }, error:function(message){ //handle the error } }); Isso parece bastante complexo no início - não ajudado pela falta de recuo deste código - mas você verá como é fácil chegar a um exemplo do mundo real.
API do Flickr AJAX
Neste exemplo, vamos pegar as tags associadas à postagem atual do WordPress e buscar algumas imagens para anexar no final do artigo. Há um exemplo semelhante na documentação do jQuery, mas ele usa um método de atalho chamado getJSON () em vez de explicar um formato AJAX completo. Embora esta seja uma maneira válida de fazer as coisas, se você sabe que só obterá dados JSON de volta, eu sinto que aprender o método AJAX real é mais importante, então é assim que vamos fazer isso.
Primeiro, um up single.php e vamos tentar ecoar uma simples lista separada por vírgulas das tags de postagem atuais. Normalmente, você usaria the_tags () para fazer isso, mas isso não é bom, pois queremos armazená-los como uma variável, enquanto the_tags () os exibe diretamente pré-formatados. Em vez disso, usaremos get_the_tags ():
name.", "; }?> Isso funciona muito bem, por isso vamos produzir isso dentro de uma requisição AJAX para o URL da API do Flickr da seguinte forma (observe, esta é uma captura de tela - para preservar o recuo, o código está disponível neste PasteBin).
Neste ponto, tudo o que ele faz é enviar para o console do navegador ou alertar uma mensagem de erro, se houver uma. Para realmente fazer algo com os dados retornados, adicione um lugar para as imagens a serem colocadas:
E edite o parâmetro de sucesso da chamada AJAX para iterar os itens retornados.
$.each(data.items, function(i, item){ if(i==3) return false; // stop when we have 3 $("#flickr").append(" 
"); }); E aí temos que. Estamos anexando 3 itens do objeto JSON retornado (os dados são zero indexados, então, se chegarmos ao item 3, na verdade estamos no quarto item. Confuso, eu sei. Nesse ponto, usamos return false para pular para fora do cada () iterador). Eu já examinei o conteúdo dos objetos que são retornados, então eu conheço a estrutura de dados e estou apenas extraindo um link e uma referência IMG. Se você estiver interessado em saber o que mais é retornado, basta lançar um console.log (item) lá.
Aqui estão os resultados no meu site de teste e o código completo neste PasteBin. Observe que os resultados retornados são basicamente lixo - meu post incluiu a tag DIY para uma corrida de frango, e o Flickr me deu uma malharia DIY. Agradável. Claro, esse é um dos obstáculos que você enfrenta ao trabalhar com uma API e fazer coisas automaticamente; você pode marcar novamente suas postagens (um empreendimento considerável), alterar a solicitação para solicitar "todas" tags em vez de "any" (provavelmente não retornar nada neste caso) ou criar um novo campo personalizado para o qual especificaria uma palavra-chave direcionada para usar com a API (provavelmente a mais fácil).
Considerações sobre SEO
Este não é um ponto importante, mas como você está no negócio de desenvolvimento de sites, deve ser mencionado: os mecanismos de pesquisa não indexarão conteúdo que não exista no carregamento da página, como qualquer coisa feita via AJAX. A pior coisa que você poderia fazer seria usar o AJAXify totalmente em seu blog para que a página inicial fosse apenas um contêiner parecido com um iframe para todo o conteúdo carregado dinamicamente. Use o AJAX com sabedoria, para melhorar o conteúdo da página, não como um substituto . Ou enfrente consequências terríveis.
Obrigado pela leitura e espero ter lhe dado algumas ideias. É claro que o Flickr não é a única API disponível - apenas a " API pública " do Google e você certamente encontrará mais coisas com as quais pode brincar.
Na próxima semana será a lição final da série jQuery Tutorial enquanto verificamos o plugin jQuery UI. Como sempre, comentários e sugestões são bem-vindos; Se você tiver uma pergunta que os outros irão se beneficiar, considere postá-la em nosso site de respostas.