Solicitação AJAX básica: XMLHttpRequest

Há várias tarefas comuns de front-end para as quais muitos de nós nunca tocamos nas APIs profundas e sujas porque nossas amadas estruturas de JavaScript forneceram maneiras mais fáceis de trabalhar com elas. É por isso que escrevi Como funciona a delegação de eventos em JavaScript, Fazer uma solicitação HTTP básica com o Node.jse dezenas de tutoriais sobre outras publicações de API de baixo nível. A seguir, o XMLHttpRequest, a API que usamos para fazer nossas chamadas AJAX!

Recuperação do objeto XHR

Ao contrário da maioria das APIs, obter o componente principal é, na verdade, um pouco trabalhoso, pois o Internet Explorer costumava exigir um componente ActiveX para que o AJAX funcionasse:

var request;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  try {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  } 
  catch (e) {
    try {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {}
  }
}

Bleh; o código é feio, mas é isso que o senhor deve esperar por trás da cortina, certo?

Como fazer uma solicitação

Fazer uma solicitação requer duas chamadas de função:

request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);

A chamada aberta define o tipo de solicitação (get, post, etc.) e o método send executa a solicitação. Bastante simples! Adicionar cabeçalhos personalizados também é simples:

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Solicitação de retornos de chamada

É claro que fazer solicitações é um tanto inútil se o senhor não lidar com o resultado, e há duas maneiras de definir um retorno de chamada:

// state changes
request.onreadystatechange = function() {
	if(request.readyState === 4) { // done
		if(request.status === 200) { // complete	
			console.log(request.responseText)
		}
	}
};

// addEventListener
function callbackFn(e) {
	// Handle each event
}
request.addEventListener("progress", callbackFn, false);
request.addEventListener("load", callbackFn, false);
request.addEventListener("error", callbackFn, false);
request.addEventListener("abort", callbackFn, false);

Escolha o método que o senhor preferir, mas o addEventListener provavelmente é mais elegante.

Essa é a minha introdução simples à criação de solicitações AJAX simples com a API XMLHttpRequest nativa. Para obter mais informações sobre testes AJAX comuns, como o envio de dados de formulário, consulte a seção Rede de Desenvolvedores Mozilla!