AJAX §

---

AJAX, que significa Asynchronous JavaScript and XML, é uma técnica de programação que permite atualizações assíncronas em uma página web, sem a necessidade de recarregar a página inteira. Isso é alcançado por meio da utilização do objeto XMLHttpRequest (XHR) no JavaScript, que permite realizar requisições HTTP assíncronas ao servidor.

Exemplos §

A forma mais tradicional de trabalhar com AJAX envolve o uso de callback functions, como mostrado abaixo:

const request = (obj) => {
  const xhr = new XMLHttpRequest();
  xhr.open(obj.method, obj.url, true);
  xhr.send();
 
  xhr.onload(() => {
    if (xhr.status >= 400) {
      obj.error(xhr.statusText);
      return;
    }
 
    obj.success(xhr.responseText);
  });
};

No entanto, a abordagem mais moderna e recomendada é utilizar Promises, como demonstrado no exemplo abaixo:

const request = (obj) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(obj.method, obj.url, true);
    xhr.send();
 
    xhr.onload(() => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
        return;
      }
 
      reject(xhr.statusText);
    });
  });
};
 
document.addEventListener("click", (e) => {
  const element = e.target;
  const tag = element.tagName.toLowerCase();
 
  if (tag === "a") {
    e.preventDefault();
    loadPage(element);
  }
});
 
async function loadPage(element) {
  const href = element.getAttribute("href");
 
  const objConfig = {
    method: "GET",
    url: href,
  };
 
  try {
    const response = await request(objConfig);
    loadResult(response);
  } catch (error) {
    console.log(error);
  }
}
 
function loadResult(response) {
  const result = document.querySelector(".result");
  result.innerHTML = response;
}

Este último exemplo utiliza Promises e as palavras-chave await, tornando o código mais legível e simples. As Promises oferecem uma maneira mais eficiente de lidar com operações assíncronas, tornando o código mais robusto e menos propenso a problemas relacionados a callback hell.

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado