Usando jQuery Deferreds

Recentemente, eu estava desenvolvendo um modal de contato com seus campos de entrada padrão: Nome, Sobrenome, Email e Mensagem. Além dessas informações, eu queria alguns metadados extras sobre o usuário para colorir melhor a pessoa que está me contatando.

http://smart-ip.net é um serviço da web gratuito que publica informações básicas sobre o endereço IP solicitante por meio de seu endpoint de API. Os dados são retornados via JSON para o IP solicitante, que no meu caso é a pessoa que está tentando entrar em contato comigo.

Veja você mesmo visitando este URL: http://smart-ip.net/geoip-json?callback= ?

Eu me deparei com uma situação em que primeiro precisei fazer uma solicitação GET para os dados IP mencionados acima e, em seguida, uma solicitação POST para enviar os dados do meu formulário (bem como os dados IP) para o meu servidor para processamento. O desafio aqui é fazer duas solicitações AJAX em que a segunda depende do resultado da primeira.

É aqui que o jQuery Deferreds entra em jogo. Como você pode ver abaixo, eu configurei um literal de objeto que consiste nos valores de entrada do formulário (NOTA: é uma boa prática realizar a validação do lado do cliente antes de POSTAR esses dados em seu servidor web para processamento. O que estou exibindo é apenas para fins rápidos e fins de exemplo fáceis.)

O que acontece a partir daqui é que uma solicitação XHR é feita para o serviço da web de IP e depois que essa transação retorna uma resposta, a segunda solicitação XHR é feita, que é o que envia os dados do formulário para minha /contactrota.

!function() {

  document.querySelector('input[type="submit"]').onclick = function(e) {

    var contactInfo = {
      firstName: document.querySelector('input[name="firstName"]').value.trim(),
      lastName: document.querySelector('input[name="lastName"]').value.trim(),
      email: document.querySelector('input[name="email"]').value.trim(),
      message: document.querySelector('textarea[name="message"]').value.trim(),
      ip: null,
      long: null,
      lat: null
    };

    function updateContactInfo(data) {
      contactInfo.ip = data.host;
      contactInfo.long = data.longitude;
      contactInfo.lat = data.latitude;
    }

    $.ajax({
      url: 'http://smart-ip.net/geoip-json?callback=?',
      type: 'GET',
      dataType: 'json',
    }).done(function(data) {
      updateContactInfo(data);
      $.ajax({
        url: '/contact',
        data: contactInfo,
        type: 'POST',
        dataType: 'json'
      });
      console.log(contactInfo);
    });

    e.preventDefault();

  };

}();