JavaScript function to handle client-server command-based communication

serverExecute.js

/*\
|*|   How to use serverExecute:
|*|     A JavaScript object is passed as a parameter to serverExecute in order to send a command to the server
|*|   where that object is sent to the backend server with all it parameters as the request parameters.
|*|   however, the following parameters are processed by serverExecute itself:
|*|
|*|     "onreturn" : type = function: Default: function(r){alert(r);}
|*|       A function that will be called once the server respond to the http request containing the command. 
|*|         The server response is passed to the specified function.
|*|     
|*|     "loading-element" : type = string: Default: "waiting"
|*|       Id of a gif or whatever evement that indicates that the command is being processed. by default, 
|*|         the value of this is "waiting" and it's assigned with display:block once the command is sent
|*|         and then it changes into display:none once the server responds.
|*| 
|*|     "loading-style" : type = string: Default: "display:block"
|*|       Style attributes that will be assigned as inline style on loading-element while the command is 
|*|         being proccessed and removed once the server responds. Default is "display:block"
|*|
|*|     "overlay" : type = boolean: Default: true
|*|       When set to true, The body of the html document is styled with no srollbars while the command 
|*|         is being proccessed. Default is true unless loading-element is defined.
\*/

function serverExecute(data){
	var keys = Object.keys(data);
    var xhttp = new XMLHttpRequest();
	xhttp.open("POST", window.location.href);
	xhttp.onload = (function () {
	    if("loading-element" in data){
	        if("overlay" in data && data.overlay){
	            document.body.setAttribute("class", "");
	        }
	        if("loading-style" in data){
	            document.getElementById(data["loading-element"]).style = "";
	        }
	        else {
	            document.getElementById(data["loading-element"]).style.display = "none";
	        }
	    }
	    else {
	        document.getElementById('waiting').style.display = "none";
	        if("overlay" in data && !data.overlay){
	            document.body.setAttribute("class", "");
	        }
	    }
	    if("onreturn" in data){
	        data.onreturn(xhttp.responseText);
	    }
	    else {
	        alert(xhttp.responseText);
	    }
    });
    if("loading-element" in data){
        if("overlay" in data && data.overlay){
            document.body.setAttribute("class", "noscroll");
        }
        if("loading-style" in data){
            document.getElementById(data["loading-element"]).style = data["loading-style"];
        }
        else{
            document.getElementById(data["loading-element"]).style.display = "block";
        }
    }
    else{
        if("overlay" in data && !data.overlay){
            document.body.setAttribute("class", "noscroll");
        }
        document.getElementById('waiting').style.display = "block";
    }
    
	
	requestParams = new FormData();
	for(var ii=0; ii<keys.length; ii++){
	    if(keys[ii] != "onreturn"){
	        requestParams.append(keys[ii], data[keys[ii]]);
	    }
    }
	xhttp.send(requestParams);
}