Tutorial do jQuery (parte 5): AJAX todos eles!

Propaganda

Quando chegamos ao final da nossa série de mini-tutoriais do jQuery, já era hora de analisarmos mais detalhadamente 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. Desde infinitos fluxos de status no estilo do Facebook até o envio de dados de formulários, há um milhão de situações da vida real diferentes nas quais essa técnica pode ser útil.

Se você não leu os tutoriais anteriores, sugiro que o faça antes de resolver isso, pois eles se baseiam.

• Introdução: O que é o jQuery e por que você deveria se importar? Tornando a Web interativa: uma introdução ao jQueryO jQuery é uma biblioteca de scripts do lado do cliente que quase todos os sites modernos usam - torna os sites interativos. Não é a única biblioteca Javascript, mas é a mais desenvolvida, mais suportada e mais usada ... consulte Mais informação
• 1: Seletores e Fundamentos Tutorial do jQuery - Introdução: Noções básicas e seletores
  instagram viewer
  Na semana passada, falei sobre a importância do 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 ... consulte Mais informação
• 2: Métodos Introdução ao jQuery (Parte 2): Métodos e FunçõesIsso faz parte de uma introdução contínua para iniciantes à série de programação da web jQuery. A Parte 1 abordou os conceitos básicos do jQuery de como incluí-lo em seu projeto e seletores. Na parte 2, continuaremos com ... consulte Mais informação
• 3: Aguardando carregamento da página e funções anônimas Introdução ao jQuery (parte 3): aguardando o carregamento da página e funções anônimasO jQuery é indiscutivelmente uma habilidade essencial para o desenvolvedor web moderno e, nesta pequena minissérie, espero fornecer o conhecimento para você começar a usá-lo em seus próprios projetos web. Em... consulte Mais informação
• 4: Eventos Tutorial do jQuery (parte 4) - ouvintes de eventosHoje vamos aumentar um pouco e realmente mostrar onde o jQuery brilha - eventos. Se você seguiu os tutoriais anteriores, agora deve ter um bom entendimento do código básico ... consulte Mais informação
• Depurando com as Ferramentas do desenvolvedor do Chrome Descobrir problemas do site com as ferramentas para desenvolvedores do Chrome ou o FirebugSe você seguiu meus tutoriais do jQuery até agora, talvez já tenha encontrado alguns problemas de código e não saiba como corrigi-los. Quando confrontado com um código não-funcional, é muito ... consulte Mais informação

A-o que?

AJAX é um acrônimo para Javascript assíncrono e XML, mas a palavra-chave aqui é assíncrono. 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 percebeu isso antes, mas se um site está se atualizando dinamicamente, há uma boa chance de ele estar usando o AJAX para fazer isso.

Antes do AJAX, qualquer forma de interação com um servidor, seja a busca de novos dados ou a postagem de informações do usuário, teria que ser feita usando um novo carregamento de página e redirecionamentos.

Hoje, veremos como 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 receptor das coisas, porque essa é a beleza de APIs - tudo o que precisamos saber é um URL da API, que tipo de dados vamos recuperar e como manipulá-los.

Para uma leitura mais aprofundada, escrevi outro tutorial há algum tempo sobre lidando com AJAX no WordPress para envio de um formulário Um tutorial sobre o uso de AJAX no WordPressO AJAX é uma notável tecnologia da Web que nos levou além do simples "clique no link, vá para outra página" estrutura da Internet 1.0. Permite que os sites busquem e exibam dinamicamente conteúdo sem a do utilizador... consulte Mais informação , então você também pode conferir isso; envolve escrever seu próprio manipulador PHP e integrá-lo ao processo “oficial” do WordPress AJAX.

O método AJAX

Aqui está o formato básico de uma solicitação AJAX:

