Wednesday, December 29, 2010

Simple Ajax Clock

AJAX:
Web.xml
<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
             version="2.4">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
            <welcome-file>
            index.jsp
        </welcome-file>
    </welcome-file-list>
</web-app>

Index.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@page contentType="text/html" import="java.util.*" %>

<%--
The taglib directive below imports the JSTL library. If you uncomment it,
you must also add the JSTL library to the project. The Add Library... action
on Libraries node in Projects view can be used to add the JSTL 1.1 library.
--%>
<%--
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
--%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
      
        <%
        response.setHeader("Cache-Control","no-cache");
        Date a= new java.util.Date();
        out.write(a.toString());
       // response.setHeader("Refresh","3");
        %>
    </head>
    <body>
   </body>
</html>

Caller.jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
">

<html >
<head>
    <meta http-equiv="refresh" content="5">
<script LANGUAGE="JavaScript">
  
function createRequestObject(){
var req;
        if(window.XMLHttpRequest){
        //For Firefox, Safari, Opera
        req = new XMLHttpRequest();
        }
            else if(window.ActiveXObject){
            //For IE 5+
            req = new ActiveXObject("Microsoft.XMLHTTP");
            }
    else{
    //Error for an old browser
    alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
    }

return req;
}

//Make the XMLHttpRequest Object
var http = createRequestObject();

function sendRequest(method, url){
        if(method == 'get' || method == 'GET'){
        http.open(method,url);
        http.onreadystatechange = handleResponse;
        http.send(null);
        }
}

function handleResponse(){
    if(http.readyState == 4 && http.status == 200){
        var response = http.responseText;
        if(response){
        document.getElementById("ajax_res").innerHTML = response;
        }
    }
}

</script>

<title>JSP Page using AJAX</title>
 <% response.setHeader("Refresh","1"); %>
</head>
<!--
<body onmouseover="sendRequest('GET','index.jsp')"> -->
<body onload="sendRequest('GET','index.jsp')">
  
<h>Server Date Time:</h>
<div id="ajax_res"> Time
</div>
</body>
</html>

Test.jsp
  <%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>


<HTML>
<HEAD>

<%

String action = request.getParameter("chkRefresh");
String refreshCmd = "";

if (action != null) {
refreshCmd = "setInterval('window.location.reload()', 4000);";
} else {
refreshCmd = " ";
action = "off";
}

%>

<SCRIPT LANGUAGE="JavaScript"><!--

<%=refreshCmd %>

function setAutoRefresh() {
data.submit();
}

//-->
</SCRIPT>

<TITLE>test.jsp</TITLE>
</HEAD>
<BODY>
<FORM NAME="data" ACTION="test.jsp" METHOD="post">

<% if (action.equalsIgnoreCase("off")) { %>
<P><INPUT type="checkbox" name="chkRefresh"
onclick="setAutoRefresh()">Auto Refresh OFF</P>
<%} else {%>
<P><INPUT type="checkbox" name="chkRefresh" onclick="setAutoRefresh()"
checked>Auto Refresh ON</P>
<% } %>

</FORM>
</BODY>
</HTML>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)