javascript - 在javascript xhr请求函数上显示/隐藏html元素

Question

我有一个signle html元素，我需要通过jquery显示和隐藏到一个纯javascript xhr请求方法中，现在它总是在请求完成/成功时显示元素而不隐藏，如果出错我想再次隐藏它。

html

<div class="ajax-loading">Loading ..</a>

xhr方法

function post(_url, _callback,_data){

  var xhr = createCORSRequest('POST',_url);
  if (!xhr){
    throw new Error('CORS not supported');
  }
  $('.ajax-loading').show();

  xhr.send(_data);

  /*SUCCESS -- do somenthing with data*/
  xhr.onload = function(){
    // process the response.
    _callback(xhr.responseText);
    $('.ajax-loading').hide();
  };

  xhr.onerror = function(e){
    console.log(e);
    $('.ajax-loading').show();
  };
}

问题是我总是通过 $.ajax() statements(error,success,beforeSend) 来做到这一点，这次我有纯 javascript xhr 请求，我不知道该怎么做。

更清楚地说，我希望将其转换为 xhr javascript，如下所示：

$.ajax({
/*data etc ...*/
error:function(){
$('.ajax-loading').show();
},
success:function(){
$('.ajax-loading').hide();
},
beforeSend:function(){
$('.ajax-loading').show();
}
});

已编辑

我也尝试过但没有成功：

function get(_url, _callback){
  var xhr = createCORSRequest('GET',_url);
  if (!xhr){
    throw new Error('CORS not supported');

  }


  xhr.send();
  xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 /*COMPLETE STATEMENT*/){
            alert(xhr.readyState);
        }
};
  /*SUCCESS -- do somenthing with data*/
  xhr.onload = function(){
    // process the response.
    _callback(xhr.responseText);

  };

  xhr.onerror = function(e){
    console.log(e);
  };
}

Answer 1

检查这个： Wiki for xmlhttprequest

在 xmlHTTPRequest 中，您必须检查对象的状态以了解请求发生了什么。

Answer 2

固定

xhr.onloadstart = function(){
       $('.ajax-loading').show();
  }

  xhr.onloadend = function(){
      $('.ajax-loading').hide();
  }