本站的合作过的网站：北风网极客学院柠檬学院图灵学院
开启辅助访问 最新回复帖子最新发表帖子

Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

手机号码，快捷登录

恭喜Java学习者论坛（https://www.javaxxz.com）已经为数万Java学习者服务超过8年了！积累会员资料超过10000G+！
成为本站VIP会员，下载本站10000G+会员资源，购买链接：点击进入购买VIP会员
Java学习者论坛»论坛 › 论坛互动 › 经验心得总结 › [AJAX学习]JSP+Ajax 进度条
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习（CNN RNN GAN）算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

年薪50万！大数据从入门到精通学习路线年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
返回列表 发新帖
查看: 471|回复: 0

[AJAX学习]JSP+Ajax 进度条

[复制链接]
javalearner
  • TA的每日心情
    开心
    2021-3-12 23:18

    • 签到天数: 2 天

    [LV.1]初来乍到
    发表于 2014-10-13 05:54:22 | 显示全部楼层 |阅读模式
    本站已经为数万初学者服务超过7年！成为本站VIP会员，免金币下载本站10000G+VIP会员资料！
    注：代码由《Ajax基础教程》中的例题改写
    一、 jsp文件ProgressBarJsp.jsp
    <%@ page contentType="text/HTML; charset=gb2312" language="java" errorPage="" %>
    <%!
    int counter = 1;//注意：多用户将共享此变量，此进度条只适合单用户
    %>
    <%
    1. String task = request.getParameter("task");
    2.         String res = "";
    3.         
    4.         if (task.equals("create")) {
    5.             res = "
    6.    
    7.      1
    8.     ";
    9.             counter = 1;
    10.         }
    11.         else {
    12.             String percent = "";
    13.             switch (counter) {
    14.                 case 1: percent = "10"; break;
    15.                 case 2: percent = "23"; break;
    16.                 case 3: percent = "35"; break;
    17.                 case 4: percent = "51"; break;
    18.                 case 5: percent = "64"; break;
    19.                 case 6: percent = "73"; break;
    20.                 case 7: percent = "89"; break;
    21.                 case 8: percent = "100"; break;
    22.             }
    23.             counter++;
    24.                
    25.             res = "
    26.    
    27.      " + percent + "
    28.     ";
    29.         }
    30.         
    31.        // PrintWriter out = response.getWriter();
    32.         response.setContentType("text/xml");
    33.         response.setHeader("Cache-Control", "no-cache");
    34.         out.println("
    35.    
    36.      ");
    37.         out.println(res);
    38.         out.println("
    39.     ");
    40.         out.close();
    41.    
    42.     %>
    复制代码

      
       
       

         
       

         
       
      
    二、发出Ajax请求的html文件JspprogressBar.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
    <head>
    <title>JSP+Ajax 进度条</title>
    <script type="text/javascript">
    1.   var xmlHttp;
    2.         var bar_color = "gray";
    3.         var span_id = "block";
    4.         var clear = "   "
    5.         function createXMLHttpRequest() {
    6.             if (window.ActiveXObject) {
    7.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    8.             }
    9.             else if (window.XMLHttpRequest) {
    10.                 xmlHttp = new XMLHttpRequest();               
    11.             }
    12.         }
    13.         function go() {
    14.             createXMLHttpRequest();
    15.             checkDiv();
    16.             var url = "ProgressBarJsp.jsp?task=create";
    17.             var button = document.getElementById("go");
    18.             button.disabled = true;
    19.             xmlHttp.open("GET", url, true);
    20.             xmlHttp.onreadystatechange = goCallback;
    21.             xmlHttp.send(null);
    22.         }
    23.         function goCallback() {
    24.             if (xmlHttp.readyState == 4) {
    25.                 if (xmlHttp.status == 200) {
    26.                     setTimeout("pollServer()", 2000);
    27.                 }
    28.             }
    29.         }
    30.         
    31.         function pollServer() {
    32.             createXMLHttpRequest();
    33.             var url = "ProgressBarJsp.jsp?task=poll";
    34.             xmlHttp.open("GET", url, true);
    35.             xmlHttp.onreadystatechange = pollCallback;
    36.             xmlHttp.send(null);
    37.         }
    38.         
    39.         function pollCallback() {
    40.             if (xmlHttp.readyState == 4) {
    41.                 if (xmlHttp.status == 200) {
    42.                     var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
    43.                     
    44.                     var index = processResult(percent_complete);
    45.                     for (var i = 1; i <= index; i++) {
    46.                         var elem = document.getElementById("block" + i);
    47.                         elem.innerHTML = clear;
    48.                         elem.style.backgroundColor = bar_color;
    49.                         var next_cell = i + 1;
    50.                         if (next_cell > index && next_cell <= 9) {
    51.                             document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
    52.                         }
    53.                     }
    54.                     if (index < 9) {
    55.                         setTimeout("pollServer()", 2000);
    56.                     } else {
    57.                         document.getElementById("complete").innerHTML = "Complete!";
    58.                         document.getElementById("go").disabled = false;
    59.                     }
    60.                 }
    61.             }
    62.         }
    63.         
    64.         function processResult(percent_complete) {
    65.             var ind;
    66.             if (percent_complete.length == 1) {
    67.                 ind = 1;
    68.             } else if (percent_complete.length == 2) {
    69.                 ind = percent_complete.substring(0, 1);
    70.             } else {
    71.                 ind = 9;
    72.             }
    73.             return ind;
    74.         }
    75.         function checkDiv() {
    76.             var progress_bar = document.getElementById("progressBar");
    77.             if (progress_bar.style.visibility == "visible") {
    78.                 clearBar();
    79.                 document.getElementById("complete").innerHTML = "";
    80.             } else {
    81.                 progress_bar.style.visibility = "visible"
    82.             }
    83.         }
    84.         
    85.         function clearBar() {
    86.             for (var i = 1; i < 10; i++) {
    87.                 var elem = document.getElementById("block" + i);
    88.                 elem.innerHTML = clear;
    89.                 elem.style.backgroundColor = "white";
    90.             }
    91.         }
    复制代码
    </script>
    </head>
    <body>
    <h1>JSP+Ajax 进度条实例2</h1>
    开始一个长时间运行的任务: <input type="button" value="开始" 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>



      
      
       
       

         
       

         
       
      



    源码下载：http://file.javaxxz.com/2014/10/13/055422437.zip
    HTML, java

    相关帖子
    回复

    使用道具 举报

    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-2-26 04:21 , Processed in 0.372159 second(s), 48 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表