.graph { width: 400px; height: 25px; border: 1px solid #f8b3d0; }
.bar { background-color: #ffe7f4; display: block; float: left; height: 100%; text-align: center; }
<div class="fz">
<div class="graph" id="graph">
<em id="bar" class="bar"></em>
</div>
<input type="button" value="加载" id="btn">
<em id="mes"></em>
</div>
$("#btn").bind("click", function () {
startLoading();
})
var xmlHttp;
var percent;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startLoading() {
createXMLHttpRequest();
var url = "data.txt";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("sendData()", 2000);
}
}
};
xmlHttp.send(null);
}
function sendData() {
createXMLHttpRequest();
var url = "data.txt";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
percent = parseInt(xmlHttp.responseText);
refreshBar(percent);
if (percent < 100) {
setTimeout("sendData()", 2000);
}
else {
$("#mes").html("加载完毕");
//隐藏操作
}
}
}
}
xmlHttp.send(null);
}
//更新进度条
function refreshBar(per) {
$("#bar").width(per + "%");
}

根目录下新建data.txt 。内容输入20

每2分钟请求一次data.txt。当data.txt的内容变为100时

ajax进度条的更多相关文章

  1. 基于Blod的ajax进度条下载实现

    普通的浏览器下载 在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <a target="_blank" hr ...

  2. ajax ----进度条的原理

    一.进度条的原理 新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...

  3. 关于 webapi ajax进度条信息设置

    1.Web.config 设置跨域 <httpProtocol> <customHeaders> <add name="Access-Control-Allow ...

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

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

  5. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  6. 前端轻量级web进度条 – Nprogress & nanobar

    转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...

  7. 轻量级进度条 – Nprogress.js

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...

  8. springMVC+ajax 文件上传 带进度条

    前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

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

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

随机推荐

  1. php数据库操作代码

    数据库名为reg,表名为member,字段名为username,password,regdate <?php $link=@mysql_connect("localhost" ...

  2. sublime的markdown插件

    mac安装 shift+command+p调出package control面板,搜索install调查安装软件搜索面板 搜索需要安装markdown软件 我安装了下面两个:MarkdownLiveP ...

  3. LeetCode OJ 之 Ugly Number (丑数)

    题目: Write a program to check whether a given number is an ugly number. Ugly numbers are positive num ...

  4. maven dubbo zookeeper 项目搭建(有效)jar包非war测试

    zookeeper安装以及dubbo-admin.war(管理端)配置启动,本章省略,参考其他内容 这里主要说服务提供者和消费者 项目结构: 1)服务端 DemoServer.java package ...

  5. Tomcat 性能监控及调优

    1.性能监控 方式1: /usr/local/tomcat7/conf/tomcat-users.xml 添加如下: <role rolename="manager-gui" ...

  6. mongodb配置副本集(多台服务器间的副本集搭建) replica[ˈrɛplɪkə]

    副本集具有多个副本保证了容错性,就算一个副本挂掉了还有很多副本存在,并且解决了“主节点挂掉了,整个集群内会自动切换”的问题.我们来看看mongoDB副本集的架构图: 由图可以看到客户端连接到整个副本集 ...

  7. 安装centos出错

    在vitural Box中安装centos,出现了如下问题,重新下一遍就好了,如果网速很慢,下载的过程中总是断断续续的就容易出现下载文件损坏的问题. Could not get the storage ...

  8. Web安全系列(三):XSS 攻击进阶(挖掘漏洞)

    前言 在前些章节 (web安全系列(一):XSS 攻击基础及原理)以及(Web安全系列(二):XSS 攻击进阶(初探 XSS Payload))中,我详细介绍了 XSS 形成的原理以及 XSS 攻击的 ...

  9. LeetCode Hash Table 3. Longest Substring Without Repeating Characters

    HashMap的应用可以提高查找的速度,键key,值value的使用拜托了传统数组的遍历查找方式,对于判断一个字符或者字符串是否已经存在的问题可以非常好的解决.而本题需要解决的问题就是判断新遍历到的字 ...

  10. [译]RabbitMQ教程C#版 - “Hello World”

    [译]RabbitMQ教程C#版 - “Hello World”   先决条件本教程假定RabbitMQ已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需 ...