title: Test front-end application without back-end
body: <p>My web application uses <code>XMLHttpRequest</code> to load JSON data returned by a backend server running PHP. It then renders the result in the browser using a client-side Javascript templating library.</p>
  
  <pre><code>function load(src) {
      var oReq = new XMLHttpRequest();
      oReq.onload = function () {
          _this.data = JSON.parse(oReq.responseText);
          _this.render(_this.data);
      };
      oReq.open('get', src, opts.async || true);
      oReq.send();    
  }
  load('article.php?page=1&amp;lang=en');
  load('userprofile.php?userid=1548&amp;lang=en');
  </code></pre>
  
  <p>The real backend API <code>article.php</code> is not ready.
  I want to simulate/mock the response of <code>article.php?page=1&amp;lang=en</code>
  <strong>in order to make an end to end test or to demonstrate the application</strong>.</p>
  
  <p>How can I change the behaviour of XMLHttpRequest (or mock it) so that <strong>it won't open a HTTP connection</strong>, but returns pre-configured data according to each request? The mock should simulate a slow connection (delay 1 sec before returning the response) and also support timeout (as the normal XMLHttpRequest).</p>