And Image Viewer using Ajax

This is a image viewer made using Ajax its cool no refreshing and realy quick thats the good

of Ajax

var xmlHttp;
function show(i){
document.getElementById("state").value="1";
document.getElementById("num").value=i;
showPics();
}

function showPics()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("Get","getpics",true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
if(xmlHttp.status==200){
var pics=new Array();

var xmlDoc=xmlHttp.responseXML.documentElement;
var links = xmlDoc.getElementsByTagName("picture");
var state= document.getElementById("state").value;
var num = document.getElementById("num").value;

for ( var i = 0; i < 3; ++i )
{
try{
pics[i] = links[i].childNodes[0].nodeValue.toString();



}catch(err){
break;
}

}


if(state=="0"){
for(x in pics){

var l=(++x);



document.getElementById("pic"+l).src="./images/"+pics[--x];
}
}else{

document.getElementById("pict").src="./images/"+pics[--num];
}


}
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

</script>
<input type="hidden" name="name" value="0" id="state"/>
<input type="hidden" name="name" value="" id="num"/>

<pre>
<center><img src="" id="pict" width="344" height="200"/></center>

<%
connection con=new connection();
ResultSet rst=con.getDataP();
rst.last();
int num=rst.getRow();
for(int i=1;i<=num;i++){            out.print("&ltimg src="+""+" width="+"128"+" onclick="+"show("+i+");"+" height="+"133"+" id="+"pic"+i+"<");            }          %>  

You should have a connection class to connect to a database (here i used mysql and the Ide was netbeans) this code should do the job to get data

public ResultSet getDataP(){
ResultSet rst=null;
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost/[name of the database]","root","[your mysql password");
Statement stm=con.createStatement();
rst=stm.executeQuery("select * from [name of the table]");
}catch(Exception e){

}
return rst;
}

And for the command xmlHttp.open("Get","getpics",true); to work you should have a servlet that converts the database info to xml format

lets name it getPics.java

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
response.setHeader("Cache-Control","no-cache");
try {

connection con=new connection();
ResultSet rst=con.getDataP();
out.print("<userpic>");
while(rst.next()){

out.print("<picID>"+rst.getString(1)+"</picID>");
out.print("<picture>"+rst.getString(2)+"</picture>");


}
out.print("</userpic>");

}catch(Exception e) {

}
}