# 3
@ktsystemteq
Hi friend,
Well i have coded a sample of the similar sort( which refersh table data in a div field but regarding implementation of scrollbar is upto you) where i have made use to XmlHttpRequest Object Calls (AJAX calls) to refersh the field view for every 10 secs. You might have a look of it and may check whether that suits your application or not....
Index.Jsp :
=======
<%@page language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Automatic Drop-Down Updation</title>
<script language="javascript">
// Global Variable for XmlHttp Request Object
var xmlhttp
// Timer Variables
var c = 0
var t
/* Synchronized Counter Function */
function syncCount(){
document.getElementById('txt').innerHTML = "Timer : " + c
c = c+1
// Setting timeout for every second
t = setTimeout("syncCount()",1000)
// If Refershes the Table for every 10 seconds
if(c % 10 == 0 && c != 0){
// calling a Servlet to Refersh Drop-Down field
refreshCombo()
}
}
/* A function which calls a servlet named AjaxServlet to get XmlData using XmlHttpObject */
function refreshCombo(){
xmlhttp = null
// code for initializing XmlHttpRequest Object On Browsers like Mozilla, etc.
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest()
}
// code for initializing XmlHttpRequest Object On Browsers like IE
else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
if (xmlhttp != null){
// Setting the Servlet url to get XmlData
url = "AjaxServlet";
// Course of Action That Should be Made if their is a change in XmlHttpRequest Object ReadyState NOTE : it is 4 when it has got request from CGI
xmlhttp.onreadystatechange = getResponseAction;
// Open the Request by passing Type of Request & CGI URL
xmlhttp.open("GET",url,true);
// Sending URL Encoded Data
xmlhttp.send(null);
}
else{
// Only Browsers like IE 5.0,Mozilla & all other browser which support XML data Supports XmlHttpRequest Object // In the Below case it looks as if the browser is not compatiable
alert("Your browser does not support XMLHTTP.")
}
}
/* Used for verifing right ReadyState & Status of XmlHttpRequest Object returns true if it is verified */
function verifyReadyState(obj){
// As Said above if XmlHttp.ReadyState == 4 then the Page Has got Response from WebServer
if(obj.readyState == 4){
// Similarly if XmlHttp.status == 200 it means that we have got a Valid response from the WebServer
if(obj.status == 200){
return true
}
else{
alert("Problem retrieving XML data")
}
}
}
/* Action that has to take place after getting reponse */
function getResponseAction(){
// Verifying State & Status
if(verifyReadyState(xmlhttp) == true){
// Building a DOM parser from Response Object
var response = xmlhttp.responseXML.documentElement
// Deleting all the Present Elements in the Clearing Existing Table
drRemove()
// Checking for the Root Node
var x = response.getElementsByTagName("option")
var val
var tex
var optn
var txt = "<table border=1><tr><th align=center>Emp id</th><th align=center>Name</th></tr>"
for(var i = 0;i < x.length; i++){
optn = document.createElement("OPTION")
var er
txt = txt + "<tr>"
// Checking for the tag which holds the value of the Drop-Down combo element
val = x[i].getElementsByTagName("val")
{
try{
// Creating a table data field with "empid" of the employee
txt = txt +"<td>"+val[0].firstChild.data+"</td>"
} catch(er){
}
}
// Checking for the tag which holds the Text of the Drop-Down combo element
tex = x[i].getElementsByTagName("text")
{
try{
// Creating a table data field with "name" of the employee
txt = txt +"<td>"+tex[0].firstChild.data+"</td>"
} catch(er){
}
}
txt = txt + "</tr>"
}
txt = txt + "</table>"
document.getElementById('TableRefersh').innerHTML = txt
}
}
/* Function clears the present div value or clears the existing table*/
function drRemove(){
document.getElementById('TableRefersh').innerHTML = " "
}
</script>
</head>
<body onload="syncCount()">
<pre> <font color='blue' size='4'><div id='txt'></div></font></pre>
<div id='TableRefersh'></div>
</body>
</html>
AjaxServlet.java :
============
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
*
* @author RaHuL
*/
public class AjaxServlet extends HttpServlet {
/** Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
* @param request servlet request
* @param response servlet response
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Sets the content type made to xml specific
response.setContentType("text/xml");
//Initializing PrintWriter
PrintWriter out = response.getWriter();
// Creating an instance of XmlBean Which generates XmlData From Business Logic specified
XmlBean xml = new XmlBean();
// Method to Generate XMLDATA
String buffer = xml.getXmlData();
// If Close of DB connections are succefull then write the content to the printstream
if(xml.close() == true)
out.write(buffer);
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Calls a Method called processRequest Which Processes the request which was made by the Browser Page
processRequest(request, response);
}
}
XmlBean.java :
============
import java.sql.*;
import java.util.*;
import java.io.*;
/**
*
* @author RaHuL
*/
public class XmlBean {
private Connection con = null;
private PreparedStatement pstmt = null;
private ResultSet rs = null;
// Specifing CLASSNAME of the Driver Type
private String CLASSURL = "sun.jdbc.odbc.JdbcOdbcDriver";
/* Specifing CONNECTIONURL to a DSN named TestDsn
* Please Make Sure you create a DSN Named TestDsn to your database which holds EMP table
*/
private String CONNECTIONURL = "jdbc:odbc:TestDsn";
boolean IS_ESTABLISHED = false;
/** Creates a new instance of XmlBean and also establishes DB Connections */
public XmlBean() {
try{
Class.forName(CLASSURL);
con = DriverManager.getConnection(CONNECTIONURL,"admin","");
IS_ESTABLISHED = true;
} catch(SQLException sqe){
sqe.printStackTrace();
} catch(Exception exp){
exp.printStackTrace();
}
}
/* Generates XmlData For the Business Logic Specified */
public String getXmlData(){
String XmlBuffer = "";
if(IS_ESTABLISHED == true){
try{
pstmt = con.prepareStatement("SELECT empid,name FROM EMP");
rs = pstmt.executeQuery();
if(rs != null){
XmlBuffer = XmlBuffer + "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";
XmlBuffer = XmlBuffer + "<!-- Edited by Rahul Sharma-->";
// Root Node
XmlBuffer = XmlBuffer + "<SampleTable>";
while(rs.next()){
String value = rs.getString(1);
String text = rs.getString(2);
// Sub-root Node
XmlBuffer = XmlBuffer + "<option>";
// node which holds value of drop-down combo
XmlBuffer = XmlBuffer + "<val>"+value+"</val>";
// node which holds text for drop-down combo
XmlBuffer = XmlBuffer + "<text>"+text+"</text>";
XmlBuffer = XmlBuffer + "</option>";
}
XmlBuffer = XmlBuffer + "</SampleTable>";
}
}catch(SQLException sqe){
sqe.printStackTrace();
} catch(Exception exp){
exp.printStackTrace();
}
}
return(XmlBuffer);
}
/* Closes the DB Connection Conmpletely */
public boolean close(){
if(IS_ESTABLISHED == true){
try{
pstmt.close();
con.close();
return(true);
} catch(SQLException sqe){
sqe.printStackTrace();
} catch(Exception exp){
exp.printStackTrace();
}
}
return(false);
}
}
Sample XML String generated from the XmlBean :
=======================================
<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>
<!-- Edited by Rahul Sharma-->
<SampleTable>
<option>
<val>3244</val>
<text>Ram</val>
</option>
<option>
<val>3245</val>
<text>Robert</val>
</option>
<option>
<val>3246</val>
<text>Rahim</val>
</option>
</SampleTable>
REGARDS,
RAHUL
