Jquery tutorial (parte 5): ajax-los todos!

Video: jQuery Crash Course [5] - Ajax

Ao nos aproximarmos do fim da nossa série mini-tutorial jQuery, é sobre o tempo demos uma olhada mais aprofundada em um dos recursos mais utilizados do jQuery. AJAX permite que um site para se comunicar com um servidor em segundo plano, sem requerer a página inteira para recarregar. Do Facebook ao estilo fluxos de status infinita para enviar dados de formulário, há um milhão de diferentes situações da vida real em que esta técnica pode ser útil.

Video: Tutorial codeigniter 6 - AJAX JQuery combos y tablas

Se você ainda não leu os tutoriais anteriores, sugiro que você fazê-lo antes de abordar isso como eles construir em cima uns dos outros.

A-O quê?

AJAX é um acrônimo para Asynchronous javascript e XML, mas a palavra-chave aqui é assíncrono. Asynchronous refere-se ao fato de essas solicitações ocorrem em segundo plano, não interromper a experiência de navegação do usuário. Você provavelmente nunca sequer notado antes, mas se um site está sendo atualizado dinamicamente, há uma boa chance de que ele está usando AJAX para fazê-lo.

Antes de AJAX, qualquer forma de interação com um servidor, seja ele buscar novos dados ou postar informações de volta do usuário, teria que ter sido feito usando um novo carregamento da página e redirecionamentos.

Hoje vamos olhar usando um serviço de terceiros, Flickr - de quem pode usar AJAX para buscar algumas fotos usando um tipo de dados JSON. Na verdade, não importa como Flickr implementa lado de recebimento das coisas, porque essa é a beleza da APIs - tudo o que precisamos saber é uma URL API, que tipo de dados que vamos voltar, e como manipulá-lo.

Para ler mais, eu escrevi um outro tutorial há um tempo atrás sobre manipulação AJAX em WordPress para um envio do formulário de contacto, assim você pode querer verificar isso também- que envolve a escrita de seu próprio manipulador PHP, e integrando que no processo “oficial” WordPress AJAX.Um tutorial sobre como usar AJAX Em WordPressUm tutorial sobre como usar AJAX Em WordPressAJAX é uma tecnologia de web notável que nos moveu além da simples link “clique, ir para outra página” estrutura da Internet 1.0. Ele permite que os sites para buscar dinamicamente e exibir o conteúdo sem que o usuário ...consulte Mais informação

O Método AJAX

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

$.ajax({tipo: "GET ou POST",url: "API ou o seu URL manipulador PHP ",tipo de dados:"JSON",// dependendo de que tipo de dados que você quer de volta, mas JSON é o mais comum dados: { // um conjunto de chaves:"valor" pares}, sucesso:função(dados){ // lidar com um retorno bem sucedido de dados}, erro:função(mensagem){ // manipular o erro}}) -


Isso parece bastante complexo em primeiro lugar - não ajudou a falta de recuo este plugin de código - mas você verá como é fácil quando chegar a um exemplo do mundo real.

Flickr AJAX API

Neste exemplo, vamos pegar as etiquetas associadas à pós WordPress atual 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 full AJAX. Embora esta seja uma forma válida de fazer as coisas, se você sabe que está indo só para obter dados JSON para trás, sinto que aprender o método AJAX real é mais importante, então é assim que vamos fazê-lo.

Em primeiro lugar, um acima single.php e vamos tentar fazer eco fora uma vírgula lista separada simples das tags posto atual. Normalmente, você usaria the_tags () para fazer isso, mas isso não é bom como nós queremos, eventualmente, armazená-los como uma variável, enquanto the_tags () ecoa-los para fora pré-formatado. Em vez disso, usaremos get_the_tags ():

lt;? php$ tagslist = get_the_tags()-para cada($ tagslist Como $ tag){eco $ tag-gt;nome.","-}?gt;

Isso funciona muito bem, por isso vamos saída isso dentro de uma solicitação AJAX para a URL API Flickr como segue (note, esta é uma imagem - a fim de preservar o recuo, o código está disponível no Pastebin).

Neste ponto, tudo o que faz que a saída para o console do navegador, ou alertar uma mensagem de erro se houver um. Para realmente fazer alguma coisa com os dados retornados, adicione algum lugar para que as imagens colocadas:

Video: jQuery & Ajax: Build A Github Finder App

lt;div identidade="flickr"gt;divgt;

E editar o sucesso parâmetro da chamada AJAX para iterar sobre o Unid que são devolvidos.

$.cada(dados.Unid, função(Eu,item){E se(Eu==3) Retorna falso- // parada quando temos 3$("#flickr").acrescentar("+item.ligação+"">

Artigos relacionados