Ajax通话被取消

Question

This issue is literally driving me mad and I've already spent hours researching possible solutions :)

My problem is: I've got a script that, upon loading, makes some AJAX calls to the server. This script is a widget and is already configured for cross-domain , etc.

Everything was working fine until now when 1 request has stopped working. The crazy thing is that is only that one, the others work just fine.

You can see in the screenshot below:

This is the code I use to send AJAX requests:

ajax: {
  xhr: null,
  request: function (url, method, data, success, failure){
    if (!this.xhr){
      this.xhr = window.ActiveX ? new ActiveXObject("Microsoft.XMLHTTP"): new XMLHttpRequest();
    }
    var self = this.xhr;

    self.onreadystatechange = function () {
      if (self.readyState === 4 && self.status === 200){
        success(JSON.parse(self.responseText));
      } else if (self.readyState === 4) { // something went wrong but complete
        if (failure) {
          failure();
        } else { console.error("Ajax calls has failed."); }
      }
    };
    self.onerror = function() {
      if (failure) {
        failure();
      } else { console.error("Ajax calls has failed."); }
    };
    this.xhr.open(method,url,true);
    this.xhr.setRequestHeader('Content-Type', 'application/json');
    this.xhr.send(JSON.stringify(data));
  }
}

And this is the call that causes the problem:

this.ajax.request(
  this.getWidgetUrl() +"/check_referral_code",
  "POST",
  {uuid: SL.uuid, ref_code: ref},
  function(data) {
    if (data.response == "ok") {
      // Do something
    } else {
      console.error(data.message);
    }
  },
  function(data) {
    console.error(data.message);
  }
);

Can anybody help here?

UPDATE: The problem seems to be intermittent. If I reload the page it will literally happen 50% of the times