ajax 请求 添加正在加载中 遮罩层

JS文件 

/*****************************************************************遮罩层函数*****************************************************************************/

//创建遮罩层函数体
function createMask(){
    var node=document.createElement('div');
        node.setAttribute('id','backdrop');
        node.style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:rgba(0,0,0,0.6);";
        node.style.display="none";
    var html='<div style="position: fixed; top: 38%; left: 38%; z-index: 1001;">';
        html+='<div style="text-align:center;">';
        html+='<img src="/Public/Home/images/loader.gif" style="60px;height:60px;">';
        html+='<div style="padding-left:10px;font-size:14px;color:#FFF;">网络请求中...</div>';
        html+='</div>';
        html+='</div>';
        node.innerHTML=html;
    var body=document.querySelector('body');
        body.appendChild(node);    
}

//开启遮罩层函数体
function showMask(){
    var backdrop=document.getElementById('backdrop');
        backdrop.style.display='block';
}

//关闭遮罩层函数体
function closeMask(){
    var backdrop=document.getElementById('backdrop');
        backdrop.style.display='none';
}

//页面初始化，开启遮罩
createMask();
showMask();

//页面初始化完成，关闭遮罩
document.onreadystatechange = function(){
    if(document.readyState == "complete"){
        closeMask();
    }
}

hml中的 ajax

$.ajax({       
   beforeSend: function () {
       showMask();
   },
   success : function(res){
                    
   },
   complete:function () {
       closeMask();
   }
});