Ajax+PHP实现的进度条--实例
之前重点学习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实现的进度条--实例的更多相关文章
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- jQuery ajax 标准写法及进度条绘制
jQuery ajax 标准写法及进度条绘制 $.ajax({ url: "http://www.microsoft.com", //请求的url地址 dataType: &quo ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- Flex4/Flash多文件上传(带进度条)实例分享
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- asp.net利用ajax和jquery-ui实现进度条
前台用ajax不停进行查询,直到任务完成.进度条用的是jquery-ui.后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中. 代码作为简单示例,实际应用时应对 ...
- H5+Ajax+WebApi实现文件下载(进度条，多文件)
前言 踩过的坑 1.WebAPI跨域 2.Jquery ajax低版本不支持XHR 2功能 3.Jquery ajax不支持Deferred的process事件 4.IE下文件名乱码问题 功能实现 & ...
- 使用ajax时给ajax绑定上一个进度条的简单示例
直接放代码. <%@ page contentType="text/html;charset=UTF-8" language="java" %> & ...
- PHP_APC扩展dll上传大文件及进度条实例
1.弄好了APC之后,就是使用它了,下面是个例子,是一个进度条上传的例子,作为笔记记录下来 在这个例子之前,我们需要做如下的设置,如果我们需要上传的是大文件的话,请在您的php.ini文件中做如下的设 ...
- c#根据文件大小显示文件复制进度条实例
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
随机推荐
- php重定向的三种方法分享
一.用HTTP头信息 也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如: 声明返回信息的类型(" ...
- CentOS7部署kettle
去官网下载kettle, 或者百度网盘下载(nnnk),解压到目录/opt/service/, 解压后的目录是data-integration kettle需要java环境才能运行,因此要安装Java ...
- java读取blob全身乱码
一.BLOB操作 .入库 ()JDBC方式 //通过JDBC获得数据库连接 Class.forName("oracle.jdbc.driver.OracleDriver"); Co ...
- docker之常用命令
1) docker run -p : --name mysql -v d:/docker/mysql/conf:/etc/mysql/conf.d -v d:/docker/mysql/logs:/l ...
- python 定义变量
定义变量 什么是变量? 在程序运行过程中,其值可以改变的量 标识符(命令规范) 只能由数字.字母.下划线组成 不能以数字开头 不能是系统关键字 # 导入包import keyword# 打印所有关键 ...
- DES加密解密 MD5加密解密
#region MD5 加密 /// <summary> /// MD5加密静态方法 /// </summary> /// <param name="Encry ...
- Zabbix 3.2.6使用注意事项
1.如果需要使用zabbix自带的SMTP发送邮件,需要在安装前升级系统的curl到7.20版本以上 2.zabbix对接PHP 7.1版本,因为PHP 7.1类型强化,会在安装完成zabbix,登录 ...
- Linux中的grep 命令
介绍grep文本处理命令,它也可以解释正则. 常用选项: -E :开启扩展(Extend)的正则表达式. -i :忽略大小写(ignore case). -v :反过来(invert),只打印没有匹配 ...
- textarea 限制输入字数
一般情况下很多人限制textarea的输入字数会使用 onkeyup 或 onchange事件,但是这两种事件都带有明显的不足. onkeyup 事件只能监听键盘事件,而对于用户的粘贴毫无办法:而on ...
- 【异常】org.apache.hadoop.hdfs.server.common.InconsistentFSStateException
1 异常信息 - ::, INFO org.apache.hadoop.hdfs.server.namenode.FSNamesystem: Maximum size of an xattr: -- ...