在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(); 
    }; 
} 

問題是，我始終做到這一點的$。阿賈克斯（）語句（錯誤，成功，beforeSend），這時候我已經純JavaScript xhr的要求，我不知道該怎麼做。

更加清楚我想此轉換爲XHR JavaScript的，如下所示：

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

EDITED

我還tryed沒有成功：

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

在xm lHTTPRequest你必須檢查對象的狀態，以瞭解請求發生了什麼。

Answer 2

固定

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

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