ajax进度条

.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时

时间: 2024-10-11 00:46:19

ajax进度条的相关文章

关于 webapi ajax进度条信息设置

1.Web.config 设置跨域 <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Acces

PHP+Ajax异步带进度条上传文件

前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="

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

1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传,避免一次使用内存使用过大的 2 2. Uuid还是原来文件名称:: 2 3. 监听器频繁地被调用 2 4. 结合wz easyui 2 4. 选型 2 5. Uploadify::yash js+flash 3 6. commons-fileupload:: 3 7. COS这个工具O'Reilly公司 3 8. 大的文件上传组件总结 3 5. 林吧实现ui Ajax+jq

HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 jQuery版本:1.9.1 后台Servlet代码这里就省略了,使用的是 AJAX请求遭遇未登录和Session失效的解决方案 这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData  FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异

ajax 异步上传视频带进度条并提取缩略图

最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 1 { 2 "thumbnail": "/slsxpt//upload/thumbnail/6f05d4985598160c548e6e8f537247c8.jpg", 3 "success": true, 4 "link": "/slsxpt//upload/video/6f05d498559

使用ajax实现简单的带百分比进度条

需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" borderco

ajax文件上传进度条

写在前面: 思路:首先将表单提交servlet,servlet中做文件上传处理,上传的参数封装成对象存入session中,提交到的页面为隐藏的iframe窗口.然后使用ajax异步请求获取session中的对象,并将对象转换成json对象输出出来.当对象状态为上传完成或操作异常时将session中对应的属性清除掉.异步操作的回调函数可以使用var jinduStatus = eval("("+xmlHttp.responseText+")") 的方法将json转换为

Ajax+PHP实现的进度条--实例

之前重点学习PHP,所以javascript.Ajax都比较弱一点.现在也开始补课了,今天实现了一个进度条的例子,感觉Ajax实现动态页面真的很厉害,并没有想象中的那么难理解. 进度条作为反应实时传输数据进度的状态,能够灵活运用还是很重要的. 在进度条实现中,我们只需要实时修改进度条style中的width属性就可以反应传输数据的情况.当然width的值直接与 proportion=已传输的数据量/总数据量 挂钩.而proportion就是服务器返回给客户端的一个比例值,计算过程可以在服务器端完

ajax页面加载进度条插件

下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rstacruz/nprogress/ 二.http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/