Aprenda jQuery AJAX em 1 hora | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

13 aulas (1 h 9 min)
    • 1. AJAXjquery1hr

      1:32
    • 2. 1 Introdução ao AJAX com jQuery

      2:53
    • 3. Recursos de curso 2 e aplicativos

      5:38
    • 4. 3 jQuery Carregue arquivo externo na sua página da Web AJAX

      6:51
    • 5. 4 objeto de solicitação de dados de retorno de chamada jQuery

      5:37
    • 6. 5 atualização do jQuery

      3:46
    • 7. Método 7 AJAX com jQuery

      4:14
    • 8. 8 Use o JQuery AJAX para retornar dados JSON dentro do JavaScript

      3:50
    • 9. 9 Obtenha dados do JSON com AJAX

      6:44
    • 10. 11 AJAX para enviar e receber dados

      10:52
    • 11. 13 ajustes e dicas para AJAX

      4:10
    • 12. 15 AJAX connect to web API obter dados em HTML

      6:33
    • 13. 17 jQuery AJAX conclusão de curso

      6:27
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

251

Estudantes

--

Sobre este curso

Aprenda jQuery AJAX em 1
hourGuide para começar a usar o jQuery para fazer conexões contínuas com fontes de dados externas
e
APIsAJAX pode carregar dados de arquivos externos e em JavaScript sem recargas de página. jQuery
torna fácil trabalhar com AJAX fornecendo métodos poderosos para chamadas AJAX. AJAX é uma habilidade essencial
para o desenvolvimento da web moderna.

AJAX (JavaScript assíncrono e XML)

Com o AJAX, aplicativos da web podem enviar dados e recuperar dados de um servidor em segundo plano.
AJAX permite que páginas da Web alterem o conteúdo dinamicamente.

Carregue conteúdo de arquivos externos, carregue dados JSON e use os dados dentro do JavaScript.


O JavaScript é usado para reunir essas tecnologias para criar experiências incríveis do usuário, com
dados JSON e elementos da web. O jQuery é ideal para fazer chamadas AJAX simplificando o código e facilitando a criação.

Este curso foi projetado para começar rapidamente com...

O código de código de fonte de
treinamento passo a passo, incluí-lo para si
yourselfresources e mais
vinculativo que você precisa para trazer AJAX para seus aplicativos da web
de um instrutor com mais de 18 anos de experiência de desenvolvimento da
experienceexplore dados JSON dentro da web
APIsAJAX é uma habilidade essencial para ter, aprender a usar AJAX vai trazer seus aplicativos da Web para o
próximo nível.

Estou aqui para ajudar você a aprender sobre AJAX e pronto para responder a quaisquer perguntas que você possa ter.

