Desenvolvimento Web: Parte 12 - Reflexões e Exploração de AJAX

04092023 0958 Desenvolvimento Web a httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 124 04092023 0958 Desenvolvimento Web r Desenvolvimento Web Parte12 Para Refletir 03 Inicio de conversa httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 224 04092023 0958 Desenvolvimento Web Nesta parte vamos explorar o tema AJAX Assista 0 video com os principais topicos sobre o tema e anote suas duvidas Envie suas duvidas no Classroom da disciplina Classroom Atividades Duvidas sobre o contetido interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na segao SAIBA MAIS awe DO oa J Be aH 4 Pia ied a AX Re 4 ae ae Bi hy i ae BS N 7 jf A We ad y de é Si Re t bi i ay ae y Baw ng ae lad a x ical iceman A ae rf E 4 S 57 TA aba ae Fs A J x i pene S i L aS 3 Se el a Le a X a oe x a Vina Sa i le a Fei a a a eS a a r g ve er 4 a Ae ie Py httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 324 04092023 0958 Desenvolvimento Web 1 5 are i ars We awe f ey Tp i i rf y Z 1h a é eis ad rr ee f i LA a a gel Cae a ii ce et a i FNC Paw Cj Os objetivos de aprendizagem desta parte sao Entender a diferencga entre sincrono e assincrono na Internet Usar o JavaScript para fazer chamadas assincronas no servidor Aprender como retornar dados no formato JSON do Flask httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 424 04092023 0958 Desenvolvimento Web aculdad MMPANSTA Desenvolvimento Web Parte12 Para Refletir 03 Conteudo A seguir vamos ao video httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 524 04092023 0958 Desenvolvimento Web bee ee ee qe ge ee ee ee ee ee NEaD Faculdade Impacta Encerramento Encerramento Desenvolvimento Web NEaD Faculdade Impacta Clique no icone ao lado e aproveite para fazer suas anotacdes durante os estudos utilizando o Google Keep httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 624 04092023 0958 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 7124 04092023 0958 Desenvolvimento Web Desenvolvimento Web Parte12 Para Refletir 03 Leitura do texto de apoio httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 824 04092023 0958 Desenvolvimento Web viviwseysevl vues VeVVUVIUIUevvil vuUuUY UUVIUUYD wrauvyeivels PALIVIMUUULY wvwuUVIUUY VVUNVIU ww contetido AJAX Requisigoes Assincronas Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo Vimos como construir uma aplicagao completamente dinamica em relaao aos dados que estado no servidor Mas cada chamada feita no servidor 6 bloqueante ou seja enquanto as coisas acontecem no servidor o navegador fica travado esperando a resposta Através do JavaScript podemos utilizar um mecanismo de requisides assincronas que nao travam o resto do processamento do navegador para obter sua resposta Introdugao Aprendemos a usar as tecnologias que rodam no navegador para construir paginas dinamicas com layout fluido e forte semantica Também construimos uma aplicagao no servidor mais complexa capaz de responder as requisides e criar conteudos dinamicos baseados nos nossos dados A grande limitagao do que vimos é o fato de que apenas uma requisiao pode ser feita por vez para obter ou enviar dados Seja a submissao de um formulario o clicar em uma ancora ou a manipulagao da barra de enderecos ao fazer a requisiao para o servidor o navegador fica bloqueado ou seja nado podemos interagir diretamente com ele ou com a pagina até que a requisicao termine e o resultado seja renderizado na tela Outro problema é que mesmo requisides que vao obter um conjunto pequeno de dados Exemplo uma lista de quatro cursos precisam retornar uma quantidade bem maior por conta do layout do site outros scripts e estilos e outros dados para remontar a pagina novamente Veremos uma técnica em JavaScript para contornar esses problemas encontrados nas estruturas classicas de sites Sincrono vs Assincrono Dizemos que requisides sao bloqueantes no navegador quando ao fazer a requisiao precisamos esperar ela responder para poder voltar a interagir com a pagina Uma consequéncia desse processo que nao podemos fazer requisides deste tipo eimiultanaamanta IIma 4 dienarada anAhe a niitra cam naralaliema da nanhiim tinn Naecca httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 924 04092023 0958 Desenvolvimento Web é executada assim que a anterior termina de executar Mas e se quiséssemos fazer algumas tarefas em paralelo Muitas linguagens de programacao fornecem maneiras de executarmos cddigos de maneira paralela usando multiplas threads processos separados no sistema operacional para a execuao de um programa Porém o JavaScript 6 uma linguagem single thread ou seja ela possui uma unica thread e nao pode abrir outras durante a execugao Para contornar esse problema o JavaScript utiliza um mecanismo para tornar algumas requisig6es assincronas ou seja possiveis de serem executadas em paralelo Conceitos gerais da programacao assincrona sd AJAX A técnica desenvolvida no JavaScript para requisides assincronas recebeu o nome de Asynchronous JavaScript and XML AJAX ou JavaScript Assincrono e XML Essa técnica define as maneiras de ser possivel fazer requisicOes assincronas usando o JavaScript e de como controlalas Além da possibilidade de chamadas assincronas o AJAX permitiu que dados pudessem ser requisitados ao servidor sem que haja necessidade de desmontar a tela inteira e recarregala novamente do zero trazendo todos os dados do servidor Basta efetuar a requisicao da parte necessaria via JavaScript e manipular o resultado a partir dele Os objetivos XMLHttpRequest e fetch Temos duas maneiras de executar requisides assincronas no JavaScript com o objeto XMLHttpRequest ou o fetch API O segundo mais moderno nao é adotado em vers6es antigas dos navegadores entao nem sempre pode ser usado Vamos ver como cada um deles funciona Exemplos do uso desses objetos podem ser vistos em httpsgithubcomrwillimpactaflaskajax XMLHttpRequest Para criar requisig6es assincronas da maneira classica precisamos instanciar um objeto do tipo XMLHttpRequest XMLHttpRequest sd no JavaScript let xhr new XMLHttpRequest Ou seja todos os métodos que chamaremos a seguir usam esse objeto que chamamos de xhr vocé pode chamalo de qualquer outro nome valido para uma variavel A partir deste objeto vamos configurar os dados da requisicdo e executa la O primeiro passo é abrir uma conexao com o servidor usando a fungao open xhropenMETODO URL ASYNC Nesta funcdo passamos os seguintes parametros o método HTTP utilizado GET ou POST inclusive é possivel usar outros métodos a URL httpssites google comfaculdadeimpactacombridwp12pli1 authuser1 oe 1024 04092023 0958 Desenvolvimento Web ocid WUC UU OUJd Ad ITYUISIYAY STId GSoIVLIVUIIA Com a conexao aberta no objeto xhr podemos ainda configurala com cabealhos de requisigdo especificos usando o método xhrsetRequestHeaderNOME VALOR passando o nome e o valor do cabegalho Nem sempre é necessario usar esse método somente em casos especificos e em nosso exemplo ele foi omitido Depois basta enviar a requisido usando o método xhrsend Se for necessario enviar dados no corpo da requisiao é possivel codificar esses dados em uma string e passar como parametro do método send Como a requisiao por padrao é assincrona nado podemos esperar que apos a execuGgao do send teremos os dados imediatamente disponiveis para uso A requisigao pode acabar demorando por algum motivo de servidor ou rede por isso é necessario pedir para o XMLHttpRequest através do objeto instanciado xhr avisar quando a resposta chegar Para tal usamos o evento readystatechange Este evento é disparado toda vez que a propriedade readyState do objeto xhr muda O valor dessa propriedade muda toda vez que o estado da requisicdo é alterado a requisiao foi enviada os dados de cabecalho foram recebidos os dados comecaram a chegar a requisiao foi finalizada etc A requisigao estara finalizada quando o valor dela for 4 valores menores se referem a situagdes intermediarias de rede Portanto devemos associar um listener ao evento usando a propriedade onreadystatechange Dentro da funcao que responde este evento devemos verificar se a requisidao finalizou xhrreadyState 4 ou usando a constante XMLHttpRequest DONE cujo valor também é 4 e também se ela foi bem sucedida isto é se o cddigo de status HTTP é igual a 200 xhrstatus 200 Caso as duas condiccdes ldgicas sejam verdadeiras podemos acessar a resposta usando a propriedade xhrresponseText A Figura 121 mostra um exemplo de uma requisiao usando o XMLHttpRequest Figura 121 Exemplo de uma requisigao com XMLHttpRequest httpssitesgooglecomfaculdadeimpactacombrdwp12pli1 authuser1 1124 04092023 0958 Desenvolvimento Web XNropenGhl OOUTEr aaaos xhronreadystatechange function if xhrreadyState XMLHttpRequestDONE xhrstatus 200 consolelogA requisicdo deu certo e retornou xhrresponseText xhrsend Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1224 04092023 0958 Desenvolvimento Web O JavaScript possui mais uma interface para execucao de requisides assincronas o fetch API Esse objeto possui uma maior simplicidade na criagado das chamadas e no tratamento de respostas Ele esta disponivel através da funcao global fetch Executamos ela passando a URL da requisigao e um objeto de opgdes Exemplo fetchURL CONFIG Usando Fetch sd Nesse objeto podemos passar o método HTTP cabegalhos de requisigao customizados dados do corpo entre outros dados Ao executar essa funao é retornado um objeto de Promesa Promise Promise sd Esse objeto representa uma execucgao assincrona qualquer que tera seu valor disponibilizado no futuro ou seja quando o servidor terminar de responder a requisicao Um objeto do tipo Promise permite conectar dois tipos de retorno um para o sucesso e outro para tratar um erro na requisiao Ambos devem ser feitos passando uma fungao a ser executada quando cada um dos eventos ocorrer sucesso ou erro Para isso usamos oO método then para passar uma chamada a ser executada no sucesso recebendo os dados de resposta ou o método catch para tratar o erro da chamada recebendo um objeto com os dados do erro O retorno do bloco then é um objeto de resposta com os dados sendo processados ainda entao precisamos retornar qual o formato ele sera interpretado Na resposta retornada podemos usar o método json para formatar em um object genérico do JavaScript No exemplo mostrado na Figura 122 a requisiao é feita para a URL obterdados e registramos duas fungoes de retorno ao seu promise a primeira fungao recebe a resposta a ser codificada e retorna ela em formato texto string enquanto que a segunda fungao recebe a string com a resposta e a imprime no console Ha ainda uma terceira funao associada ao método catch que so sera executada caso ocorra algum erro ao fazer a requisiao assincrona Figura 122 Exemplo de uma requisigao assincrona usando o fetch fetchobter dadosthen function resposta return respostajson thenfunction texto logA requisicdo deu certo e retornou texto catch function logOcorreu algum erro ao fazer a requisicdo httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1324 04092023 0958 Desenvolvimento Web Vamos praticar Uma das coisas mais comuns a se fazer usando 0 AJAX 0 consumo de APIs Publicas As APIs sao servicos web que ficam disponiveis para qualquer um utilizar para consumir seus dados Elas podem abracar qualquer assunto de cinema a carros Veja uma lista grande de APIs publicas para consumo livre para testar o uso do AJAX hitpsgithubcompublicapispublic apis O formato JSON Mesmo nao sendo obrigatorio utilizalo o formato de dados JSON JavaScript Object Notation 6 o mais associado ao AJAX Originalmente o AJAX era usado para transferir dados usando o formato XML eXtensible Markup Language sendo a origem da letra X na sigla do AJAX inclusive Mas a simplicidade e leveza do formato JSON acabou fazendo com que esse formato fosse 0 mais utilizado na troca de informagées no AJAX O formato JSON é similar a declaragao de objects genéricos do JavaScript ou dicionarios do Python Os dados sempre devem ficar entre chaves e possui varias entradas de chave e valor Uma diferenca em relaao ao tipo dicionario do Python é que no JSON todas as chaves devem ser strings Introducdo ao JSON sd Ja os valores podem ser strings numeros booleanos null vetores e inclusive outros JSON E possivel definir valores como vetores lista de valores através de colchetes conforme o exemplo da Figura 123 Figura 123 Exemplo de dados encapsulados no formato JSON httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1424 04092023 0958 Desenvolvimento Web Thome JSOa2O Aad ollVva idade 32 telefones 99 12345678 99 987654321 matriculado true curso sigla ADs nome Analise e Desenvolvimento de Sistemas Fonte do autor 2022 E possivel também definir vetores listas contendo varios objetos JSON dentro do vetor conforme mostra 0 exemplo da Figura 124 Figura 124 Exemplo de um vetor cujos elementos sao outros JSON httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1524 04092023 0958 Desenvolvimento Web Aaaos alunos nome Jodo da Silva idade 32 I nome Maria dos Santos idade 29 I nome Guilherme Souza iIdade 45 J Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1624 04092023 0958 Desenvolvimento Web iw vyevyvE nUuvnl w puliyuy UvVVe Vu miipw t4UUU FEW FIUv rippwre Jvwery bvuU ruliyuy pode ser util por exemplo em rotas que serao consumidas por requisigo6es AJAX onde desejamos retornar texto no formato JSON ao invés de renderizar um template com a funcdo rendertemplate Essa funcado recebe varios objetos do Python strings dicionarios listas etc e converte esses dados para uma string que representa JSON valido Cada chave do JSON deve ser passada para a funao como um parametro nomeado e o valor do parametro nomeado é o valor associado aquela chave Flask API jsonify sd Referéncias CONCEITOS gerais da programagao assincrona MDN Web Docs sd Disponivel em httpsdevelopermozillaorgptBRdocsLearnJavaScriptAsynchronousConceitos Acesso em 07 set 2022 FLASK API jsonify Pallets Projects sd Disponivel em httpsflaskpalletsprojectscomen11xapiflaskjsonjsonify Acesso em 07 set 2022 INTRODUGAO AO JSON JSONorg sd Disponivel em httpswwwjsonorgjson pthtml Acesso em 09 set 2022 PROMISE MDN Web Docs sd Disponivel em httpsdevelopermozillaorgpt BRdocsWebJavaScriptReferenceGlobalObjectsPromise Acesso em 09 set 2022 USANDO Fetch MDN Web Docs sd Disponivel em httpsdevelopermozillaorgpt BRdocsWebAPIFetchAPIUsingFetch Acesso em 10 set 2022 XMLHttpRequest MDN Web Docs sd Disponivel em httpsdevelopermozillaorgpt BRdocsWebAPIXMLHttpRequest Acesso em 10 set 2022 httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1724 04092023 0958 Desenvolvimento Web piesvor Desenvolvimento Web Parte12 Para Refletir 03 Saliba mais Acesse 0 artigo Conceitos gerais da programagao assincrona no MDN e conheca mais sobre os temas estudados Conceitos gerais da programacao assincrona MDN httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1824 04092023 0958 Desenvolvimento Web f é nn 7 h i é tiS ra httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 1924 04092023 0958 Desenvolvimento Web Desenvolvimento Web Parte12 Para Refletir 03 Finalizando httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 2024 04092023 0958 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Entender a diferencga entre sincrono e assincrono na Internet Usar o JavaScript para fazer chamadas assincronas no servidor Aprender como retornar dados no formato JSON do Flask Reflita sobre o conteudo que vocé explorou e faca um debate com seus colegas e professores pelo Classroom ou na prdéxima aula ao vivo live Fique atento ao prazo de encerramento da atividade continua que compdem esses conteudos de aprendizagem Esperamos que vocé tenha aprofundado seus conhecimentos durante os estudos e tenha aproveitado todo o conteudo apresentado httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 2124 04092023 0958 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 2224 04092023 0958 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp12pli1authuser1 2324 04092023 0958 Desenvolvimento Web Desenvolvimento Web Parte12 Para Refletir 03 Classroom Gmail Drive Portal do Aluno Nucleo de Educagao a Distancia Faculdade Impacta Telefone 11 55935382 Hordrio de atendimento 10h as 18h httpssitesgooglecomfaculdadeimpactacombrdwp12pli1 authuser1 2424