之前重点学习PHP，所以javascript、Ajax都比较弱一点。现在也开始补课了，今天实现了一个进度条的例子，感觉Ajax实现动态页面真的很厉害，并没有想象中的那么难理解。

进度条作为反应实时传输数据进度的状态，能够灵活运用还是很重要的。

在进度条实现中，我们只需要实时修改进度条style中的width属性就可以反应传输数据的情况。当然width的值直接与 proportion=已传输的数据量/总数据量 挂钩。而proportion就是服务器返回给客户端的一个比例值，计算过程可以在服务器端完成。

下面我们来看代码，

客户端  progress.html：

<html>

  <head>

    <meta charset="gb2312">

    <title>进度条测试</title>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen">

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">

    <script src="js/bootstrap.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript" language="javaScript">

     var t;

     var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象

     //创建XMLHttpRequest对象的方法,支持多浏览器

     function createXMLHttpRequest() {

       if(window.ActiveXObject) { //Inetrnet Explorer时，创建XMLHttpRequest对象的方法

         try {

           xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

         } catch(e) {

           try {

             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

              //旧版本的Inetrnet Explorer，创建XMLHttpRequest对象

           } catch(e) {

             window.alert("创建XMLHttpRequest对象错误"+e);

           }

         }

       } else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法

         xmlHttp = new XMLHttpRequest();

       }

       if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象

           window.alert("创建XMLHttpRequest对象异常！");

       }

     }

     //开始向服务器请求数据

     function startRun(){

      createXMLHttpRequest();

      xmlHttp.onreadystatechange = aginCallBack;

      document.getElementById("run").disabled=true; //设置按钮不可用

      var url = "http://localhost:8033/test1/progress/progress.php";

      xmlHttp.open("GET",url,true);

      xmlHttp.send(null);

     }

     //进度条执行函数

     function aginCallBack() {

      if(xmlHttp.readyState == 4){

          if(xmlHttp.status == 200) { //status状态正常时

              var response = xmlHttp.responseText;      //将服务器返回的值赋予response

              //alert("xmlHttp.responseText="+response);

              document.getElementById("progress-bar").style.width = response+'%';    //将得到的值+‘%’号，然后赋值与进度条style的width属性

              if(response <=100){   //应为进度条的最大值也就是100%,所以返回值不能大于10,如果大于100则不再请求,当然服务端返回的值最大也为100

                  t = setTimeout("startRun()",1000);   //每隔一秒钟就调用一次startRun()函数

              }else{

                  document.getElementById("txt").style.visibility = "visible";

                  document.getElementById("txt").value = "100%完成更新";

              }

          }

      }

     }

    </script>

    </head>

<body>

  <div id="jdt" style="width:400px;heigh:50px;margin:auto;margin-top:100px;">

    <input type="button" id="run" value="更新" onclick="startRun();"></input>

    <!--  <input type="text" id="txt" value="无值"></input> -->

    <div class="progress">

      <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%;">

      </div>

    </div>

    <input type="text" id="txt" value="" style="visibility:hidden;"></input>

  </div>

</body>

</html>

服务器端我只是使用时间变化来完成返回数据的增加，使进度条能够动态走动。

服务器端  progress.php

<?php

        //text.txt文件只用于我记录初始时间

       $txt = file_get_contents("text.txt");

       $timeone = date("i:s",time());

       $timenow = getdate();  

       if ($txt == "") {  //如果text.txt文件空，则将当前时间记录下

           file_put_contents("text.txt", $timeone);

           echo 0;    //并向客户端返回0，也就是进度条为0%

       }else{

           $arrtxt = explode(":", $txt);           

           $value1 = $arrtxt[0]*60+$arrtxt[1];

           $value2 = $timenow["minutes"]*60+$timenow["seconds"];

           $proportion = $value2-$value1;   //得到时间差，相当于已完成传输多少数据

           if ($proportion >100){     //如果时间差大于100，则清空text.txt文档。防止返回给客户端的值大于100

               file_put_contents("text.txt","");

           }

           echo $proportion;  //返回给客户端的值

       }

?>

这是一个简单的Ajax+PHP实现进度条的例子。

谢谢！

Ajax+PHP实现的进度条--实例的更多相关文章

  1. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  2. jQuery ajax 标准写法及进度条绘制

    jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...

  3. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  4. Flex4/Flash多文件上传(带进度条)实例分享

    要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...

  5. asp.net利用ajax和jquery-ui实现进度条

    前台用ajax不停进行查询,直到任务完成.进度条用的是jquery-ui.后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中. 代码作为简单示例,实际应用时应对 ...

  6. H5+Ajax+WebApi实现文件下载(进度条，多文件)

    前言 踩过的坑 1.WebAPI跨域 2.Jquery ajax低版本不支持XHR 2功能 3.Jquery ajax不支持Deferred的process事件 4.IE下文件名乱码问题 功能实现 & ...

  7. 使用ajax时给ajax绑定上一个进度条的简单示例

    直接放代码. <%@ page contentType="text/html;charset=UTF-8" language="java" %> & ...

  8. PHP_APC扩展dll上传大文件及进度条实例

    1.弄好了APC之后,就是使用它了,下面是个例子,是一个进度条上传的例子,作为笔记记录下来 在这个例子之前,我们需要做如下的设置,如果我们需要上传的是大文件的话,请在您的php.ini文件中做如下的设 ...

  9. c#根据文件大小显示文件复制进度条实例

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

随机推荐

  1. O023、理解Nova架构

    参考https://www.cnblogs.com/CloudMan6/p/5410447.html   Compute Service Nova 是OpenStack最核心的服务,负责维护和管理云环 ...

  2. 使用fiddler进程弱网测试

    使用fiddler手机需调整所连网络代理模式为手动,主机名与端口改为与电脑相同 打开Fiddler,Rules(规则)->Performance(性能)->勾选 Simulate Mode ...

  3. zabbix mongodb 监控添加

    在zabbix 上添加mongodb的监控 由于使用的是zabbix 3.0 所有在模板里面又自己的模板名字叫:Template MongoDB 所以 客户端的配置如下 到配置文件目录 /usr/lo ...

  4. idea逆向生成hibernate工程

    1.创建maven工程 2.在resources下创建hibernate.cfg.xml文件 <?xml version='1.0' encoding='utf-8'?> <!DOC ...

  5. JVM内存区域划分总结

    发现网上有两个版本的JVM内存划分,一个是按照<深入理解JVM虚拟机>上的版本,包含程序计数器等,按照是否线程共享划分. 另一个我觉得更好记一些,也更适合我自己,在这里记录一下. 首先上思 ...

  6. QQ空间相册照片批量导出

    QQ空间相册照片批量导出 先自己创建一个私人的单独的群,然后创建相册,上传照片来源从空间选图复制 复制完成后打开相册开始骚操作(两种方式) OK

  7. 基于 Debian 的 Netrunner 19.08 “Indigo” 发布

    Netrunner 19.08版本被称为“Indigo”,基于最近发布的Debian GNU/Linux 10 “Buster”操作系统系列,具有KDE Plasma 5.14.5桌面环境,并附带KD ...

  8. 【VUE】Vue 源码解析

    Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的 ...

  9. mvn高级构建

    指定pom文件,打包指定的module,并且自动打包这个模块所依赖的其他模块. mvn clean install -f vmc-business-parent/pom.xml -pl vmc-sch ...

  10. 前端杂谈: Attribute VS Property

    前端杂谈: Attribute VS Property 第一个问题: 什么是 attribute & 什么是 property ? attribute 是我们在 html 代码中经常看到的键值 ...