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 ...
随机推荐
- webpack的基本使用
安装webpack npm i webpack -g npm i webpack-cli -g 1.基础用法(无需配置webpack.config.js文件) 1.2 新建需要打包的测试文件input ...
- 从命令行运行postman脚本
为什么要在命令行中运行 可以在无UI界面的服务器上运行 可以在持续集成系统上运行 运行准备 导出collection 安装nodejs和npm(或cnpm) 安装Newman 运行及生成测试报告支持4 ...
- Linux使用Docker启动Elasticsearch并配合Kibana使用,安装ik分词器
注意事项 这里我的Linux虚拟机的IP地址是192.168.1.3 Docker运行Elasticsearch容器之后不会立即有反应,要等一会,等待容器内部启动Elasticsearch,才可以访问 ...
- 前端开发 | 尝试用Markdown写一下近几个月的总结
近期总结 回顾 半年前 半年前,接触了前端一年多(工作半年)的我了解的东西只有下面这些.因为在公司里的工作就是切静态页,捣鼓CMS. HTML (比较简洁的编写HTML) CSS/CSS3 (PC兼容 ...
- 网络初级篇之网络设备的FTP（原理与实验）
一.什么是FTP FTP就是文件传输协议.用于互联网双向传输.二.FTP的作用 控制文件下载空间在服务器复制文件从本地计算机或本地上传文件复制到服务器上的空间,主要的作用就是文件的传输,保 ...
- python的isocalender()
isocalender()返回指定日期的年,第几周,周几这三个值. 例子: import date date_time = datetime.date(2019, 5, 9) ret = date_t ...
- Python中的字典和集合
一.字典(dict) 1. 概述 字典是Python唯一的映射类型. 只能使用不可变的对象(比如字符串)来作为字典的键,但是可以把不可变或可变的对象作为字典的值. 键值对在 ...
- 理解 Cookie、Session、Token
发展史 Cookie Session Token Token的起源 基于服务器的验证 基于服务器验证方式暴露的一些问题 基于Token的验证原理 Tokens的优势 发展史 1.很久很久以前,Web ...
- viewport的相关知识点
主要说一些viewport的基本原理以及使用 ㈠概念 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的 ...
- 10、堆叠窗口StackedWidget
新建项目,基类选择QMainWindow,勾选ui 堆叠窗口有三个page,每个page有个label button处,快捷菜单,转到槽,添加代码 void MainWindow::on_push ...