Comece com o AJAX agora e veja o que você pode fazer.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. AJAXjquery1hr: Jax pode carregar dados de arquivos externos e em JavaScript sem recargas de página. J. Curry torna o trabalho com Ajax fácil, fornecendo métodos poderosos para chamadas Ajax. Ajax é uma habilidade essencial para o desenvolvimento moderno da Web. Os jocks é abreviação para JavaScript assíncrono e XML, com aplicativos Ajax Web consentem dados e recebidos de dados de um servidor tudo em segundo plano. Ajax permite que páginas da Web alterem o conteúdo, carreguem dinamicamente conteúdo de arquivos externos, carreguem dados do Jason e usem esses dados dentro de seus aplicativos JavaScript. JavaScript é usado para reunir essas tecnologias para criar experiências de usuário incríveis com Jason Data e elementos da Web. J. Curry é ideal para fazer chamadas Ajax simplificando o código e facilitando a criação . Este curso reúne J. Corey e Ajax e mostra como usá-lo. Fonte de treinamento passo a passo. O tribunal está incluído, então você pode tentar por si mesmo. Recursos e conversas links tudo o que você precisa para trazer um jóquei em seus aplicativos Web. Este é de um instrutor com mais de 18 anos de desenvolvimento Web. Experiência explorado Jason Data dentro Web T ice em muito mais habilidade essencial Ajax para ter aprender a usar um jocks trará seus aplicativos Web para o próximo nível. Estou aqui para ajudá-lo a aprender sobre o Ajax e pronto para responder a qualquer pergunta. Você pode ter começado com os atletas agora e ver o que você pode fazer. 2. 1 Introdução ao AJAX com jQuery: oi e bem-vindo a aprender a usar chamadas Ajax usando Jake Weary. Agora J. Coury torna realmente fácil fazer chamadas Ajax, e chamadas Ajax são incrivelmente simples de criar, e eles fornecem um monte de funcionalidade adicional em seus aplicativos Web. Essencialmente, eles fornecem a capacidade de fazer chamadas de dados contínuas, trocas com arquivos da Web externos, extrair todas essas informações e utilizá-las dentro de seus aplicativos da Web. Então meu nome é Lawrence, e eu vou ser seu instrutor para este curso. E estou tão entusiasmado por ter a oportunidade de apresentar este curso para vocês hoje. Então, dentro deste curso, vamos mostrar-lhe como adicionar preocupação geek em seus aplicativos Web e, em seguida, como carregar dados e conteúdo do arquivo Lord em seu código HTML. Então, simplesmente clicando em um botão, temos acesso a muitas informações da Web através de chamadas do Ajax, e você nos percebe bem, que não há atualização de página, e é uma experiência realmente perfeita para usuários da Web. E como podem ver, este ar, algumas das diferentes aplicações que vamos construir. Então, atualmente, este que vamos começar com e essencialmente isso nos permite carregar conteúdo de arquivo externo diretamente em nosso código HTML. E então eu também vou mostrar a vocês como podemos fazer chamadas e recuperar dados de volta usando o Ajax . Então esta é uma chamada para um arquivo G filho Jason e recuperando de volta, fazendo loop através de todos os dados de resposta, também enviando informações. Então postando no servidor, obtendo uma resposta de volta do servidor. Então, dependendo do que estou colocando aqui, eu posso obter uma resposta de volta, e então eu posso utilizar esses dados de resposta em meu HTML também. Então, há várias maneiras diferentes de fazer essas chamadas. E como você pode ver aqui, essencialmente, esta é a informação que estamos colocando dentro do Jason Format e fomos capazes de trazê-la para um arquivo externo. Além disso, vamos estar olhando para como podemos nos conectar aos olhos do Web AP e puxar essas informações do AP I em nosso aplicativo Web novamente, realmente perfeitamente usando o Ajax e novamente uma vez que você começa a usar o Ajax, é tão incrível tecnologia. É tão fácil de usar. Você vai realmente gostar de usá-lo, e este curso é também obter incluir todos os arquivos fonte Code Resources links para que você, também, pode saltar e começar a criar seus próprios aplicativos Web com Jake Weary e Ajax, e você pode criar seus próprios aplicativos de forma rápida e fácil. Então, quando estiver pronto, vamos começar a criar coisas incríveis com o Ajax. 3. Recursos de curso 2 e aplicativos: nesta lição, eu quero fornecer uma visão geral rápida dos diferentes recursos, links e ferramentas algo e estar usando para executar este curso. Então, para o meu editor, vou usar colchetes. Este é um produto de adobe. É um editor de código aberto. Está disponível entre parênteses. Você está procurando por um novo editor ou para verificar o mesmo que eu estou usando. Então está disponível em parênteses que devo. Então é um produto ah Dobie, e um dos outros recursos é algo para ser usado, a fim de escrever algum código é caneta código I Oh, então este é um site on-line onde você pode digitar algo aqui e você pode realmente ver HTML, CSS e JavaScript e C ele realmente obter renderizado para fora dentro da página. Então, o que quer que eu digite aqui dentro dessa área de código, eu vejo que ele está sendo processado, e este é um recurso realmente útil, especialmente quando estamos nos conectando ao Jason Data e puxando isso dinamicamente em nossa página da Web . Nós podemos ver visualmente a saída, e conforme ajustamos o cabo, podemos ver essa saída mudando também. É outra aplicação. Vou usar o Zam Zam é essencialmente dá-te a capacidade de gerir um anfitrião local. Então é aí que você vê quando eu vou para o meu artigo do navegador da Web, o host local. Isso é porque eu tenho um exemplo em execução em segundo plano, e essencialmente, o que Zampa faz é que ele permite simular um servidor em execução em segundo plano. Então, se você precisa de acesso ao Apache Server ou meu banco de dados de sequelas, você pode facilmente baixar Sam para Windows, Lennix ou Ola Sex e apenas passar pela instalação padrão e ter que estar funcionando em apenas alguns minutos. E isso dá a você um ambiente de desenvolvimento de sandbox realmente bom que você pode experimentá-lo e experimentar diferentes coisas diferentes frio e ver como isso funciona. Eso Esse é um dos outros recursos que eu estou usando também, e eu também estou usando o Chrome como meu navegador, e a razão que eu gosto de usar o Chrome é porque ele tem ferramentas de desenvolvimento para que você possa abrir e inspecionar com controle Shift I em um Windows máquina, e que essencialmente abre esta pequena janela aqui no lado direito agora, e você tem algumas opções aqui para que você possa alternar os diferentes tamanhos de dispositivo. Então, se você quiser simular em um telefone celular, veja como seu site se parece. Você tem essa opção e você tem console. Então, isso lhe dá a capacidade de comunicar informações de volta para este console para que você não precise virar para frente e para trás, e você pode realmente ver essas informações que estão sendo emitidas dentro do log do console do seu JavaScript. E isso é realmente útil porque isso nos permite ver informações que talvez não estejam exibindo para o usuário. Mas podemos ver essa comunicação para frente e para trás. Então outro recurso ou alguns outros recursos que eu vou usar porque este curso vai ser baseado em torno de criar um J. Corey chama e chamar alguns dados externos e acessar arquivos externos. Alguns dos outros recursos que estou usando são o meu Jason Dot com. Então este é um site onde podemos armazenar Jason Files online e obter um U.R.I U.R.I , a fim de acessá-los diretamente. E este é um recurso realmente útil porque ele essencialmente nos dá um ponto interminável para pegar alguns dados e puxá-los para o nosso aplicativo Então, se você está curioso como ele vai parecer Então este é um monte de alguns dados fictícios que foram gerados em formato adjacente, e vamos puxá-lo para a nossa aplicação enquanto trabalhamos através do curso e estes dados gerei a partir de Jason traço gerador ponto com. Por isso dá-lhe a capacidade de gerar um monte de dados fictícios. E então, é claro, você pode utilizar esses dados e colocá-los em seus aplicativos. Então outro recurso que vou usar também é Jason Placeholder. E este é outro recurso que lhe dá um endpoint, um arquivo Jason, essencialmente outro arquivo que podemos pegar no arquivo on-line e puxá-lo para o nosso aplicativo. E por último, claro, vamos usar o G Query porque seu curso é baseado em criar chamadas Ajax com preocupações com Jake. Então precisamos trazer o J Query Library em nossa aplicação. E para aqueles de vocês que estão familiarizados com Jake cansado Essencialmente, J. Khoury é uma biblioteca JavaScript, e na verdade torna seu javascript muito mais fácil com sintaxe mais simples e personalizada. Ele permite que você execute a funcionalidade JavaScript muito mais fácil, rápido e com menos código que você tem que escrever. E esta é uma das razões pelas quais muitos desenvolvedores da Web se voltam para Jake Worry quando temos chamadas do Ajax. Porque as chamadas Ajax são uma das funcionalidades mais simplificadas que temos dentro de J. Query. Ele realmente simplifica muito desse JavaScript que normalmente teríamos que escrevê-lo para fazer nossas chamadas Ajax. Então nós vamos pegar biblioteca Ajay Kori, puxá-lo para o nosso aplicativo, ou você pode ir para um j coury dot com e baixar Jake preocupado e acessá-lo localmente também. O Eso. De qualquer forma, você está recebendo a biblioteca de consultas G para obter acesso a ela. Então temos toda essa maravilhosa funcionalidade de taxa de Jake. Então, na próxima lição, vamos começar a escrever algum código, e eu vou mostrar a vocês o quão fácil é fazer chamadas Ajax e trazer alguns dados para seus aplicativos via J. Então vamos começar a próxima lição 4. 3 jQuery Carregue arquivo externo na sua página da Web AJAX: nesta lição. Quero mostrar-lhe como podemos trazer J. Coury para o nosso projeto e fazer a nossa primeira chamada para o Ajax. E vamos acessar um arquivo externo e trazer essas informações para nossa aplicação web . Então vamos até as bibliotecas hospedadas no Google, pegar a Biblioteca J. Corey, e eu já criei uma página HTML em branco. Então nós vamos deixar isso em, e eu não vou me preocupar com toda essa formatação HTML foram estritamente olhar para scripts, e eu vou adicionar em elementos html conforme necessário ao longo das diferentes lições do curso porque eu queria focar o conteúdo deste curso estritamente em fazer nossas chamadas Ajax com Jake cansadas e manter essa funcionalidade dentro das lições do curso. Então, tendo dito tudo isso, eu preciso ter algum html aqui para ter alguns contêineres e alguns elementos interativos dentro do meu HTML. Então eu vou criar um botão aqui, e eu vou apenas dar-lhe um simples Ele vai ter um diff aqui como um botão e eu vou chamá-lo de Click Me para que isso é algo que podemos clicar para iniciar a funcionalidade de consulta RJ para fazer carregando conteúdo em nossa página web. E também precisamos de um recipiente toe realmente para fora colocar algum conteúdo em nosso código HTML Então nós realmente vemos algo acontecendo quando clicamos no botão com RJ Query. E também vou acrescentar mais uma coisa aqui. Então eu vou adicionar, Ah, hiperlink aqui, e eu vou ligá-lo a lugar nenhum agora. E eu vou colocar a carne de cliques dentro disso para que agora, sempre que formos para a nossa página web, nós a atualizamos. Temos um botão clique em mim e estamos todos prontos para ir toe adicionar algumas funcionalidades adicionais em nossa aplicação. Então a primeira coisa que eu quero fazer com RJ Query é criar um ouvinte de eventos e com preocupação geek, isso é realmente fácil de fazer. Então, mesmo que você não esteja familiarizado com a consulta G, vai ser muito simples. Então, a primeira coisa que precisamos fazer é realmente acessar são elementos dentro do nosso html. Então nós temos uma idéia do meu bt e e da mesma forma que fazemos CSS podemos acessar esses elementos Então nós fazemos uma conexão lá com esse elemento e podemos adicionar alguma funcionalidade e, na verdade, eu quero acessar o hyperlink dentro do meu bt E então eu vou adicionar um lá para o texto âncora. E este é o mesmo formato que usaríamos se estivermos usando CSS. Então, a mesma ideia. E este é o que um dos grandes motivos que gostaríamos de usar J Query é porque faz muito sentido quando desenvolvemos nossas aplicações que tudo é familiar, mesmo que você nunca tenha usado padaria antes. Então, essencialmente aqui temos um clique de botão. E outra coisa que eu quero fazer é evitar o padrão. Portanto, este é apenas um método para evitar a ação padrão dentro desse hiperlink. É por isso que eu quero incluir um hiperlink para que possamos mostrar que estamos removendo esse método padrão. Às vezes, os desenvolvedores da Web não removem isso no, e isso é algo que deve ser removido. Se você está usando hiperlinks, é por isso que queria jogar isso no eso. Por último, vamos apenas saída para o log do console e vamos dizer clicado para que possamos dar uma olhada rápida no console e ver que nós realmente clicamos no botão e algo está acontecendo e estamos prontos para ir com a nossa chamada Ajax. Então, vamos atualizar a página. Clique nele. Agora vemos clicado. Portanto, não importa quantas vezes eu clique nele Nós continuamente são clicados dentro deles, então estamos todos prontos para começar a carregar alguns dados em nossa página web. Então agora vamos criar um U R l aqui e este seu URL é o que vamos usar para carregar essa informação. Então vamos chamá-lo de Earl Variável e eu preciso de algum conteúdo para carregar . Então, por enquanto, eu vou criar um arquivo de texto separado, salvar que criar um novo arquivo de texto separado, e eu vou colocar alguma formatação html aqui. Então, olá, mundo. Então nós temos nossa formatação html e nós apenas chamamos de texto de teste. Então nós temos um arquivo de texto lá que vamos carregar no texto de teste. Então agora estamos todos prontos para carregar essa informação na nossa página web. Então, você está pronto para você criar sua primeira chamada Ajax e eu vou mostrar-lhe o quão fácil é com uma consulta. Então este vai ser literalmente o código mais rápido que você já fez com um monte de funcionalidades embutidas nele. Então, simplesmente aqui, o que estamos fazendo, estamos essencialmente carregando esse conteúdo. Então, o que está acontecendo dentro desta linha de frio? Então este é o único a dar uma olhada nisso. Estamos nos conectando, Teoh. Esse elemento aqui chamado I D nossa saída e estamos colocando isso aqui dentro deste parâmetro, e estamos carregando, que é na verdade a chamada Ajax. E estamos carregando um ano, Earl. Então isso vai ser esse valor aqui, então vamos verificar isso e ver o que acontece. Então, agora, quando eu clico, vemos que obtemos esses dados carregados em nossa página web e você pode ver aqui sempre que entramos em nosso código-fonte, temos toda essa formatação. Então nós temos tudo isso cada um mundo Olá, cada um carregado diretamente em nossa página web. E agora se eu voltar aqui e se eu atualizar isso para ter mais texto e qualquer coisa, eu posso voltar para a página da Web e eu posso simplesmente clicar nela e notar que eu não atualizei a página porque o JavaScript real nesta página não mudou. É apenas o arquivo de origem que foi alterado. E cada vez que eu clicar no botão aqui estavam recarregando o conteúdo da página. Então é por isso que eu não tive que fazer uma recarga de página mesmo que eu alterei esse conteúdo lá dentro do arquivo de texto para que eu pudesse adicionar ainda mais informações. Volte aqui para fora. E toda vez que eu clicar nele, ele vai carregar a última versão desse conteúdo dentro do arquivo de texto de teste de texto. Então, a próxima lição eu vou mostrar a você mesmo mawr interação incrível que você pode criar com Jake Worry e carregar informações em seus aplicativos Web. Tudo isso está chegando na próxima lição. 5. 4 objeto de solicitação de dados de retorno de chamada jQuery: a lição anterior. Vimos como o método de carga funciona na consulta G e essencialmente nos deu estabilidade toe carregar algum conteúdo diretamente em um elemento dentro da nossa página web. E foi muito fácil de fazer. Então vou mostrar-vos algumas opções adicionais aqui que podemos ter dentro do Senhor. Então, primeiro de tudo, vamos tentar o então novamente com o carregamento de outro arquivo externo. Então eu criei um arquivo PHP rápido. Essencialmente, isso só vai mostrar a data da data atual no tempo. Então vamos passar para o nosso arquivo de índice atualizar este para ser PHP e agora ir para a nossa página Web. Refresque-o. E nós tivemos que atualizá-lo porque nós mudamos isso. O conteúdo do script lá. Então estamos carregando no teste dot PHP. Então agora toda vez que eu carrego, eu estou realmente carregando para testar o PHP, e é aí que nós somos capazes de ver que ele está ajustando. A hora está sendo atualizada à medida que eu clico nele. Então esta é uma funcionalidade realmente incrível, e na verdade, você pode retirar até mesmo informações adicionais sobre essa carga, então não estamos limitados a Onley retirar esse conteúdo exato. Temos informações onde podemos obter status no Salon. E isso é realmente útil quando fomos voltados para trás, algo como, nós temos nossa resposta. Então eu vou chamar esse texto de resposta de nozes. Eles vão fazer o status aqui. Então isso é apenas dentro dos argumentos da função e onde ainda estavam passando sobre o mesmo parâmetro da URL, Mas nós estamos realmente retornando. Temos algumas funcionalidades de retorno de chamada aqui dentro de nosso Senhor. Então vamos dar uma olhada e carregá-lo para fora no console para que possamos dar uma olhada melhor nas informações que estão sendo retornadas aqui. Então, temos uma mensagem de resposta. E a razão pela qual eu chamei de texto de resposta é porque, essencialmente, ele vai carregar o texto respondido que está disponível dentro dessa página da Web. Então, estamos colocando a data atual ali, então vai carregar tudo isso dentro e depois. Nós também temos status, então ele pode querer dar uma olhada em nosso status e ver qual é o conteúdo do que é também. Então vamos para o nosso navegador e dar uma olhada. Uma olhada mais de perto nisso. Agora, quando clicamos em mim, ainda estamos fazendo a ida e volta para o servidor. Então, estamos recebendo essa funcionalidade clicada. Mas aqui temos o nosso texto de resposta. Então, quando eu vejo o conteúdo lá estava realmente colocando esse texto de resposta lá. E aqui temos o status de puxar para trás o status de sucesso. E isso é realmente útil. Se você quiser um dedo do pé carregar essa informação e utilizá-la em outros formatos que não realmente carregá-la em um elemento, você poderia pegar essa mesma informação que parece conteúdo que está sendo retornado e carregado aqui, e você poderia fazer uso dele de outras maneiras também. Então, agora que você o tem dentro de seu JavaScript, você pode utilizá-lo. E outra coisa que você pode fazer tão bem quanto a do. Você pode verificar para ter certeza de que nossa chamada foi bem sucedida, porque isso também é importante para verificar se ela foi bem sucedida no caso de obtermos alguns erros e podemos registrar esses erros. Poderíamos emitir informações se houvesse um ar e assim por diante. Então isso é muito útil. Então isso está tudo contido nessa chamada de volta, e na verdade há até mesmo informações Mawr que podemos obter no retorno de chamada. Então vamos finalmente deixar mais uma discussão. E realmente, no final do dia, realmente não importa se você chama esses ABC ou se você chama de status de texto de resposta X h r s. Oh, isso é apenas os argumentos que podemos usar dentro do nosso JavaScript. Para chamar de volta essa informação do objeto. O último é X Hr. E isso está retornando todo esse objeto callback eso. Isso vai conter toda essa informação e muito mais. Então deixe-me mostrar-lhe o que recebe saída. Agora, sempre que fizermos isso, clique em mim. Temos a mesma informação que procurávamos antes. Mas temos esse objeto sendo devolvido. E se você está familiarizado com fazer uma chamada Ajax em JavaScript, você vai estar familiarizado com isso. E isso é a mesma coisa quando estamos fazendo dentro do nosso JavaScript, o objeto de solicitação http XML. Então você vê, nós temos todas essas coisas que nós estaríamos esperando aqui para que possamos executar uma função se nós temos feito isso após a conclusão, enfraquecer, fazer o cabeçalho da solicitação. E muito mais, então tudo isso está contido nessa resposta. Objeto? Ah, nós também podemos ver nossa resposta Texto aqui nós podemos ver que estão prontos. Estado essencialmente passa por diferentes estados prontos. E sempre que obtemos essa informação de objeto, podemos produzir isso e podemos utilizar isso também. E lá temos o nosso sucesso. Temos nosso status, então recuperamos os códigos de status. Assim, com o código estático, essencialmente 200 significa que a página da Web foi acessada com êxito. 404 significa que a página não foi encontrada. 500 indica um erro de servidor e assim por diante. Então, esses números de erro típicos que você estaria esperando quando você tem alguns problemas com a conexão ao seu aplicativo Então tudo isso é retornado dentro da chamada de volta, e, claro, agora você pode utilizá-lo dentro do seu aplicação web. 6. 5 atualização do jQuery: nesta lição. Quero terminar com o nosso Jake Worry que estávamos olhando mais cedo com a carga J Korean . É muitas vezes com G. Koury. Você quer ter certeza de que o Dom está realmente totalmente carregado. Então você usa. É aí que usamos documento ponto pronto. E é aqui que configuramos a função para ter certeza de que o Dom está totalmente carregado. E depois iniciamos a nossa preocupação com o Jake. Então eu queria envolver a funcionalidade de consulta J com a função pronto documento, bem como eu também quero dar uma olhada e ver qual era o valor do sucesso do status. Então, se nós realmente retornamos um status de sucesso, então talvez eu queira fazer algo diferente do que se eu realmente puxasse um erro desse status. Então temos um número de maneiras diferentes que podemos realmente atualizar e ver essa informação dentro desse objeto, podemos verificar para ver o status dentro do nosso X h r, bem como o status dentro do status apenas. Então, ambos são os mesmos, então podemos fazer uma declaração condicional aqui e apenas garantir que, se realmente precisássemos dessa carga de dados e isso fosse uma parte vital da nossa aplicação, queremos ter certeza de que estamos verificando para ver se o status é igual a 200. Então esse é o valor que está sendo retornado. Então deixe-me dar outra olhada nisso e, na verdade, os status de sucesso. Mas também podemos procurar status no ex, um pote de 200 para que ambos possamos procurar o status de sucesso. Ou podemos olhar para x, h r status ponto e ver se temos um valor de 200 eso. Agora que sabemos que o status é sucesso, então podemos produzir algo, talvez na área de saída. Ou podemos acrescentar a isso iria colocar área para que pudesse fazer algo assim e para upend. E aqui podemos adicionar algumas informações, então funciona. Então, só assim. Então, agora vamos tentar a mesma coisa. Clique nele e vemos que temos anexado com ele funciona porque fomos realmente capazes de acessar que u R l Então eu deveria colocar em uma quebra de linha. Eles são tão apenas atualizar o código um pouco. E também vou mostrar o que acontece se, no caso de o arquivo estar errado. Então o que vai acontecer aqui é que nós realmente lançamos um erro e vemos que temos todas essas informações. Estamos lançando um erro. Então precisamos ter certeza de que estamos contabilizando essa mensagem de erro e então poderíamos cuidar e poderíamos carregar talvez algo diferente dentro dessa saída. Então, se ou talvez nós podemos apenas fazer algo assim se o status é erro do que Kara ou algo assim. Então isso é apenas para a experiência dos usuários de modo que quando eles clicam e nós estamos esperando algo no dedo do pé carga no caso de algo dar errado lá nós realmente temos algum tipo de mensagem e algum tipo de informação para o usuário saber que eles realmente tinham clicou nele e algo deu errado. Então é assim que você pode criar seu carregamento de dados usando qualquer chamada de Jack. E na próxima lição, vamos olhar mais fundo em jacaranda, Ajax e todas as possibilidades incríveis que estão disponíveis para acessar arquivos. Então isso está chegando no próximo conjunto de lições 7. Método 7 AJAX com jQuery: dentro desta lição, vamos olhar para outra maneira de fazer uma chamada Ajax. Então, nas lições anteriores, analisamos o carregamento de dados e não tínhamos muito controle sobre os diferentes métodos e até mesmo o envio de dados e assim por diante. Então não tínhamos muito controle sobre o que estava acontecendo? Então nós podemos realmente atualizar isso facilmente, e eu vou atualizar isso para ser uma chamada Ajax, que vai nos dar muito mais controle sobre nossa saída e o que fazemos com as informações estavam recuperando em vez de fazer uma carga ah. Vamos usar um método construído dentro do Jake Worry. E este é o método Ajax. E esta é uma maneira muito fácil realmente funcional de fazer um monte de coisas com apenas algumas linhas Accord. E essencialmente, o que vamos fazer é ligar para o mesmo arquivo de texto que vimos anteriormente. Vou me livrar disso porque temos alguns cônsules extras lá e assim por diante. Então eu vou ligar para isso você, Earl, o texto de teste você Earl e agora dentro dos parâmetros, temos algumas opções adicionais para que possamos verificar se nosso método que estava retornando é um sucesso. E se for, então podemos disparar uma função para esse método de sucesso e podemos retirar algumas informações. Alguns retornam informações dentro do valor dos dados. Então eu vou apenas consola dados de log dentro do sucesso. E também vimos que na lição anterior podíamos lidar com erros, mas isso não era realmente ineficiente. bem, porque estamos lançando um monte de erros dentro do nosso painel e assim por diante. Então, com a chamada do Ajax, nós realmente temos um jeito. Teoh procurar um erro específico. Então, se conseguirmos um ar, então podemos executar nossa função de erro. Então vamos fazer a mesma coisa que fizemos aqui em cima, onde estamos em sucesso onde nós puxamos de volta esses dados e nós vamos apenas produzir dados e isso poderia muito bem apenas fazer algo como aqui onde poderíamos colocar isso e este . Talvez nós apenas colocar que ele funciona, e agora eu posso realmente me livrar de um monte disso que nós temos sentado aqui, nós mantemos a funcionalidade do botão e assim por diante, e eu vou apenas fazer com que pareça um pouco mais apresentável. Há Então agora estamos prontos para ir para tentar o lado no navegador. O que você acha que vai acontecer aqui quando fizermos nossa conexão com o mesmo arquivo de texto ? O que você acha que vamos ver dentro do console e assim por diante. Então vamos dar uma olhada em nossa aplicação. Atualize-o, clique nele. E agora vemos que retiramos esse html e vemos que temos toda essa informação de resposta aqui e estamos obtendo saída, obtemos trabalhos. Então, se fôssemos atualizar isso e criar um link inexistente de arquivo para um arquivo Então, quando eu clicar nele, vemos que temos a mesma coisa acontecendo lá. Mas obtemos todas essas informações de objeto sendo retornadas. Então obtemos isso não encontrado e obtemos as informações do objeto sendo retornados dentro dos dados. E isso é interessante porque agora podemos fazer uso disso. E podemos realmente encontrar oito o que é o texto de status. E se não for encontrado, talvez possamos gerar esse status, texto e assim por diante. Então eu tenho um monte de opções aqui dentro que os dados retornados, então eu poderia tão facilmente em vez de apenas escrever erro, eu posso contaminar mais e fazer algo como dados e fazer nosso texto de status. Então, agora, a fim de criar uma melhor experiência de usuário, nós estamos realmente recebendo esse texto de status sendo retornado de volta da chamada de Jack. E também podemos utilizá-lo e vemos que o nosso valor de ar de status é 404 Então, essencialmente, sabemos que isso significa que a página não foi encontrada. E é assim que você pode lidar com erros usando a chamada Jacks. E com o Ajax, com esse método Ajax, temos muito mais opções, então vou mostrar a vocês que estava nas próximas lições. 8. 8 Use o JQuery AJAX para retornar dados JSON dentro do JavaScript: então a lição anterior que introduzimos o Ajax, e com o Ajax há na verdade muitos parâmetros diferentes que podemos usar. Então vimos que o sucesso e o erro em um formato de objeto. Então temos sucesso. E se você estiver familiarizado com objetos JavaScript, então nós temos a chave aqui, e então nós temos o valor aqui. Então, essencialmente, a chave. E o que acontece quando pegarmos a chave? Então vamos fazer a mesma coisa com o conde. Vamos tirá-lo de sentar. Eu citaria esse colchete encaracolado, e nós vamos especificar o u Out U R L assim como faríamos qualquer outro objeto aqui dentro da pedreira RG . Então, essencialmente, movendo-o sobre, podemos listar todos os valores de objeto diferentes aqui também. Então, se eu quiser especificar um método, eu posso especificar. Então sabemos que existem dois métodos diferentes. Há ou get ou post, então eu posso especificar que este método em particular vai ser get. Também podemos especificar o tipo de dados, modo que o tipo de dados que estamos esperando de volta, então, se estamos apenas esperando texto de volta, podemos especificar o texto que estamos recebendo texto e muito mais. Então agora vamos dar uma olhada no nosso Ajax chamado Click the Button e vemos que não muito mudou , mas na verdade ele realmente mudou isso. Agora podemos especificar onde eles estavam fazendo get ou post, e podemos fazer algumas funcionalidades adicionais também. Outras coisas, antes disso, não fomos capazes de fazer isso. Nós somos capazes de fazer agora. Podemos especificar um método. Então aqui estamos ligando para o nosso arquivo txt de ponto de teste. Mas se estamos olhando para postar lá, então provavelmente não precisaríamos necessariamente fazer isso com este arquivo de texto. Mas só para mostrar que sempre que eu atualizá-lo, tudo funciona da mesma forma, e nós também porque estamos especificando o método. Também podemos ligar para Web Buehrle e retirar essa informação. Então aqui está em um P I aqui e isso é o que nós não somos capazes de carregar isso, como estávamos olhando anteriormente. Se tentássemos carregar o dedo do pé nesta teia, você é l. Ele falharia. Mas agora porque estamos especificando que estamos usando E Jackson, temos um pedido get completo e estamos esperando tipo de dados e assim por diante. Então, agora, sempre que eu clicar nele, vemos que nós somos realmente capazes de retirar essas informações para que também possamos alterar esse tipo de dados. Então sabemos que esta fonte arquivou aqui. Este é Jason Data. Então, em vez de formatar e recuperar texto de volta, vamos mudar isso para Jason e ver o que acontece. Então agora vimos mais cedo, sempre que clicávamos, recuperamos o conteúdo daquela garota, e está tudo dentro de um valor de string. Então, é claro que você poderia analisar isso e utilizá-lo como Jason. Mas, na verdade, por que não puxá-lo de volta como Jason se opõe? E então agora esses objetos são utilizáveis dentro do nosso aplicativo para que possamos realmente loop através destes e parsnips e obter essas informações em nossa página da Web. Eso Este é o lugar onde todos esses detalhes mais específicos da nossa chamada Ajax realmente vêm em útil porque agora temos a capacidade de especificar métodos de tipos de dados, bem como nós também temos a capacidade de enviar dados mais e muito mais. E nas próximas lições, vou mostrar a vocês sobre essa chamada do Ajax e como trabalhar com ela. e, em seguida, também como trabalhar com esses dados que estamos captando dentro da nossa chamada Ajax. Então, tudo isso está chegando no próximo conjunto de lições. 9. 9 Obtenha dados do JSON com AJAX: na lição anterior, vimos como podemos retirar alguns dados do Jason e enviá-los como objetos JavaScript de data. E agora podemos utilizar esses objetos e realmente colocá-lo em nossa página web. E isso vai ser uma funcionalidade realmente útil que você vai descobrir que é realmente muito fácil de trabalhar, bem como há muito que você poderia fazer com extrair todos esses dados e acessar diferentes pontos de extremidade para obter mais dados e informações. Então vamos voltar ao nosso editor. E agora que retiramos todos esses dados dentro de nosso objeto de dados agora vamos fazer uso deles . E em tipicamente com JavaScript, nós poderíamos fazer um loop através dele. Mas J Corey realmente tem um construído em funcionalidade construído em método que nos permite olhar através dos dados. Então nós só precisamos especificar esse objeto de dados em particular, e então podemos especificar uma função. E primeiro nós vamos pegar uma chave, e nós também vamos pegar um valor de índice como nós percorremos cada um. E o que eu posso fazer é que eu posso realmente registrar o cônsul a chave e o índice para que você possa ter uma idéia melhor de onde, na verdade, quais informações estavam captando enquanto estamos fazendo loop. E então também depois, eu vou mostrar a vocês como podemos realmente colocar essa informação e utilizá-la dentro desta área de saída quando eles são HTML. Então vamos dar uma olhada mais de perto no que realmente está sendo produzido aqui e em loop através dele. E vemos que, em primeiro lugar, o primeiro valor que recebemos. Aí está a chave. Então, essencialmente, este objeto em particular. Este é o primeiro item do objeto, Torri, e temos uma chave de zero. E então temos toda essa informação do objeto. Então, se quisermos fazer uso dessa informação do objeto, digamos que queremos obter esse endereço de e-mail desse usuário. Vamos voltar para aqui e sabemos a forma como os objetos funcionam dentro da consulta G para que pudéssemos fazer algo como temos o índice, que é esse objeto inteiro. E se fizermos o índice de e-mail, vamos agora ver o que acontece quando o atualizamos. Então vemos que recebemos de volta todos esses endereços de e-mail, e agora é Azizi está apenas manipulando nosso conteúdo e atualizando o que realmente queremos fazer com esse conteúdo enquanto olhamos através dele. Então, talvez, por exemplo, queiramos adicioná-lo aos nossos valores de saída. Aqui está para que pudéssemos fazer algo como esta atualização que mudou para fora. E agora vamos dar uma olhada no nosso navegador. E agora, quando clicamos, listamos todos esses endereços de e-mail, então também podemos fazê-lo de várias maneiras diferentes também. Então sabemos que a maneira que a chave funciona é que podemos retirar esse objeto de dados. Então, se fôssemos fazer algo como dados e ter o valor chave dentro dos colchetes Então o que você acha que vai acontecer aqui sempre que clicarmos no botão e percebermos que mais uma vez, estamos recebendo todas as informações do objeto ? Então, realmente, a mesma coisa que estávamos fazendo antes nós poderíamos fazer algo muito parecido aqui onde poderíamos fazer algo como e-mail chave. E agora vamos dar uma olhada no diário do cônsul. Clique nele novamente. E o interessante é que voltamos ao mesmo ponto que parecia informação. Então, realmente, existem diferentes maneiras de acessá-lo. Provavelmente a melhor maneira é fazê-lo visualizar o objeto aqui através do objeto index. Mas de qualquer maneira, você poderia fazer isso. O que quer que faça mais sentido para você, você poderia fazê-lo através da chave, bem como acessar aquele dia inteiro, o objeto e a chave do fazer, mas dentro desta instância estavam passando sobre essa chave de dados individual para o índice e nós podemos fazer uso dele. Então, qualquer um vai funcionar da mesma maneira e podemos manipular uma atualização. Nosso eu colocaria em um número de formatos diferentes tão tipicamente, porém, que você verá que estamos usando que cada objeto que acabamos de criar e estamos acessando essa informação de objeto dentro desse formato, bem como eso outras maneiras para produzir essas mesmas informações. E se você estiver familiarizado com objetos JavaScript, sabemos que também podemos fazer aspas como esta e podemos realmente retornar a essa mesma informação. Então, agora, sempre que vamos clicar nele, vemos que agora estamos obtendo listado três vezes porque todos esses três valores serão equivalentes. São todos iguais. Todos eles contêm essa mesma informação, apenas diferentes maneiras de acessá-la dentro de objetos JavaScript e também querem saber também que o que quer que estejamos fazendo esta versão citada com colchetes, então nós também podemos fazer esta dinâmica também. Então, podemos criar valores diferentes aqui dentro do objeto dentro deste método, e podemos fazê-lo mostrar dinamicamente também. Então temos uma série de itens e assim por diante. Podemos realmente começar a utilizá-lo dentro deste tipo de funcionalidade, que não podemos fazer quando estamos apenas fazendo o período de índice no nome do índice. E também quero observar que se estamos puxando de volta como texto do que outra coisa que podemos fazer com os dados é que podemos pegar esses dados e podemos fazer um Jason analisar esses dados E o que Jason Parse dos dados vai fazer é que ele vai realmente transformá-lo em . novamente naquele formato Jason. E este é o Jason Parse, e isso essencialmente nos dá a capacidade de transformar esse valor de string de volta em formato de dados utilizável . Então, agora vamos voltar aqui, e assim vemos que tudo ainda está funcionando corretamente, então isso é outra coisa para cuidar. Então, dependendo de como seus dados estão sendo retornados, se é uma string que você precisa analisar que Jason, se é gansos em formatado, que é ideal que você não precisa se preocupar com esta linha um código. Então este é este é Onley se o seu valor de força pode dados. Então, vou adicionar isso. Então, a próxima lição vamos olhar para ainda mais coisas que podemos fazer usando chamadas Ajax dentro J Query. 10. 11 AJAX para enviar e receber dados: nesta lição. Eu quero mostrar a vocês como podemos realmente postar alguns dados. Então lições anteriores que analisamos, como podemos recuperar informações de uma garota específica e depois utilizá-las dentro de nossa produção . Então agora vamos dar uma olhada em como podemos realmente enviar alguns dados sobre o nosso servidor Web. Então eu vou criar algumas entradas, tipo de entrada, e então quais tipos são texto, e então eu preciso atribuí-lo em I d. Então talvez este poderia ser o primeiro nome ou algo assim e atualizar um 2º 1 e vamos fazer última para que temos duas entradas aqui e apenas fazer um pequeno rótulo rápido aqui. Então nada, não muito html aqui. Mas eso que temos alguns campos de entrada onde podemos realmente pegar algumas informações fora do eso próximo. Vamos ver como podemos converter isso em, um, um, ou um formato melhor onde podemos enviar alguns dados, e nós realmente também precisamos criar uma maneira de pegar essa informação. Então vamos voltar para o nosso arquivo PHP, e eu vou salvar isso como apenas talvez nós apenas chamá-lo PHP dot PHP e eu vou fazer uma atualização do conteúdo aqui. Então o que eu quero fazer é que eu quero ser capaz de pegar essa informação que está sendo enviada sobre s Oh, isso vai ser apenas um aplicativo PHP muito rápido, simples que vai pegar essa informação hospedada. Então note que o método que vamos estar esperando vai ser um post e primeiro nome é o valor que vamos postar também. E vamos verificar se está definido. E se estiver definido, então vamos usar o valor do nome vai ser o primeiro nome. E se não estiver definido, então vamos digitar nenhum nome dado. Assim, não importa o que aconteça, temos algum tipo de valor dentro do nosso nome. E talvez eu vá atualizar isso para primeiro e atualizar este dedo por último e fazer um pequeno ajuste aqui. Então não há último, então não há sobrenome dado. Então agora temos duas variáveis aqui, e vamos também criar alguma variável aleatória. É de algum valor. E este só vai ser S O que esta razão eu estou criando tantas variáveis aqui é que nós precisamos ter algo para produzir dentro do nosso formato Jason. Agora podemos criar outro que podemos criar na re Então este saree vai conter algumas informações e vamos formatá-lo como assim vamos ter um nome. Talvez possamos chamá-lo f nome para estar em linha com essas variáveis e igual a esse valor f nome Teoh F. E depois vamos acalmar um separado. Desta forma, vamos criar uma matriz com um monte de valores que podemos converter para Jason e, em seguida, eventualmente, produzir para nossos consumos de usuários sempre que esse usuário faz uma conexão , então vamos produzir todo esse conteúdo eso Talvez o perdido. Vamos apenas fazer algo como resposta e igualar essa resposta ao valor que temos aqui para que agora tenhamos alguns valores dinâmicos e possamos ecoar. E esta é outra função embutida dentro do PHP. Então temos eco codificação e podemos codificar uma matriz e formatá-lo dentro do formato Jason. Então vamos voltar para o nosso navegador da Web. Dê uma olhada no que vai ser um put dentro deste arquivo antes de se reconectar a ele. Eu vou para PHP dot PHP. Temos uma resposta bem formatada do Jason. Então, já vamos enviar algumas informações e pegar essa informação no servidor. E então vamos abrir nossa chamada Ajax e agora fazer um pouco convertendo isso em postagem. Então eu disse que queremos postar algumas informações, e também queremos enviar alguns dados aqui. Então, em vez de tipo de dados, eu quero atualizar isso de volta para Jason porque é Jason Formatted dados, e nós também queremos postar alguns dados em nosso post. Então, a maneira que os dados são enviados é que está dentro de um formato de objeto, e precisamos especificar esses objetos. Então, estamos esperando f nome para ser o primeiro nome, e podemos pegar essa informação a partir do valor do elemento com o valor de primeiro. Então isso é com J Query, e então nós só precisamos especificar o valor e vírgula separados. E agora vamos fazer outro para o último. E eu também vou repassar isso assim como nós quando terminarmos a chamada para que possamos dar uma olhada melhor no que realmente está acontecendo aqui nos bastidores eso Este é Jay Query, a fim de pegar aqueles que o valor de entrada que está sendo contido aqui dentro e, em seguida também pegar esse valor de entrada que está sendo contido dentro último eso Em seguida, podemos nos livrar desta linha porque nós não precisamos mais dele, e nós também não estamos analisando vários itens. Então, estamos apenas devolvendo os dados do console. E agora vamos dar uma olhada e ver o que está realmente contido dentro disso iria colocar e realmente uma coisa antes que eu esqueça, nós precisamos mudar o u R L para PHP dot PHP. Agora vamos refrescá-lo. Então, agora eu posso digitar um nome aqui, e quando eu clicar no botão, vemos que estamos fazendo a viagem completa. Então nós estamos realmente fazendo uma chamada Ajax enviando esses dados para o servidor, e então nós temos essa informação de resposta do arquivo PHP que acabamos de criar e nós estamos pegando o nome F postado. Então, o primeiro nome colado. Estamos pegando o sobrenome postado e também temos essa informação de resposta que estamos enviando de volta, então estamos obtendo-o dentro de um formato de objeto. Então isso vai ser realmente fácil saída dentro dessa área de saída, então podemos realmente facilmente utilizar essa saída. Então, usando o mesmo formato que tínhamos, podemos criar nossa saída e colocá-la em nossa página da Web, obtendo essa informação de volta, recuperando-a, na verdade do servidor. Então eu vou rapidamente criar todos esses valores aqui, e eu acredito que este foi uma resposta. Então agora vamos dar uma olhada no que realmente está sendo produzido aqui. Então, quando eu clico nele e talvez deva colocar alguns valores padrão, mas vemos que enquanto eu estou atualizando-o, ele está realmente fazendo aquela viagem completa para o servidor. Ele está pegando essa informação, e ele está recuperando como ele está criando um arquivo Jason na extremidade PHP, e nós estamos recebendo essa informação de resposta de volta como um arquivo Jason. Então nós somos capazes de recuperá-lo dentro do nosso JavaScript como um objeto JavaScript, e então nós somos capazes de trabalhar com ele e pegar esses valores, e colocá-lo dentro do nosso HTML. Vamos levar mais um mais perto. Veja exatamente o que está acontecendo aqui, então criamos eso com o arquivo PHP, essencialmente o que ele está fazendo. Sua listagem para um post de um valor para nome F, post de valor para l nome. Tudo o que está fazendo é pegar os valores que estão pegando. Se nada é fornecido que ele cria um valor aqui, cria um valor aqui e saídas ele cria uma matriz e inclui seu raio e o formato adequado para que possamos produzir um arquivo Jason. E como vimos anteriormente, quando fazemos chamadas Ajax, Jason Data é ideal para recuperar essa informação e utilizar essa informação. Então, agora, olhando para o nosso arquivo de índice, criamos algumas entradas HTML. Estas entradas simples de ar. Nós atribuímos ideias a eles. Observe que não há nomes porque não estamos nos submetendo. Essas entradas foram apenas elementos precisam que podemos utilizar para pegar os valores contidos . Eu tenho aquele botão clique em mim, a área de saída que tínhamos olhado mais cedo. Nós temos o link para Jake Worry e então nós temos nossas tags de script estavam esperando a carga do dedo da cúpula aqui, aqui, nós temos o ouvinte de eventos para o botão de clique. Este aqui está especificando o URL que queremos nos conectar e estamos impedindo que os padrões desse hiperlink não seja disparado. E aqui temos a chamada do Ajax. Então o primeiro parâmetro dentro do Ajax chamado. Estamos olhando para trás para pegar o Earl de onde queremos enviar a chamada do Ajax em seguida. Estamos olhando para o tipo, então estamos postando conteúdo porque lembre-se, PHP estava esperando por postagem. Então o método é postar-nos. Estamos postando dados, e aqui temos nosso objeto de dados e notar que ele está formatado em um formato de objeto típico onde temos os valores emparelhados. Então nós temos o nome da chave e o valor real eso temos novamente o nome da chave e o valor E este é o formato que ele envia para nossos arquivos PHP. Essencialmente, isso é o mesmo que fazer nome f. Se tivéssemos nome dentro deste campo de nome f e passaríamos dentro desse mesmo formato , estamos especificando o tipo de dados como Jason porque sabemos que estamos esperando Jason Data e queremos ser imediatamente capazes de trabalhar com isso Jason forma fora de dados. Estamos fazendo um registro de console. Eso este aqui é o que dispara quando fazemos uma conexão bem sucedida onde console logout esse objeto de dados. E aqui estavam utilizando esse objeto de dados porque vimos dentro do console que estamos voltando esse nome f l e resposta dentro do objeto de dados. E tudo o que estamos usando é JavaScript objetos Teoh upend saída, que está disponível aqui. Então, na próxima lição, vamos mostrar-lhe como trabalhar com chamadas Ajax. E assim você alguns ou funcionalidade dentro padarias método Ajax que está chegando na próxima lição. 11. 13 ajustes e dicas para AJAX: nesta lição, quero fornecer uma visão geral rápida de algumas das funcionalidades que analisamos anteriormente. Então vimos que podemos utilizar o PHP. Então, se você quiser experimentar isso em sua máquina local e você não tem um servidor local ah porque, claro, com PHP, não é como o javascript que roda dentro do navegador. Nós realmente sabemos servidor para renderizar escreveu PHP. Então confira Zampa, se você está procurando uma maneira de configurar seu servidor Apache e realmente executar o PHP chamado em suas webs em sua máquina local para tentar todos esses eso aqui, nós mostramos como podemos fazer chamada sobre um arquivo PHP, enviar algumas informações e simplesmente clicando nele e podemos fazer o loop completo todo o caminho ao redor com essa informação. Então eu quero também nesta lição, dar uma olhada mais de perto nos dados que estamos passando. Então eu vou configurar uma variável chamada pessoa e esta variável uma vez que vai ser um objeto, e ele vai conter todas essas informações para a pessoa. Então lembre-se novamente de usar esses colchetes Eu não tenho certeza por que ele não fez isso. Coloque eso os colchetes lá pessoa porque este é um objeto que estamos enviando. Então, o primeiro parâmetro que estamos procurando. Então eu estou essencialmente refazendo esses dados aqui, e eu vou comentar isso, e eu vou mostrar a vocês que nós podemos criar esse objeto de dados. Então, se você estiver procurando Teoh, crie esse objeto de dados, você pode fazê-lo dentro desse peso e inchar se estiver criando dinamicamente e assim por diante. Então aqui precisamos criar um nome. Então, vou dar-lhe um nome de John. Podemos acalmar um separado que thes valores. E este é apenas um objeto JavaScript regular. Então, eu o nome. E temos a única coisa que temos de ter a certeza aqui. São os parâmetros aqui? Esses valores que estavam configurando lá realmente combinando com o que estamos esperando no servidor, e assim certifique-se de que seus valores estão combinando eso Seria típico, como se você estiver enviando qualquer outra informação de formulário, você tem que se certificar de que os servidores realmente escutando essa mesma informação. Então, agora que criei uma pessoa, posso simplesmente fazer algo assim. Atualize isso e atualize. E agora ele não está mais clicando neste formulário. É só passar informações sobre o objeto. E então isso é isso é útil no caso de querermos fazer algumas atualizações para esse objeto para que pudéssemos fazer algo como o nome da pessoa F. Então, como o quê? Nós já trabalhamos com os objetos JavaScript antes. E podemos especificar que o primeiro nome realmente vai mudar. Teoh, qualquer que seja esse valor aqui temos aqui, então ha sh valor e valor eso. Agora vamos dar uma olhada nisso. E agora podemos digitar algo e estamos realmente passando esse valor porque, como sabemos, com objetos JavaScript, podemos atualizá-los eso, mesmo que tenhamos definido. Então talvez tenhamos alguns padrões lá, e eles estão mudando dinamicamente dentro do nosso script. Também podemos atualizá-los a qualquer momento. Desde que esteja a ser actualizado antes de a fazermos ligar para o Ajax, é tudo o que precisamos fazer. Então agora podemos dizer o que quer que clicemos, estamos de volta ao mesmo cenário em que estávamos antes de estarmos passando essa informação e, na verdade, enviando isso para o objeto. Então, uma série de opções diferentes aqui que podemos utilizar e lembre-se novamente, se você quiser configurar o PHP, você precisa ter um servidor local rodando em seu computador ou você pode acessá-lo dentro um site s na próxima lição, Vou mostrar-lhe alguns olhos online onde podemos fazer algumas ligações e obter e recuperar alguns dados de volta. Então isso está chegando na próxima lição. 12. 15 AJAX connect to web API obter dados em HTML: nesta lição. Vamos fazer algumas atualizações de código e conectar-se a uma web. Ap I Então, há uma API Web I em I c e d b ponto com e essencialmente dá-lhe a capacidade de se conectar a um banco de dados piada para que você também possa enviar alguns parâmetros para. Então não tenho certeza se isso nunca funcionou para mim, então não vou me preocupar em enviar o primeiro nome e sobrenome, mas vamos atualizar quantas piadas podemos recuperar e também a categoria de piadas . Então vamos fazer uma atualização para o nosso código-fonte, a fim de especificar primeiro de tudo categoria. Então estamos procurando por uma categoria, e nós vamos atualizar o i d. aqui para gato e também número. Então nós precisamos procurar por um número de piadas. Oh, isso vai atualizar para terminar, hum, para o número e vamos manter esse botão clique na saída para que possamos colocar algumas das piadas. Eso Agora precisamos especificar que você é um de onde estamos pegando essas piadas. Então, este é o que você é, que eu ouvi. Então, basta pegar essa informação atualizar nosso você é l. E assim certifique-se de que ele está formatado corretamente para que não haja espaçamento por lá. E eu também queria acrescentar valor aqui para o número porque estamos ficando dormentes aqui . Assim, com consulta G torna realmente fácil para se conectar com esses valores de elemento. Então v a l podemos nos livrar deste material aqui, e podemos especificar a nossa categoria. Eso o formato da categoria está em um reformato, mas nós não vamos só nós vamos apenas usar esse valor. Lá vou eu definir alguns valores padrão aqui. Então, uma das categorias era nerd eso neste ap I particular Nós temos que ter certeza de que nossos valores estão corretos, que eles estão em linha com as categorias que estão disponíveis. Nós vamos mantê-lo para cima, evitar o padrão, e os dados Nós vamos atualizar isso para obter porque este é um pedido get ou não. Não vamos postar nada. Estamos apenas enviando alguns parâmetros e com get você também pode enviar parâmetros. Então limite dois é o parâmetro que podemos enviar e, hum, hum, criar esse objeto de valor emparelhado e com o parâmetro porque ele é, ele é formatado como uma matriz. Então temos que fazer com que pareça com uma taxa também. Então eu vou criar que uma taxa esses colchetes para o raio e então eu também vou pegar esse valor que temos dentro do gato e disse que não acabou. Então isso vai ser gato agora, enviar essa informação e, por enquanto, eu vou sair ou comentar esses valores. Então vamos, hum, então eu acredito que ainda há algo errado aqui, então vamos dar uma olhada rápida e ver o que realmente está acontecendo aqui. Então só precisamos de um suporte. Há oh, agora vamos tentar o mesmo dentro do navegador. Então temos nossos dois campos aqui. Temos um número nerd de piadas. Podemos atualizar isso se quisermos Clique em mim e recuamos de volta e matriz. Então, vindo desse site, pegamos o raio com cinco objetos diferentes aqui e vemos que cada um desses objetos tem uma piada e também vemos aqui que a categoria, todas as categorias são nerds. Então está pegando essas informações do nosso site enviando-as através de uma chamada de Jack para o site e agora podemos trazer isso a partir desses dados de volta para a nossa aplicação Web . Então, como vimos anteriormente, temos a habilidade de olhar através e analisá-lo. Tudo isso utiliza todas as informações do objeto que estão sendo retornadas dentro desse sucesso. Então vamos trazer isso de volta para onde temos nosso cada objeto de dados. Nós temos uma chave e um valor, e nós vimos que nós podemos pegar e nós podemos produzir esses valores fazendo isso acrescenta. Vou trazer este aqui de volta. E talvez antes de tudo, vamos. Eu dou uma olhada rápida e vejo quais dados estavam voltando. Então os dados são um objeto. Eso temos um valor de objeto, e o valor é onde cada um desses objetos está. Então precisamos ter certeza de que estamos especificando que aqui que estavam recuperando o valor lá e dentro de cada objeto, temos um valor para piada. Então, voltando para os dados que recuperando de volta e nós temos índice, então piada índice deve realmente produzir cada uma das piadas lá. Sel l Vamos abrir o navegador dela e dar uma olhada nisso e ver como isso funciona. Vês, estamos a enviar os mesmos parâmetros. Então talvez queiramos oito piadas e vemos que temos oito piadas separadas carregadas. Tudo o que estamos fazendo é analisar através desse objeto retornado e colocá-lo dentro do nosso HTML. E podemos ver que temos um número de piadas que podemos continuamente puxar para trás. Podemos atualizar a categoria de inchar. Então eu acredito que uma das categorias era Chuck Norris s. Então nós só temos que ter certeza de que estamos sempre utilizando essa categoria correta lá, e estamos enviando os parâmetros corretos e podemos ver uma vez que fazemos isso, então nós realmente obter de volta a informação correta. Então acho que talvez não tenha sido Chuck Norris. Eu acho que havia alguns parâmetros diferentes que foram listados lá. E, essencialmente, é assim que você pode interagir com vários olhos AP. Então eu acho que ele tinha seus casos sensíveis Chuck Norris S. Então agora parece que estamos recebendo algumas informações de volta. Talvez não. Então talvez não haja nada dentro dessa categoria, mas podemos ver que somos capazes de utilizar e acessar esse p I, e isso abre a porta para trazer dados diferentes de várias fontes da Web. Assim, a próxima lição começa como você também, pode praticar o que passamos dentro do curso. Experimente você mesmo e pratique trabalhar com chamadas Ajax e olhos AP que estão chegando na próxima lição. 13. 17 jQuery AJAX conclusão de curso: nesta lição, vamos fazer uma rápida visão geral do que aprendemos nas lições anteriores, e também vou mostrar como você pode praticar e experimentar por si mesmo. Então, na lição anterior, analisamos como podemos nos conectar a uma Web. Api I Então esta foi uma piada aleatória, AP. Eu estava reconhecendo o valor das piadas, peguei isso. Poderíamos fazer nossa chamada Ajax, enviar alguns dados sobre para especificar a categoria que queremos olhar e recuperar essa informação de volta como Jason formatado dados e em conexão bem-sucedida. O que queremos fazer é percorrer os dados de retorno e a razão pela qual eu especifiquei dados como um valor lá é porque você sempre tem que olhar para o que você está recuperando de volta dentro de seu p I. Então vimos que nosso objeto era a rota, mas tínhamos outra variável aqui chamada valor. Então, se eu apenas tentei loop toe através dos vários objetos aqui só tem um objeto porque o objeto ou um está contido dentro do valor. É por isso que precisava especificar o valor dentro desse objeto. Eso valor de dados é por quê? Eu queria dar uma olhada. E é aí que eu realmente tenho esses três objetos raros que estão sentados lá que eu queria loop através do dedo do pé e nós vimos que nós temos todos os valores diferentes e cada um que eu possa voltar retorno piada eu d. informações e da mesma forma que eu saída a piada eu também posso produzir o i d. Então, se eu quiser obter um i d e assim por diante, eu posso produzir quaisquer dados que eu queria vindo do ap Web I e tudo o que eu estou fazendo aqui é im um pendente para o meu elemento de saída, que é apenas aqui em cima fazendo a conexão G Corey para o elemento assim como eu fiz aqui iria conectá-lo ao elemento de entrada, valor e número de entrada I de valor. Então isso é pegar esses valores, colocá-los e atualizar automaticamente o código-fonte, o JavaScript e J. Corey, a fim de torná-lo mais dinâmico e nos dá a capacidade Teoh, que o usuário realmente interaja com o a p I e puxou de volta os dados que eles estão procurando e ver esses dados visualmente dentro que um p I Então nós vemos agora que eu fiz essa atualização rápida e nós estamos realmente fora colocando o i. D. S uma onda. Se eu quisesse mais piadas, eu poderia atualizar que um ondulação e puxar para trás ainda mais piadas. Eu poderia potencialmente deixar este eso em branco o que acontece quando eu deixá-lo em branco? Então, dependendo de novo do que você está trabalhando. Então, aparentemente, este aqui, não podemos sair da Blanca, temos nada de volta. Portanto, sempre certifique-se de que há pelo menos um valor mínimo dentro. Isso é tão dentro desta categoria aqui. Então fique com o nerd. E lá podemos especificar o número de piadas. Então foi isso. Isso é uma taxa, a categoria e o número. Portanto, certifique-se de que você sabe o que esperar dentro de seu array também. E use o cônsul para ver as informações do objeto que você recupera de volta, que torna muito mais fácil de ser capaz de pegar essas informações do objeto e produzi-las dentro do seu trabalho dentro do seu html JavaScript. Então, também quero mostrar a vocês nesta lição como praticar o que passamos nos cursos anteriores com as lições anteriores, e é sempre muito importante dar esse passo e experimentar por si mesmo e ver o que você pode fazer acontecer. Então o que eu vou fazer é transferir o código-fonte que temos usado e colocá-lo em caneta de código e canetas de código Um recurso muito bom para ser capaz de praticar um código-fonte diferente . Então vemos aqui que assim que colocamos esse HTML lá estavam prontos para ir Agora com o Jason Data com o JavaScript, podemos adicionar em G pedrery aqui, salvá-lo, e isso nos dá acesso a consulta J. E agora eu posso simplesmente copiar e colar o código J coury e nós não temos nenhum CSS para que possamos pular através de Ignorar essa parte. E agora, sempre que vejo que vamos ver que clicamos em mim e temos exatamente a mesma funcionalidade que estávamos trabalhando com eso. O que isso faz é que isso lhe dá a capacidade de brincar com ele um pouco. Descubra mais sobre isso. Se você quiser sua saída no cônsul, você pode fazer isso também. Aqui em baixo, há um botão para console e assim por diante e experimente você mesmo. Altere algumas das entradas. As saídas foram testadas. Veja o que pode fazer acontecer. Atualize um pouco desse cabo e faça alguns ajustes. Mesmo tentando se conectar a vários olhos AP no DSI realmente obter uma boa sensação de como você pode trabalhar com chamadas Ajax. E realmente, a coisa boa sobre Ajax causa. Não há atualização de página, e é uma transição perfeita e perfeita com os dados para os usuários do usuário chegando, eles não verão nada realmente acontecendo. Eles só vão ver que é uma experiência de usuário realmente boa, onde eles podem clicar em um botão e obter uma saída acontecendo. Então você pode até atualizar alguns desses CSS onde podemos colocar uma borda. Então, uma escolha tão preta. Então eu quero fazê-lo parecer um pouco mais como um botão aqui batendo e preparação de texto . Nenhum. Então veja que, assim que eu fizer essas atualizações, não deve realmente colocar a polícia dentro desse recipiente médio eso dentro que, mas mas lá dentro e salvar isso novamente. Então, novamente, confira por si mesmo, experimentou e veja o que você pode fazer acontecer usando a funcionalidade J. Corey e Ajax Ajax. E se você precisa adicionar consulta ghee, basta clicar neste ícone aqui. Isso abre a compilação de bibliotecas JavaScript externas. Você pode adicionar rapidamente J coury dentro desta funcionalidade também. E há muitos olhos da Web AP. Essa é uma ótima maneira de trazer conteúdo e criar umaexperiência de usuário boa e perfeita, experiência de usuário boa e perfeita, trazendo dados de fontes externas para seus aplicativos da Web.