title: Javascript get request is blocking the ui
body: <p>Consider the following:</p>
  
  <p>HTML:</p>
  
  <pre><code>...
  &lt;button id="get"&gt;Get&lt;/button&gt;
  &lt;div id="result"&gt;&lt;/div&gt;
  ...
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$('#get').on('click', function()
  {
      var result = httpGet(getUrl() + 'query.php');
      document.getElementById('result').innerHTML = result;
  });
  
  function httpGet(theUrl)
  {
      var xmlHttp = new XMLHttpRequest();
  
      xmlHttp.open('GET', theUrl, false);
      xmlHttp.send(null);
  
      return xmlHttp.responseText;
  }
  
  function getUrl()
  {
      return window.location.href.substring(0, (window.location.href.lastIndexOf('/')) + 1);
  }
  </code></pre>
  
  <p>PHP (query.php):</p>
  
  <pre><code>// Make database query and return the result.
  </code></pre>
  
  <hr>
  
  <p>So... When I click <code>button</code> <strong>get</strong>, it calls <code>httpGet()</code> and make a request to <code>query.php</code>, that make a database query and return the result, which is asigned to <code>div</code> <strong>result</strong>.</p>
  
  <p>The problem is, until it get the result from the server, that is a slow process, the ui is blocked. How can I solve it?</p>