AJAX 进度条实现代码
技术 / 管理员 发布于 8年前 438
-
上一条：
ajax 调用后台方法大家可以讨论下
下一条：
Ajax 核心框架函数及例子 - 近期文章
- 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
- 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布！(0个评论)
- 近期评论
-
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论 工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人.. -
123 在
Clash for Windows作者删库跑路了，github已404中评论 按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分.. -
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了，今天刚看，已经添加。.. -
博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了，可以看看近期评论的其他文章.. -
1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开，博主百忙中能否发个APP下载链接，佛跳墙或极光..
效果如下：
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';//进度条的颜色
var span_id = "block";
var clear = " ";
function createXMLHttpRequest()//创建XMLHttpRequest对象
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function go()
{
createXMLHttpRequest();//创建XMLHttpRequest对象
checkDiv();//显示滚动条
xmlHttp.onreadystatechange = callBack;//设置回调函数
var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//请求的地址
var button = document.getElementById("go");
button.disabled = true;//设置按钮不可用
xmlHttp.open("get",url,true);//打开对服务器的连接
xmlHttp.send();//发送请求
}
function callBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
setTimeout("pollServer()",500);//定时调用
}
}
}
function pollServer()
{
createXMLHttpRequest();
var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key;
xmlHttp.onreadystatechange = pollCallBack;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function pollCallBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0]
.firstChild.data;//从服务器端获得响应信息
var index = processResult(percent_complete);
for(var i = 1; i<=index; i++)
{
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i+1;
if(next_cell > index && next_cell <= 9)
{
document.getElementById("block"+next_cell).innerHTML = percent_complete + "%";
}
}
if(index <9 )
{
setTimeout("pollServer()",500);
}
else
{
document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("go").disabled = false;
}
}
}
}
function processResult(percent_complete)
{
var ind;
if(percent_complete.length == 1)
{
ind = 1;
}
else if(percent_complete.length == 2)
{
ind = percent_complete.substring(0,1);
}
else
{
ind = 9;
}
return ind;
}
function checkDiv()
{
var progress_bar = document.getElementById("progressBar");
if(progress_bar.style.visibility == "visible")
{
clearBar();
document.getElementById("complete").innerHTML = "";
}
else
{
progress_bar.style.visibility = "visible";
}
}
function clearBar()
{
for(var i =1; i<10; i++)
{
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process:
<input type="button" value="Launch" id="go" onclick="go()"/>
<p>
<table align="center">
<tbody>
<tr>
<td>
<div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1"> </span>
<span id="block2"> </span>
<span id="block3"> </span>
<span id="block4"> </span>
<span id="block5"> </span>
<span id="block6"> </span>
<span id="block7"> </span>
<span id="block8"> </span>
<span id="block9"> </span>
</div>
</td>
</tr>
<tr><td align="center" id="complete"></td></tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Progress Bar</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color = 'gray';//进度条的颜色
var span_id = "block";
var clear = " ";
function createXMLHttpRequest()//创建XMLHttpRequest对象
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
function go()
{
createXMLHttpRequest();//创建XMLHttpRequest对象
checkDiv();//显示滚动条
xmlHttp.onreadystatechange = callBack;//设置回调函数
var url = "/AjaxDemo/servlet/ProgressBarServlet?task=create";//请求的地址
var button = document.getElementById("go");
button.disabled = true;//设置按钮不可用
xmlHttp.open("get",url,true);//打开对服务器的连接
xmlHttp.send();//发送请求
}
function callBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
setTimeout("pollServer()",500);//定时调用
}
}
}
function pollServer()
{
createXMLHttpRequest();
var url="/AjaxDemo/servlet/ProgressBarServlet?task=poll&key="+key;
xmlHttp.onreadystatechange = pollCallBack;
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
function pollCallBack()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0]
.firstChild.data;//从服务器端获得响应信息
var index = processResult(percent_complete);
for(var i = 1; i<=index; i++)
{
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i+1;
if(next_cell > index && next_cell <= 9)
{
document.getElementById("block"+next_cell).innerHTML = percent_complete + "%";
}
}
if(index <9 )
{
setTimeout("pollServer()",500);
}
else
{
document.getElementById("complete").innerHTML = "Complete!";
document.getElementById("go").disabled = false;
}
}
}
}
function processResult(percent_complete)
{
var ind;
if(percent_complete.length == 1)
{
ind = 1;
}
else if(percent_complete.length == 2)
{
ind = percent_complete.substring(0,1);
}
else
{
ind = 9;
}
return ind;
}
function checkDiv()
{
var progress_bar = document.getElementById("progressBar");
if(progress_bar.style.visibility == "visible")
{
clearBar();
document.getElementById("complete").innerHTML = "";
}
else
{
progress_bar.style.visibility = "visible";
}
}
function clearBar()
{
for(var i =1; i<10; i++)
{
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Launch long-running process:
<input type="button" value="Launch" id="go" onclick="go()"/>
<p>
<table align="center">
<tbody>
<tr>
<td>
<div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1"> </span>
<span id="block2"> </span>
<span id="block3"> </span>
<span id="block4"> </span>
<span id="block5"> </span>
<span id="block6"> </span>
<span id="block7"> </span>
<span id="block8"> </span>
<span id="block9"> </span>
</div>
</td>
</tr>
<tr><td align="center" id="complete"></td></tr>
</tbody>
</table>
</body>
</html>
复制代码 代码如下:
package cn.Ajax.test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class ProgressBarServlet extends HttpServlet {
private int counter = 1;
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String task = request.getParameter("task");
String res="";
if(task.equals("create")){
res = "<key>1</key>";
counter = 1;
}
else{
String percent = "";
switch (counter) {
case 1: percent = "10";break;
case 2: percent = "23";break;
case 3: percent = "35";break;
case 4: percent = "51";break;
case 5: percent = "64";break;
case 6: percent = "73";break;
case 7: percent = "89";break;
case 8: percent = "100";break;
}
counter++;
res ="<percent>"+percent+"</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
package cn.Ajax.test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class ProgressBarServlet extends HttpServlet {
private int counter = 1;
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String task = request.getParameter("task");
String res="";
if(task.equals("create")){
res = "<key>1</key>";
counter = 1;
}
else{
String percent = "";
switch (counter) {
case 1: percent = "10";break;
case 2: percent = "23";break;
case 3: percent = "35";break;
case 4: percent = "51";break;
case 5: percent = "64";break;
case 6: percent = "73";break;
case 7: percent = "89";break;
case 8: percent = "100";break;
}
counter++;
res ="<percent>"+percent+"</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
