Como usar Ajax com JavaScript

O Ajax é uma técnica de programação que permite atualizar partes de uma página web sem a necessidade de recarregar a página inteira.

[{"selector":"#anim-17ce63e5-670a-44e4-9949-5bfd50812b18 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(10.934722122295714%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-453ec6ff-f862-45ba-b3f4-b6e0a6519986","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-998bc1e2-3d71-40b6-b06c-fa4b5698a720","keyframes":{"transform":["translate3d(116.02564%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Requisições Ajax

[{"selector":"#anim-041b88ae-f627-44e5-a14f-23dc056b386f [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-40.04629618252202%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-fa0535af-29b5-4270-9d68-aeb0f9e5867b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-297b7b48-e8d0-43fa-aaeb-7b87b0ace5f0","keyframes":{"transform":["translate3d(115.23810%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e6612e7d-d066-489e-8787-2f23a89c4f8f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ef3df9c4-ac9a-46bf-8191-823f4f538aaf","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fae0c0d1-7a99-456d-9ad4-f6b73a65006c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2359afd5-e545-4bf3-a8ed-86dea076b430","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Tratando a resposta

[{"selector":"#anim-893d6956-30c8-4c02-8515-f56e84915a28 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-21.990740626966474%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-0225d13f-4522-4335-ab3a-833f2a1c0e34","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-edcc2fce-4193-4067-8c82-3640f8e23247","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d5323861-70f9-4646-a72b-1be82ac1f6e0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fe17205d-3abd-4ae7-815f-218aa34b9d45","keyframes":{"transform":["translate3d(-115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Atualizando a página

[{"selector":"#anim-f9298dcf-0827-4c8c-b285-c4130e80bb57 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(18.593899984296943%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-2bfeb561-45e2-4036-a969-016866ce5915","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-312052a3-1b2c-44c9-a7ce-4a4b0b3b08de","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-93fc95bc-ae9b-402f-8735-480be2982d03","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4dc3f9b0-825f-4837-8f58-638fa94ee82a","keyframes":{"transform":["translate3d(114.96816%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8defb291-fadc-41f7-84b0-5f1b5b5fe1b4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ba0b956d-34c5-4bc8-9cbe-40682499d050","keyframes":{"transform":["translate3d(-115.60509%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2df29c63-0df3-4d86-b338-93a036ff48a4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2832d17d-b733-499f-bd63-15e93d14b623","keyframes":{"transform":["translate3d(115.60510%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

A importância do Ajax no seu site

[{"selector":"#anim-7098a035-9dec-49c4-b880-54b3b45dc1a6 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-28.90624987200394%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-c7167ae7-c96a-4ee1-b49f-02be6d5ab15d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-39c65cec-af9a-43ca-a8a5-a5eb71af3529","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-11a6e79d-a09c-49f2-9034-2537650f5c73","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d190a914-4a70-4e9a-bf72-d5125386c860","keyframes":{"transform":["translate3d(0px, 353.54500%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Como funciona?

[{"selector":"#anim-8d559d31-390f-4dca-85c7-082b0009b4ed [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-9.537037071759258%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-8047b58b-d8df-44c2-bcb1-937b47f2924d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2c62dfee-5c7d-4b05-91b2-96b827448136","keyframes":{"transform":["translate3d(-113.88012%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-11614f21-4590-4403-b15c-94f3bcc9cdc1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-99f2952c-21da-4e0b-a8e1-8c1b55c8c171","keyframes":{"transform":["translate3d(114.28571%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8046941f-9ca3-444e-a9f0-e926e5350b65","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a7c80b11-f66e-4ae9-8629-75420f89bf7a","keyframes":{"transform":["translate3d(0px, 282.11643%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aprenda sobre Ajax no JavaScript!

[{"selector":"#anim-81e9e689-ebc9-4c9e-a513-c3a3075f4811 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-b90c8c97-ed49-4521-8a0d-eb5a0f4091a9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0ab287be-dae8-4389-beef-ae7992e57255","keyframes":{"transform":["translate3d(-115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9597b721-7d69-4a37-b433-80f5c62a1b49","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a4a0fc76-f82d-4b77-9d08-8c0bbc5d151f","keyframes":{"transform":["translate3d(115.23810%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Clique aqui!

Como usar Ajax com JavaScript

O Ajax é uma técnica de programação que permite atualizar partes de uma página web sem a necessidade de recarregar a página inteira.

Requisições Ajax

Para fazer uma requisição Ajax, você pode usar o objeto XMLHttpRequest, que é nativo do JavaScript. Este objeto permite fazer chamadas assíncronas ao servidor e obter uma resposta em formato de texto, XML ou JSON.

Tratando a resposta

Depois de fazer uma requisição Ajax, é necessário tratar a resposta do servidor. No entanto, isso pode ser feito usando o método "responseText" do objeto XMLHttpRequest, que retorna a resposta em formato de texto.

Atualizando a página

Depois de receber a resposta do servidor, é possível atualizar partes da página usando o JavaScript.

Isso pode ser feito usando o método "innerHTML" para atualizar o conteúdo de um elemento HTML.

A importância do Ajax no seu site

Com o JavaScript, é possível usar o Ajax para criar experiências de usuário mais rápidas e interativas.

Como funciona?

o JavaScript faz uma chamada assíncrona ao servidor e atualiza o conteúdo da página em tempo real.

Aprenda sobre Ajax no JavaScript!

Confira nosso artigo completo sobre Ajax com JavaScript clicando logo abaixo!