Hi everyone welcome to studywithdemo. Today im very much interested to tell about how to create random jquery progress bar using ajax and servlet because this is the first tutorial i have done after learning jquery. Jquery is one of the favorite subject to me. Using jQuery most of the work becomes easy and it makes UI more interactive and rich look.
Before going into the example I want to tell one thing here am not covering any file upload and download progress bar only showing how progress bar will works on server side. This example completely not suitable for everyone but definitely creates a basic idea, using this you can modify and implement code according to your requirements. To create random progress bar I have used ajax and servlet as serverside technology.
Each time ajax pass a value to servlet and servlet increases number randomly and sends the response back this will continue untill the progress bar will complete 100% thats it just simple logic no need to worry look at the code. We can also increase or decrease the progress bar speed by changing the setTimeout value and easily customize the progressbar label text.
ProgressBarServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ProgressBarServlet
extends HttpServlet
{
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
Random r = new Random();
try
{
int pval = Integer.parseInt(request.getParameter("pval"));
float randomval = r.nextFloat();
int seedval = (int)(10.0F * randomval);
out.print(pval + seedval);
}
finally
{
out.close();
}
}
}
index.jsp
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar Random</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
var pval=0;
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
progress();
function progress() {
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
pval=xmlhttp.responseText;//getting result from servlet
progressbar.progressbar( "value",parseInt(pval));//converting string result to integer
}
}
xmlhttp.open("GET","ProgressBarServlet?pval="+pval,true);//value sending to servlet
xmlhttp.send();
var val=parseInt(pval);
if ( val < 100 ) {
setTimeout( progress, 1000 );
}
}
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label"></div></div>
</body>
</html>
web.xml
<servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<servlet-class>ProgressBarServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>/index.jsp</welcome-file>
</welcome-file-list>
Me funciono perfecto gracias
ReplyDelete