$ .ajax ({type: "GET ou POST", url: "API ou URL do manipulador do PHP", tipo de dados: "JSON", // dependendo do tipo de dados que você deseja retornar, mas o JSON é o mais dados comuns: {// um conjunto de chaves: pares "valor"}, sucesso: função (dados) {// manipula um retorno bem-sucedido de dados}, erro: função (mensagem) {// manipula o erro } });

Isso parece bastante complexo no começo - não ajudado pela falta de recuo desse plug-in de código -, mas você verá como é fácil quando chegar a um exemplo do mundo real.

API do Flickr AJAX

Neste exemplo, pegaremos as tags associadas à postagem atual do WordPress e buscaremos algumas imagens para anexar no final do artigo. Há um exemplo semelhante na documentação do jQuery, mas usa um método de atalho chamado getJSON () em vez de explicar um formato AJAX completo. Embora essa seja uma maneira válida de fazer as coisas, se você souber que apenas recuperará os dados JSON, acho que aprender o método AJAX real é mais importante, e é assim que vamos fazê-lo.

Primeiro, um single.php e tentaremos fazer eco de uma lista separada por vírgula simples das tags de postagem atuais. Normalmente, você usaria the_tags () fazer isso, mas isso não é bom, pois queremos armazená-los como uma variável, enquanto the_tags () os ecoa diretamente pré-formatados. Em vez disso, usaremos get_the_tags ():

php. $ tagslist = get_the_tags (); foreach ($ tagslist como $ tag) { echo $ tag-> name. ","; }

Isso funciona muito bem, por isso, enviamos isso dentro de uma solicitação AJAX para o URL da API do Flickr da seguinte maneira (observe, esta é uma captura de tela - para preservar o recuo, o código está disponível em este PasteBin).

Neste ponto, tudo o que é necessário é enviado 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 serem colocadas:

E edite o sucesso parâmetro da chamada AJAX para iterar sobre o Itens que são retornados.

$ .each (data.items, function (i, item) {if (i == 3) retorna false; // para quando temos 3 $ ("# flickr"). append (""); });

E aí temos que. Estavam anexando 3 itens do objeto JSON retornado (os dados são zero indexados; portanto, se chegarmos ao item 3, na verdade estamos no quarto item. Confuso, eu sei. Nesse ponto, usamos retorna falso pular para fora do cada() iterador). Já examinei o conteúdo dos objetos retornados, por isso conheço a estrutura de dados e só estou extraindo um link e uma referência IMG. Se você estiver interessado em saber o que mais é retornado, basta 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 inúteis - minha postagem incluiu a tag faça você mesmo para passeio de galinha, e o Flickr me deu tricô DIY. Agradável. Obviamente, esse é um dos obstáculos que você enfrenta ao trabalhar com uma API e fazer as coisas automaticamente; você pode re-etiquetar suas postagens (uma tarefa considerável), alterar a solicitação para solicitar as tags "todas" em vez de "qualquer" (com probabilidade de retornar neste caso) ou crie um novo campo personalizado no qual você especificaria uma palavra-chave segmentada para usar com a API (provavelmente a mais fácil).

Considerações sobre SEO

Este não é um ponto importante, mas como você está desenvolvendo sites, deve ser mencionado: os mecanismos de pesquisa não indexam conteúdo que não existe no carregamento da página, como qualquer coisa feita via AJAX. A pior coisa que você poderia fazer seria AJAXify totalmente o seu blog para que a página inicial fosse apenas um contêiner do tipo iframe para todo o conteúdo carregado dinamicamente. Use AJAX sabiamente, para realçar o conteúdo da página, não como substituição. Ou enfrentar consequências terríveis.

Obrigado pela leitura e espero ter dado algumas idéias. Obviamente, o Flickr não é a única API existente, apenas o Google "API pública"E você certamente encontrará mais coisas com as quais poderá brincar.

Na próxima semana, será a lição final da série Tutorial do jQuery, à medida que verificamos o plug-in da interface do usuário do jQuery. Como sempre, comentários e sugestões são bem-vindos; se você tiver uma pergunta da qual outras pessoas se beneficiarão, considere publicá-la em nosso site de Respostas.