Wednesday 29 July 2015

How to show loading image while calling AJAX request


 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
            body, html {
            margin:0;
            padding;
            height:100%
        }

        a {
            font-size:1.25em;
        }

        #content {
            padding:25px;
        }

        #fade {
            display: none;
            position:absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: #ababab;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .70;
            filter: alpha(opacity=80);
        }

        #modal {
            display: none;
            position: absolute;
            top: 45%;
            left: 45%;
            width: 100px;
            height: 100px;
            padding:20px 15px 15px;
            border: 3px solid #ababab;
            box-shadow:1px 1px 10px #ababab;
            border-radius:20px;
            background-color: white;
            z-index: 1002;
            text-align:center;
            overflow: auto;
        }

        #results {
            font-size:1.25em;
            color:red
        }
   
    </style>
   
   
    <script>
            function openModal() {
                document.getElementById('modal').style.display = 'block';
                document.getElementById('fade').style.display = 'block';
        }

        function closeModal() {
            document.getElementById('modal').style.display = 'none';
            document.getElementById('fade').style.display = 'none';
        }
               
        function loadAjax() {
            document.getElementById('results').innerHTML = '';
            openModal();
            var xhr = false;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            }
            else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            if (xhr) {
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        closeModal();
                        document.getElementById("results").innerHTML = xhr.responseText;
                    }
                }
                xhr.open("GET", "load.jsp", true);
                xhr.send(null);
            }
        }
   
    </script
</head>
<body>
    <div id="content">

        <!--<a href="/articles/1506-how-to-display-image-spinner-ajax-request">Click here to return to the
        tutorial.</a><br /><br /> <h2>Demo</h2> -->
   
       
        <a href="javascript: void(0);loadAjax();">Click here to load get data via Ajax</a><br /><br />
        <div id="results"><!-- Results are displayed here --></div>
        <div id="fade"></div>
        <div id="modal">
            <img id="loader" style="width:95px;height:95px;border:0px;" src="loadImage.gif" />
        </div>
    </div>
</body>
</html>





Wednesday 15 July 2015

Preventing User to go back after logout in jsp


 <%
  response.setHeader("Cache-Control","no-cache");
  response.setHeader("Cache-Control","no-store");
  response.setHeader("Pragma","no-cache");
  response.setDateHeader ("Expires", 0);

  if(session.getAttribute("user")==null)
      response.sendRedirect("index.jsp");

  %>