Ajax实现进度条

最新推荐文章于 2021-08-06 17:50:08 发布
最新推荐文章于 2021-08-06 17:50:08 发布
阅读量7.8k 收藏 8
点赞数
分类专栏： ajax学习 文章标签： ajax xmlhttprequest function import string variables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jawsy/article/details/936457
版权

     业务逻辑：在web应用建立进度条。

    页面：progressBar.jsp

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Ajax进度条
</title>
<script type="text/javascript">
 //xmlHttpRequest对象
 var xmlHttp;
 var key;
        //进度条颜色
        var bar_color='gray';
  var span_id='block';
         var clear="&nbsp;&nbsp;&nbsp;"
        
        //创建xmlHttpRequest对象
        function createXMLHttpRequest(){
         if (window.ActiveXObject){
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if(window.XMLHttpRequest){
                 xmlHttp = new XMLHttpRequest();
                }
        }
       
        //执行方法
        function go(){
         createXMLHttpRequest();
                checkDiv();
                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 index = processResult(percent_complete);
                                var (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()",2000);
                                }else{
                                 document.getElementById("complete").innerHTML =  "Complete!";
                                        document.getElementById("go").disabled = false;
                                }
                        }
                }
        }
       
        //解析结果
        function processResult(){
         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 bgcolor="#ffffff">
<h1>
Ajax进度条示例
</h1>
运行进度条:
<input type="button" value="运行" id="go" οnclick="go()"/>
<p>
</p>
<table align="center">
 <tbody>
          <tr>
            <td><div id="progressBar" style="padding:2px;border:solid black 2px;visibility?hidden">
             <span id="block1">&nbsp;&nbsp;&nbsp;</span>
             <span id="block2">&nbsp;&nbsp;&nbsp;</span>
                <span id="block3">&nbsp;&nbsp;&nbsp;</span>
                <span id="block4">&nbsp;&nbsp;&nbsp;</span>
                <span id="block5">&nbsp;&nbsp;&nbsp;</span>
                <span id="block6">&nbsp;&nbsp;&nbsp;</span>
                <span id="block7">&nbsp;&nbsp;&nbsp;</span>
                <span id="block8">&nbsp;&nbsp;&nbsp;</span>
                <span id="block9">&nbsp;&nbsp;&nbsp;</span>
            </div></td>
          </tr>
          <tr><td align="center" id="complete"></td> </tr>
 </tbody>
</table>
</body>
</html>

服务器端：ProgressBarServlet.java

package ajaxvalidation;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;

public class ProgressBarServlet
    extends HttpServlet {
  private static final String CONTENT_TYPE = "text/html; charset=GBK";
  //计数器
  private int counter = 1;
  //Initialize global variables
  public void init() throws ServletException {
  }

  //处理get方法
  public void doGet(HttpServletRequest request, HttpServletResponse response) throws
      ServletException, IOException {
    //得到任务类型
    String task = request.getParameter("task");
    //返回的xml字符串
    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();
  }

  //Clean up resources
  public void destroy() {
  }
}

 

参考书籍:Ajax基础教程，作笔记吧

jawsy
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ajax进度条(非常实用)
08-31
ajax进度条.doc ajax进度条.doc
ajax进度条
javatwt的专栏
03-02 1379
在最近的一个项目中，有一个上传功能：上传一个cvs文件，然后解析此文件并写入数据库由于经常需要传很大的文件，客户完成此功能往往需要40分钟，在这个过程中，页面也没有任何提示，用户体验非常不好？为何不用ajax作一个进度条呢？分两步完成此需求：一：写一个简单的ajax，实现最简单的进度条功能。二：把此进度条改造为项目可用的进度条。一：最简单的进度条1。客户端每2秒发送一个createXMLHtt
Ajax制作Web进度条
weixin_34415923的博客
05-24 72
1.index.jsp 1 &lt;%@ page language="java" pageEncoding="UTF-8"%&gt; 2 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; 3 &lt;html&gt; 4 &lt;head&gt; 5
Ajax进度条
David's Blog!
04-09 5557
共需要3个文件,ProgressBarServlet.java,web.xml,progressBar.html;林,如果没看太明白,我会多写点注释...---ProgressBarServlet.javapackage dawei;import java.io.IOException;import java.io.PrintWriter;import javax.servle
Ajax 实现加载进度条
10-20
根据给定文件信息，我们将详细说明使用AJAX实现加载进度条的知识点。 AJAX全称为“Asynchronous JavaScript and XML”，即异步的JavaScript和XML技术，它允许页面在不进行刷新的情况下与服务器交换数据并更新部分...
AJAX 进度条实现代码
10-29
### AJAX进度条实现原理 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。AJAX进度条是利用AJAX的特性，允许用户在服务器处理请求时能够看到一个实时更新...
java使用ajax实现进度条
01-14
### Java使用Ajax实现进度条详解 在Web应用开发过程中，为用户提供实时的文件上传或处理状态反馈至关重要。本文将详细探讨如何使用Java结合Ajax技术来实现实时的进度条显示功能，以提升用户体验。 #### 一、理解...
Ajax - 显示进度条
lin49940的专栏
08-16 2923
4.5  显示进度条无一例外地，几乎每个应用都会时不时地调用一个长时间运行的事务。如果你关心系统的可用性，就要确保用户能很容易地看到系统的状态。如果是一个胖客户应用，对于长时间运行事务的问题，解决办法很简单：只需显示一个进度条，以便用户知道目前所处状况。不过，在Ajax之前，要在Web应用中做到这一点很不容易。本节将使你了解如何使用Ajax为Web应用建立进度条。在代码清单4-9所示的例子
ajax进度条，实现很炫的效果
08-05
可用于站点中，使网站更加具备交互性，使用简单，直接插入原代码的相应位置即可
ajax实现加载进度条
02-11
当用户由页面请求服务器太久时，如果任由页面显示为空白，显得不够人性化， 而且在执行改请求的过程中，应该给予提示，防止用户执行其他操作
Ajax的常用技巧（5）---实现进度条
热门推荐
Bad Boy
09-02 1万+
在应用程序的安装和下载过程中，进度条的使用已经是非常普遍了。进度条可以用来表识项目的完成进度，可以用百分比或数字表示，可以水平放置。利用Ajax技术创建进度条，功能显得更加强大的快捷。       现在创建一个实例，以演示使用Ajax技术实现进度条。该实例同样可以分为客户端代码和服务端代码。   1， 服务端代码     服务端代码主要实现一句客户端的请求信息，返回相应的百分比数字。打
ajax请求设置加载进度条,Ajax 实现加载进度条
weixin_42526101的博客
08-05 1974
ajax beforeSend:先说说这个 beforeSend， 在请求发送前执行 比如 可以判断用户有没有登录 ，如果没有登录就停止请求 并提示。$.ajax({url : 'my_action',dataType: 'script',beforeSend : function(xhr, opts){if(1 == 1) //just an example{xhr.abort(); // 停止...
Ajax显示进度条
hty68024352的专栏
05-06 205
文件一览 progressBar.html ProgressBarServlet.java progressBar.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;h...
AJAX做一个动态进度条
程序员天空
04-21 2009
1.建立进度条html页面progressbar.htmscript language="javascript"> function setPgb(pgbID, pgbValue) { if ( pgbValue  100 ) { //debugger;if (lblObj = document.getElementById(pgbID+_label)) { lblObj.innerH
ajax上传文件进度条
weixin_46146313的博客
04-12 160
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
ajax实现固定时间进度条,ajax实现进度条
weixin_39675679的博客
08-06 269
ajax实现进度条 内容精选换一换进度条是柱状图的一种，通过进度条可实现百分比展示能力，支持电池和柱状图两种展示形式。在设计页面左上方单击，从“图表 > 柱状图”中拖拽折进度条至设计页面右侧空白处。在页面中，单击选中该组件，会在右侧显示该组件的属性配置面板，参数说明请参考预置组件及公共属性说明。选择该组件，单击鼠标右键选择“高级设置”，可对进度条进行多种配置。进度条配置参在主机迁移的过程中，...
django+ajax实现进度条的实例
最新发布
06-08
要在Django中实现进度条，可以使用Django框架提供的HttpResponse对象和Ajax技术。 首先，在views.py中编写一个函数，用于处理上传文件的请求。该函数可以使用Python的os模块来执行上传文件的操作，并在上传过程中输出进度信息。 然后，在该函数中使用Django的HttpResponse对象来返回上传进度信息。可以将进度信息转化为JSON格式，并使用HttpResponse对象的content_type参数来指定返回的数据类型。 最后，在前端使用Ajax技术来获取HttpResponse对象中的进度信息，并将其显示在进度条上。 下面是一个简单的示例代码： ```python # views.py import os from django.http import HttpResponse from django.views.decorators.csrf import csrf_exempt import json @csrf_exempt def upload(request): if request.method == 'POST': file = request.FILES.get('file') file_path = '/path/to/upload/directory/' + file.name with open(file_path, 'wb+') as f: for chunk in file.chunks(): f.write(chunk) uploaded_size = f.tell() total_size = file.size progress = uploaded_size / total_size response_data = { 'progress': progress, 'uploaded_size': uploaded_size, 'total_size': total_size } response_json = json.dumps(response_data) response = HttpResponse(response_json, content_type='application/json') response['Content-Length'] = len(response_json) yield response # upload.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Upload File</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <form id="upload-form" method="POST" enctype="multipart/form-data"> {% csrf_token %} <input type="file" name="file"> <button type="submit">Upload</button> </form> <div> <progress id="progress-bar" value="0" max="1"></progress> <span id="progress-text">0%</span> </div> <script type="text/javascript"> $(document).ready(function() { $('#upload-form').submit(function(event) { event.preventDefault(); var formData = new FormData(this); $.ajax({ url: '/upload/', type: 'POST', data: formData, processData: false, contentType: false, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { var percentComplete = event.loaded / event.total; $('#progress-bar').val(percentComplete); $('#progress-text').text(percentComplete * 100 + '%'); } }, false); return xhr; }, success: function(response) { console.log('Upload complete!'); }, }); }); }); </script> </body> </html> ``` 在这个例子中，upload函数会处理上传文件的请求，并在上传过程中输出进度信息。在前端，使用Ajax技术来获取HttpResponse对象中的进度信息，并将其显示在进度条上。 通过访问http://yourdomain.com/upload/即可上传文件并动态显示进度条。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值