title: How to log PHP file run with jQuery AJAX in browser console?
body: <p>I have a PHP file that does data processing. It's run by <code>$.ajax()</code>, sometimes on big files that take a long time to process. I need to log some info about the ongoing process in the browser console that is displayed <em>on the go</em>, not just when the PHP file has finished running.</p>
  
  <p>From the research I did, I get that there are two difficulties:</p>
  
  <ol>
  <li>Getting PHP to spit out something before it's done</li>
  <li>Getting jQuery/JS to display it on the go</li>
  </ol>
  
  <p>To address #1, I've tried:</p>
  
  <pre><code>echo "started"."&lt;br&gt;";
  
  foreach (array("done this", "done that","had a coffee","burp") as $msg) {
      sleep(3);
      echo $msg."&lt;br&gt;";
      flush();
      ob_flush();
  }
  </code></pre>
  
  <p><code>flush(); ob_flush();</code> is supposed to do the job, although as you can test <a href="http://constances-web-dev.vjf.inserm.fr/constances-web/ajax-test.php" rel="nofollow noreferrer">here</a> it does not strictly display ever 3s as it's expected to. Any suggestion to get it to display as expected?</p>
  
  <p>As for how to address #2, I have explored a solution involving <code>XMLHttpRequest</code>, but I'm not familiar with the subject so not sure neither what to look for nor if it's the right direction...</p>
  
  <p>Here is the test code of what I'm trying to get to run:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#run").click(function(e) {
    $.ajax({
      url: "http://constances-web-dev.vjf.inserm.fr/constances-web/ajax-test.php",
      xhr: function() {
        // get the native XmlHttpRequest object
        var xhr = $.ajaxSettings.xhr();
        xhr.addEventListener('readystatechange', function(e) {
          console.log(e)
        });
        // set the onprogress event handler
        //xhr.onprogress = function(evt){ console.log(evt.target.response) } ;
        // set the onload event handler
        return xhr;
      },
      success: function(msg) {
        console.log(msg);
      },
      error: function(msg) {
        console.log("Erreur: " + msg);
      }
    })
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="run"&gt;go&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Subsidiary question:</em> Is there an (easy) way to go around the cross-origin restriction in order to get an AJAX example to work in a SO snippet?</p>