title: jQuery AJAX Calls Returns HTTP Status 0
body: <p>I'm having an issue with some users of a web application which makes a number of AJAX calls to update a backend database. Users will enter/scan in a new barcode and when they tab out of the field it will call the AJAX request to silently update the database via a PHP page.</p>
  
  <p>This works 99% of the time but on occasions users are reporting that they get this error message:</p>
  
  <pre><code>There was an error updating the Product Barcode - AJAX Request error. HTTP Status: 0
  </code></pre>
  
  <p>Here's the script in question:</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>$(document).ready(function() {
    $(".form-control.barcode").change(function() {
      var recid = $(this).closest('td').attr('id');
      var barcode = $(this).val();
      $this = $(this);
      $.post('updateProduct.php', {
        type: 'updateProduct',
        recid: recid,
        barcode: barcode
      }, function(data) {
        data = JSON.parse(data);
        if (data.error) {
          var ajaxError = (data.text);
          var errorAlert = 'There was an error updating the Product Barcode - ' + ajaxError + '. Please contact the IT Help Desk';
          $this.closest('td').addClass("has-error");
          $("#productBarcodeErrorMessage").html(errorAlert);
          $("#productBarcodeError").show();
          return; // stop executing this function any further
        } else {
          $this.closest('td').addClass("has-success")
          $this.closest('td').removeClass("has-error");
        }
  
      }).fail(function(xhr) {
        var httpStatus = (xhr.status);
        var ajaxError = 'There was an error updating the Product Barcode - AJAX request error. HTTP Status: ' + httpStatus + '. Please contact the IT Help Desk';
        $this.closest('td').addClass("has-error");
        $("#productBarcodeErrorMessage").html(ajaxError);
        $("#productBarcodeError").show();
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So it looks like the AJAX request is failing and it's returning an HTTP Status of 0 which doesn't sound like a valid HTTP status (I would expect a 4xx or 500 etc HTTP Status). I'm not sure what the 0 value represents and how I can go about locating the exact cause of this issue?</p>