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 ...
随机推荐
- js 发送异步请求
js用XMLHttpRequest发送异步请求 发送GET请求 var xhr = new XMLHttpRequest(); xhr.open('GET',url);//url为请求地址 xhr.r ...
- react + antd Form表单校验
非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...
- MySQL 下载与安装
从MySQL官网下载安装文件,我的电脑是window10 64位的,下载社区版本,选择mysql community server,再下载64位的. 官网链接:https://www.mysql.co ...
- 查看Linux服务器硬件信息
一:查看cpu# 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数# 查看物理CPU个数cat /proc/cpui ...
- dedecms sql 替换 或 删除
UPDATE dede_archives SET writer='你需要修改的作者' WHERE writer=''; UPDATE dede_archives SET source='你需要修改的来 ...
- CISCO SMARTnet服务和SMB服务技术支持
点击官网:SMB Support Assistant技术支持服务 点击官网:思科SMARTnet快速维护及快速维护现场服务 一.SMARTnet服务 1.1 标准SMARTnet 服务级别:5*8*N ...
- 004-linux下配置rsyslog日志收集服务器案例 rsyslog+loganalyzer日志服务器，无法添加报表模板解决
centos6系统 client1:192.168.1.33 centos7系统 client2:192.168.1.44 centos7系统 master:192.168.1.55 配置服务端mas ...
- 关于nmap扫描端口
nmap查看一个服务器的端口,是通过扫描来实现的.所以在本机执行nmap扫描的端口有可能被防火墙阻止,在外部是访问不了的. 如:开启ORACLE监听后,在本机使用nmap 127.0.0.1是可以扫描 ...
- CentOS下phpMyAdmin安装
1.phpMyAdmin官网下载https://www.phpmyadmin.net/downloads/ 2.下载程序包 wget https://files.phpmyadmin.net/phpM ...
- UVA - 11996 Jewel Magic (Treap+二分哈希)
维护一个01序列,一共四种操作: 1.插入一个数 2.删除一个数 3.反转一个区间 4.查询两个后缀的LCP 用Splay或者Treap都可以做,维护哈希值,二分求LCP即可. 注意反转序列的时候序列 ...