Untitled

<!DOCTYPE html>
<html lang="en">
	<head>
		    <meta charset="UTF-8">
		        <title>Application Home Page</title>
			    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
			<style>
				.onoffswitch {
				    position: relative; width: 90px;
				    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
				}
				.onoffswitch-checkbox {
				    display: none;
				}
				.onoffswitch-label {
				    display: block; overflow: hidden; cursor: pointer;
				    border: 2px solid #999999; border-radius: 20px;
				}
				.onoffswitch-inner {
				    display: block; width: 200%; margin-left: -100%;
				    transition: margin 0.3s ease-in 0s;
				}
				.onoffswitch-inner:before, .onoffswitch-inner:after {
				    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
				    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
				    box-sizing: border-box;
				}
				.onoffswitch-inner:before {
				    content: "ON";
				    padding-left: 10px;
				    background-color: #FF7701; color: #FFFFFF;
				}
				.onoffswitch-inner:after {
				    content: "OFF";
				    padding-right: 10px;
				    background-color: #EEEEEE; color: #999999;
				    text-align: right;
				}
				.onoffswitch-switch {
				    display: block; width: 18px; margin: 6px;
				    background: #FFFFFF;
				    position: absolute; top: 0; bottom: 0;
				    right: 56px;
				    border: 2px solid #999999; border-radius: 20px;
				    transition: all 0.3s ease-in 0s;
				}
				.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
				    margin-left: 0;
				}
				.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
				    right: 0px;
				}
</style>
	</head>
	<body>
	<div class="onoffswitch">
	    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
	    <label class="onoffswitch-label" for="myonoffswitch">
	        <span class="onoffswitch-inner"></span>
	        <span class="onoffswitch-switch"></span>
	    </label>
	</div>
	<script>
		$('input[name=onoffswitch]').change(function(){
		    if($(this).is(':checked')) {
		        handleAJAXRequest('on');
		    } else {
		        handleAJAXRequest('off')
		    }
		});
        function handleAJAXRequest(key){
		          url = "switch"+key;
		          var xmlHttpReq = new XMLHttpRequest();
		          xmlHttpReq.open("GET", url, true);
		          xmlHttpReq.send(null);
		          xmlHttpReq.onreadystatechange = function() {
				              if (xmlHttpReq.readyState === 4) {
						                      console.log(xmlHttpReq.responseText);
						                      if (xmlHttpReq.status === 200) {
									                         console.log('successful');
									                      } else {
												                         console.log('failed');
												                      }
						                  }
				            }
		        }
    </script>
	</body>
</html>