java ajax 进度条_java使用ajax实现进度条
在最近的一个项目中,有一个上传功能:上传一个cvs文件,然后解析此文件并写入数据库
由于经常需要传很大的文件,客户完成此功能往往需要40分钟,在这个过程中,页面也没有任何提示,用户体验非常不好?
为何不用ajax作一个进度条呢?
分两步完成此需求:
一:写一个简单的ajax,实现最简单的进度条功能。
二:把此进度条改造为项目可用的进度条。
一:最简单的进度条
1。客户端每2秒发送一个createXMLHttpRequest请求给服务端.并得到服务端返回的进度数据.根据服务端返回的数据,用Javascript 更新一个table的width,
这样就模拟了一个进度条.
progressBar.html.内容如下:
Ajax Progress Bar
var xmlHttp;
var key;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function go() {
createXMLHttpRequest();
clearBar();
var url = "ProgressBarServlet?task=create";
var button = document.getElementById("go");
button.disabled = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
function goCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 2000);
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + key;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function pollCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var progress = document.getElementById("progress");
var progressPersent = document.getElementById("progressPersent");
progress.width = percent_complete + "%";
progressPersent.innerHTML = percent_complete + "%";
if (percent_complete < 100) {
setTimeout("pollServer()", 2000);
} else {
document.getElementById("complete").innerHTML = "Complete!";
//document.getElementById("go").disabled = false;
}
}
}
}
function clearBar() {
var progress_bar = document.getElementById("progressBar");
var progressPersent = document.getElementById("progressPersent");
var complete = document.getElementById("complete");
progress_bar.style.visibility = "visible"
progressPersent.innerHTML = " ";
complete.innerHTML = "Begin to upload this file...";
}
86% | ||
|
||
completed |
2:一个模拟servlet:ProgressBarServlet.java,内容如下:
package com.cyberobject.lcl.ajax;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
*
* @author nate
* @version
*/
public class ProgressBarServlet extends HttpServlet {
private int counter = 1;
/** Handles the HTTP GET
method.
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String task = request.getParameter("task");
String res = "";
if (task.equals("create")) {
res = "1";
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 + "";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("");
out.println(res);
out.println("");
out.close();
}
/** Handles the HTTP POST
method.
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/** Returns a short description of the servlet.
*/
public String getServletInfo() {
return "Short description";
}
}
3:在web。xml中配置好servlet映射:
ProgressBarServlet
ProgressBarServlet
com.cyberobject.lcl.ajax.ProgressBarServlet
ProgressBarServlet
/ProgressBarServlet
此时进度条已经可以运行了。接下来的工作就是把它移植到我们的系统。
二:
1:在写数据库的class DbOperater中,增加一个progress属性
private int progress;
2:在写数据库的class中,增加一个getProgress()方法:
public int getProgress()
{
return progress;
}
3: 在写库的for循环中, progress++;
4:在调用DbOperater的servlet中调用DbOperater的getProgress()方法,这样就为进度条提供了实时数据.
5:另外:servlet的doGet()用来获得进度数据,doPost()用来上传文件和写库操作.彼此分工明确.
特此存档.
java ajax 进度条_java使用ajax实现进度条相关推荐
- java保存图片进度条_Java上传文件进度条的实现方法(附demo源码下载)
本文实例讲述了Java上传文件进度条的实现方法.分享给大家供大家参考,具体如下: 东西很简单,主要用到commons-fileupload,其中有一个progressListener的接口,该接口可以 ...
- java 数据库插入数据_java向数据库插入N条数据
packageaction;importjava.sql.Connection;importjava.sql.DriverManager;importjava.sql.ResultSet;import ...
- java list 取两条_java list集合中有多条数据随机两条一组
展开全部 public static void main(String[] args) { Random random = new Random(); ArrayList src = new Arra ...
- java mvc上传文件进度_java相关:springMVC+ajax实现文件上传且带进度条实例
java相关:springMVC+ajax实现文件上传且带进度条实例 发布于 2020-7-5| 复制链接 本篇文章主要介绍了springMVC+ajax实现文件上传且带进度条实例,具有一定的参考价值 ...
- ajax加载进度百分比,在ajax中显示加载百分比的进度条,php
您好我正在使用ajax加载数据库内容.我想显示加载或图像的总百分比.在ajax中显示加载百分比的进度条,php 这是我的脚本 function name1(str) { if (str.length= ...
- ajax实现上传文件的进度,基于Ajax技术实现文件上传带进度条
1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
- java中ajax的用途_java Ajax的应用
一.Ajax的使用步骤 步一:创建AJAX异步对象,例如:createAJAX() 步二:准备发送异步请求,例如:ajax.open(method,url) 步三:如果是POST请求的话,一定要设置A ...
- ssm上传文件进度条_Java 单文件、多文件上传 / 实现上传进度条
日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传 ...
- Java渐变进度条_Android ProgressBar自定义图片进度,自定义渐变色进度条
java.lang.Object ↳android.view.View ↳android.widget.ProgressBar 直接子类 AbsSeekBar 间接子类 RatingBar, Seek ...
最新文章
- Windows Azure 解决方案系列:组合拍卖供应商以云服务快速拓展,并节省成本
- yolov5 simplepose人体姿态
- Spring OXM-XStream流化对象
- web前端----JavaScript的DOM(二)
- linux如何运行qt源码,Linux/Ubuntu下编译Qt4.8.2源码
- mysql 变量作表名查询_使用MySQL函数变量作为表名查询
- Nginx日志分割处理
- fastjason 0day 漏洞修复
- 浅谈几个数学问题的认识
- VMware虚拟机安装Win10系统后出现蓝屏
- 从迁移学习到图像合成
- 帆软所有销量为0的显示为空值_fineReport网络报表工具使用总结
- 程序员电脑(减少辐射)(¥37)
- 北京网友加拨河北保定区号电话抢票引争议
- 游戏服务器和普通服务器的区别
- 导学目录-学如逆水行舟
- 【译文】四十二种谬误(一)
- 最爽摸鱼听音乐——使用VS Code解锁网易云灰色歌曲(VSC Netease Music+UnblockNeteaseMusic)
- golang testify 测试库
- 百度地图使用的详细教程
热门文章
- 在c语言程序中可把整型数,C语言程序设计(2).doc
- 服务器不能安装exe文件,云服务器安装exe文件
- java形状函数_java基础:10.4 Java FX之形状
- mysql then_mysql语法之case when then与列转行
- 从入门到入土:[SEED-Lab]-幽灵攻击|Spectre Attack Lab|详细说明|实验步骤|实验截图
- 当推荐系统遇见知识图谱会发生什么?
- OpenSLR 中国镜像背后的数据存储服务商,原来是这样一家公司!
- 面对自然灾害,科技能做什么?
- 跨过虚拟化技术浪潮,这家企业快步入局云数据管理​
- 如何高效地远程部署?Fabric 来支招!