{"id":14108,"date":"2019-01-18T10:33:35","date_gmt":"2019-01-18T12:33:35","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=14108"},"modified":"2023-05-19T20:07:52","modified_gmt":"2023-05-19T23:07:52","slug":"o-que-e-ajax","status":"publish","type":"post","link":"\/br\/tutoriais\/o-que-e-ajax","title":{"rendered":"O que \u00e9 AJAX e como funciona?"},"content":{"rendered":"<p><strong>AJAX<\/strong> significa <strong><i>Asynchronous JavaScript and XML<\/i><\/strong>, ou <strong>JavaScript e XML Ass&iacute;ncronos<\/strong>, em bom portugu&ecirc;s. Ele &eacute; um conjunto de t&eacute;cnicas de desenvolvimento voltado para a web que permite que aplica&ccedil;&otilde;es trabalhem de modo ass&iacute;ncrono, processando qualquer requisi&ccedil;&atilde;o ao servidor em segundo plano.<\/p><p>Pareceu um pouco confuso? N&atilde;o se preocupe, vamos explicar a terminologia de cada palavra para voc&ecirc; entender perfeitamente.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/BR-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Baixar Gloss&aacute;rio Completo de Desenvolvimento Web<\/a><\/p><p>O <strong>JavaScript<\/strong> &eacute; uma linguagem de programa&ccedil;&atilde;o bem conhecida. Entre suas funcionalidades, est&aacute; a capacidade de gerenciar conte&uacute;dos din&acirc;micos de um site e permitir a intera&ccedil;&atilde;o din&acirc;mica com o usu&aacute;rio. O XML &nbsp;(<i>eXtensible Markup Language<\/i>), como o nome sugere, &eacute; uma varia&ccedil;&atilde;o de linguagem de marca&ccedil;&atilde;o no estilo do HTML. Enquanto o HTML &eacute; utilizado para exibir dados, o XML os armazena e transmite.<\/p><p>Tanto o JavaScript quanto o XML trabalham de forma ass&iacute;ncrona no AJAX. Assim, qualquer aplica&ccedil;&atilde;o que use AJAX pode enviar e receber dados do servidor sem precisar recarregar a p&aacute;gina inteira.<\/p><h2 class=\"wp-block-heading\" id=\"h-exemplos-de-ajax-na-pratica\"><b>Exemplos de AJAX&nbsp; na Pr&aacute;tica<\/b><\/h2><p class=\"has-text-align-left\">Imagine a ferramenta de sugest&otilde;es de pesquisa do Google. Ela ajuda a completar as palavras que voc&ecirc; digita em tempo real enquanto a p&aacute;gina permanece est&aacute;tica.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"748\" height=\"421\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/sugestao-de-pesquisa-do-google-1.png\/public\" alt=\"Caixa de pesquisa do google sugerindo outras op&ccedil;&otilde;es com o AJAX web\" class=\"wp-image-14110\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/sugestao-de-pesquisa-do-google-1.png\/w=748,fit=scale-down 748w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/sugestao-de-pesquisa-do-google-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/sugestao-de-pesquisa-do-google-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/sugestao-de-pesquisa-do-google-1.png\/w=470,fit=scale-down 470w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/sugestao-de-pesquisa-do-google-1.png\/w=640,fit=scale-down 640w\" sizes=\"(max-width: 748px) 100vw, 748px\" \/><\/figure><\/div><p class=\"has-text-align-left\">No in&iacute;cio dos anos 90, quando a internet ainda n&atilde;o era t&atilde;o avan&ccedil;ada, a mesma funcionalidade iria exigir que a p&aacute;gina fosse recarregada sempre que uma nova sugest&atilde;o de pesquisa aparecesse na tela. O AJAX permite a troca de informa&ccedil;&otilde;es simult&acirc;nea sem interferir com outras fun&ccedil;&otilde;es.<\/p><p>Na realidade, o conceito de AJAX j&aacute; existe desde a metade da d&eacute;cada de 90. Por&eacute;m, s&oacute; come&ccedil;ou a receber mais reconhecimento quando o Google o incorporou no Google Mail e Google Maps em 2004. Atualmente, ele &eacute; bastante utilizado em diversas aplica&ccedil;&otilde;es web para melhorar o processo de comunica&ccedil;&atilde;o com o servidor.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>Esses s&atilde;o alguns exemplos de como o AJAX impacta nossas vidas diariamente.<\/p><ul class=\"wp-block-list\">\n<li><b>Sistemas de Vota&ccedil;&atilde;o e Avalia&ccedil;&atilde;o<\/b><\/li>\n<\/ul><p>Voc&ecirc; j&aacute; avaliou algum produto que comprou na internet? J&aacute; preencheu algum formul&aacute;rio online? Ambas as opera&ccedil;&otilde;es utilizam o AJAX. Ao clicar no bot&atilde;o de voto ou de avalia&ccedil;&atilde;o o site ir&aacute; atualizar os c&aacute;lculos sem precisar recarregar a p&aacute;gina.<\/p><ul class=\"wp-block-list\">\n<li><b>Canais de Chat<\/b><\/li>\n<\/ul><p>Alguns sites possuem canais de bate-papo em sua p&aacute;gina principal para se comunicar com seus clientes e prestar servi&ccedil;o de suporte t&eacute;cnico. Com o AJAX, voc&ecirc; pode continuar navegando no site enquanto troca mensagens sem que elas desapare&ccedil;am.<\/p><ul class=\"wp-block-list\">\n<li><b>Notifica&ccedil;&otilde;es de Trending do Twitter<\/b><\/li>\n<\/ul><p>O Twitter recentemente passou a utilizar o AJAX em suas atualiza&ccedil;&otilde;es. Sempre que novos tweets s&atilde;o feitos sobre um certo <i>trending topic<\/i> o Twitter automaticamente atualiza as novas figuras sem afetar a p&aacute;gina principal.<\/p><p>Simplificando, o AJAX torna o processo de multitarefas mais simples. Sempre que voc&ecirc; encontrar uma situa&ccedil;&atilde;o em que duas opera&ccedil;&otilde;es funcionam simultaneamente, uma em execu&ccedil;&atilde;o e a outra ociosa, &eacute; bem prov&aacute;vel que o AJAX esteja envolvido.<span style=\"font-weight: 400\"><\/span><\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Dica<\/h4>\n                    <p>Se voc&ecirc; deseja melhorar seu site, n&atilde;o se esque&ccedil;a de mostrar ao Google e aos seus clientes que voc&ecirc; cuidou dos problemas de seguran&ccedil;a. Use um <a href=\"\/br\/certificado-ssl-gratis\">SSL gr&aacute;tis<\/a> e garanta a prote&ccedil;&atilde;o de dados dos seus visitantes!<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-o-ajax-web-funciona\"><b>Como o Ajax Web Funciona?<\/b><\/h2><p>&Eacute; importante lembrar que o AJAX n&atilde;o &eacute; uma &uacute;nica tecnologia, ou at&eacute; mesmo uma linguagem de programa&ccedil;&atilde;o. Como mencionado antes, o AJAX &eacute; uma s&eacute;rie de t&eacute;cnicas de desenvolvimento voltadas para web. O sistema geralmente &eacute; composto por:<\/p><ul class=\"wp-block-list\">\n<li><b>HTML\/XHTML<\/b> para linguagem principal e CSS para a apresenta&ccedil;&atilde;o.<\/li>\n\n\n\n<li><b>O <\/b><b><i>Document Object Model<\/i><\/b><b> (DOM)<\/b> para exibi&ccedil;&atilde;o din&acirc;mica dos dados e intera&ccedil;&atilde;o.<\/li>\n\n\n\n<li><b>XML<\/b> para a troca de dados e XSLT para a manipula&ccedil;&atilde;o. Muitos desenvolvedores come&ccedil;aram a substituir pelo <b>JSON<\/b> por ser mais semelhante ao JavaScript.<\/li>\n\n\n\n<li>O objeto <b>XMLHttpRequest<\/b> para a comunica&ccedil;&atilde;o ass&iacute;ncrona.<\/li>\n\n\n\n<li>Finalmente, a linguagem de programa&ccedil;&atilde;o <b>JavaScript<\/b> para juntar todas essas tecnologias.<\/li>\n<\/ul><p>&Eacute; preciso um pouco de conhecimento t&eacute;cnico para entender completamente o funcionamento. Por&eacute;m, o procedimento geral de como o AJAX funciona &eacute; relativamente simples. Confira o diagrama e a tabela de compara&ccedil;&atilde;o abaixo para entender melhor.<\/p><h3 class=\"wp-block-heading\" id=\"h-diagrama\"><b><\/b><b>Diagrama<\/b><br><img decoding=\"async\" class=\"aligncenter size-full wp-image-14142\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2019\/01\/O-Que-e-AJAX-e-Como-Funciona-infografico.png\" alt=\"Gr&aacute;fico informativo sobre o que &eacute; AJAX web\" width=\"900\" height=\"990\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/O-Que-e-AJAX-e-Como-Funciona-infografico.png\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/O-Que-e-AJAX-e-Como-Funciona-infografico.png\/w=136,fit=scale-down 136w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/O-Que-e-AJAX-e-Como-Funciona-infografico.png\/w=273,fit=scale-down 273w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/01\/O-Que-e-AJAX-e-Como-Funciona-infografico.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/h3><h3 class=\"wp-block-heading\" id=\"h-tabela-de-comparacao\"><b>Tabela de Compara&ccedil;&atilde;o<\/b><\/h3><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><b>Modelo convencional<\/b><\/td><td><b>Modelo AJAX<\/b><\/td><\/tr><tr><td><ol><li>Uma requisi&ccedil;&atilde;o HTTP &eacute; enviada do navegador para o servidor.<\/li> <li>O servidor recebe a requisi&ccedil;&atilde;o e busca os dados.<\/li> <li>O servidor envia os dados requisitados para o navegador.<\/li> <li>O navegador recebe os dados e recarrega a p&aacute;gina para fazer com que apare&ccedil;am.<\/li>Durante esse processo, os usu&aacute;rios n&atilde;o conseguem fazer nada al&eacute;m de esperar que seja conclu&iacute;do. Al&eacute;m de ser uma perda de tempo para o usu&aacute;rio, tamb&eacute;m demanda muitos recursos do servidor.<span style=\"font-family: inherit;font-size: inherit;font-weight: inherit;color: initial\"> <\/span><\/ol><\/td><td><ol><li>O navegador gera uma chamada do JavaScript que ent&atilde;o ativa o XMLHttpRequest.<\/li> <li>Em segundo plano o navegador cria uma requisi&ccedil;&atilde;o HTTP para o servidor.<\/li> <li>O servidor recebe a requisi&ccedil;&atilde;o, busca os dados e envia para o navegador.<\/li> <li>O navegador recebe os dados requisitados que ir&atilde;o aparecer imediatamente na p&aacute;gina. N&atilde;o &eacute; necess&aacute;rio recarregar.<\/li><\/ol><\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><b>Conclus&atilde;o<\/b><\/h2><p>Al&eacute;m de aprender o que &eacute; AJAX, um dos prop&oacute;sitos do tutorial &eacute; explicar como o AJAX melhora a experi&ecirc;ncia do usu&aacute;rio. Seus visitantes n&atilde;o precisam mais aguardar um temp&atilde;o para ter acesso ao seu conte&uacute;do. Claro que muito se baseia na sua necessidade.<\/p><p>O Google, por exemplo, permite que os usu&aacute;rios escolham entre o AJAX e a vers&atilde;o convencional ao utilizar o Google Mail.&nbsp;Por isso, fica a nossa dica: coloque sempre as necessidades de seus visitantes em primeiro lugar antes de decidir.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AJAX significa Asynchronous JavaScript and XML, ou JavaScript e XML Ass&iacute;ncronos, em bom portugu&ecirc;s. Ele &eacute; um conjunto de t&eacute;cnicas de desenvolvimento voltado para a web que permite que aplica&ccedil;&otilde;es trabalhem de modo ass&iacute;ncrono, processando qualquer requisi&ccedil;&atilde;o ao servidor em segundo plano. Pareceu um pouco confuso? N&atilde;o se preocupe, vamos explicar a terminologia de cada [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/o-que-e-ajax\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":92,"featured_media":14141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"O Que \u00e9 AJAX e Como Funciona? Guia Para Iniciantes","rank_math_description":"N\u00e3o, o AJAX n\u00e3o \u00e9 apenas um time de futebol europeu! Na realidade, \u00e9 prov\u00e1vel que ele seja bem presente na sua vida. Descubra o que \u00e9 AJAX!","rank_math_focus_keyword":"o que \u00e9 ajax","footnotes":""},"categories":[5602],"tags":[6219,4793,6217,4913],"class_list":["post-14108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-glossario","tag-ajax","tag-javascript","tag-o-que-e-ajax","tag-xml"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-ajax","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-ajax","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-ajax","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-ajax","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-ajax","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-ajax","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-ajax","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-ajax","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-ajax","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-ajax","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-ajax","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-ajax","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-ajax","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-ajax","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-ajax","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/14108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/92"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=14108"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/14108\/revisions"}],"predecessor-version":[{"id":36742,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/14108\/revisions\/36742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/14141"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=14108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=14108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=14108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}