XMLHttpRequest

O XMLHttpRequest é o componente técnico que torna possível a comunicação assíncrona com o servidor. O que vimos até então, limita-se a trabalhar no lado cliente da comunicação na internet, ou seja, CSS, HTML, DOM e JavaScript funcionam apenas no navegador.

Para escrever uma requisição Ajax básica, precisamos:

1. criar uma instância de XMLHttpRequest;
2. abrir uma requisição;
3. enviar uma requisição;
4. Manipular a resposta.

Veja um exemplo:

var requisicao = new XMLHttpRequest();
requisicao.onload = manipulaResposta;
requisicao.open('GET', 'url', true);
requisicao.send();

function manipulaResposta(){
    console.log(requisicao.responseText);
} 

Explicando cada item:

1. Primeiro precisamos criar uma nova instância de XMLHttpRequest, ou seja um objeto XMLHttpRequest. Você deve lembrar que criamos um novo objeto JavaScript utilizando a palavra-chave new;
2. A segunda linha contém um evento (onload). Esse evento é disparado quando a requisição é finalizada com sucesso. E o manipulador de eventos (a função manipulaResposta) manipula o evento e registra a resposta do servidor no console do navegador;
3. A terceira linha abre a requisição. O método open() recebe três argumentos. O primeiro é a ação HTTP que será utilizada, falaremos sobre isso mais a frente. Nesse exemplo utilizamos o método GET. O segundo argumento é a URL na qual os dados serão solicitados. Por exemplo, aqui pode ser uma chamada a uma API que irá retornar um JSON. E o terceiro argumento é um valor booleano que determina se a requisição será assíncrona ou não. Um valor true significa que a requisição é assíncrona, e false, síncrona (a página irá recarregar). O valor padrão é true e pode ser omitido se esse for o caso.
4. Por fim, o método send() efetivamente envia a nossa requisição para o servidor alvo da URL.

Isso é tudo que precisamos para fazer uma requisição Ajax. Muito, né?