html要素をjavascript xhrリクエスト関数

Question

jqueryで表示する必要があるsignle html要素が純粋なjavascript xhr要求メソッドに含まれています。これは、要求が完了した時点で隠さずに、成功、エラーで私は再びそれを隠したいと思います。

HTML

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

問題は、私は常に$アヤックス（）文（エラー、成功、beforeSend）によって、この時間は、私は純粋なJavaScriptを持っていることをやるということです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(); 
    }; 
} 

xhr要求と私はそれを行う方法を知らない。

私が示したように、これはJavaScriptをXHRに変換たい、より明確にするために：

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

EDITED

私は成功せず、また、しようと試み：

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