title: Uncaught InvalidStateError. Object's State must be Opened.
body: <p>Uncaught InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED. uber-graph.js:19</p>
  
  <p>However, here is my code. I don't understand why it is wrong. </p>
  
  <p>var uberTemplateFunction = Handlebars.compile($('#page-template').html());</p>
  
  <pre><code>var search = function(Slong, Slat, Elong, Elat){
  
  Slat = encodeURIComponent(Slat);
  Slong = encodeURIComponent(Slong);
  Elat = encodeURIComponent(Elat);
  Elong = encodeURIComponent(Elong);
  
  var xhr = new XMLHttpRequest();
  
  xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
        document.getElementById('ajaxResponse').innerHTML = xhr.responseText;
      }
  };
  
  var url = 'https://api.uber.com/v1/estimates/price?start_latitude=' + Slat  +  '&amp;start_longitude=' + Slong + '&amp;end_latitude=' + Elat + '&amp;end_longitude=' + Elong;
  xhr.setRequestHeader("Authorization", "Token lFdfJgCSnohPg0LVm8NN3qBviR0-cwl42exRYqAU");
  xhr.open('GET', url , true);
  xhr.send(); // Make the HTTP request
  
  
  
      $.getJSON(url, function(response){  //can use $ or jQuery
          console.log(response);
  
          var html = '';
  
          for(var i = 0; i &lt; response.prices.length; i++){
              html += uberTemplateFunction(response.prices[i]);
          }
  
          $('#results').html(html);
      });
  
  };
  $('form').on('submit', function(e){
      e.preventDefault();
  
      var Slat = $('#slat').val();
      var Slong = $('#slong').val();
      var Elat = $('#elat').val();
      var Elong = $('#elong').val();
  
      //console.log(searchTerm);
  
      $('#results').html('Loading....');
      search(Slat, Slong, Elat, Elong);
  });
  </code></pre>