ajax进度控制

ajax进度控制

进度事件简述

在不懂ajax进度控制的时候,当看到网页中,别人实现的加载进度条,总是感觉好高达上,其实现其实并不是很难。首先我们需要了解其涉及到了6个进度事件。 
- loadstart:在接收到相应的数据的第一个字节时候触发。 
- progress:在接受相应期间持续不断触发,这个事件大概每50毫秒执行一次。 
- error:在请求发送错误时触发 
- abort:在因为调用abort()方法而终止连接时候触发 
- load:在接收到完整的相应数据时触发 
- loadend:在通信完成或者是触发error、abort或load事情后出发 
- timeout:如果指定了timeout值,在指定时间段内未完成请求时触发。 
现在我们从事件触发的角度去看,ajax通信,首先触发Loadstart事情,接下来是一个或多个progress事情,然后触发error、abort或load事情中的一个,最后以触发loadend事情结束。 
为了测试以上事件,我们先做一个测试,代码如下

<meta charset="utf-8">
<script type="text/javascript">
Object.prototype.addListener=function(ev,fn){
    if (this.attachEvent) {
        this.attachEvent('on' + ev, fn);
    }else{ 
        this.addEventListener(ev,fn,false);
    }
}
function CreateXmlHttp() {
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }else{// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }    
}
var xmlhttp=null;
CreateXmlHttp();//创建xmlHttpRequest对象
//绑定事件,是我addListener自定义兼容各浏览器的绑定事件方法
xmlhttp.addListener('loadstart',function(){checkInfo('loadstart')});
xmlhttp.addListener('progress',function(){checkInfo('progress')});
xmlhttp.addListener('error',function(){checkInfo('error')});
xmlhttp.addListener('abort',function(){checkInfo('abort')});
xmlhttp.addListener('load',function(){checkInfo('load')});
xmlhttp.addListener('loadend',function(){checkInfo('loadend')});
xmlhttp.open("get", "http://127.0.0.1/a2.php", true);//调用open的方法初始化
xmlhttp.send();//调用send方法发送数据
function checkInfo(fnName){
    console.log(fnName+'事件被触发,xmlhttp.readyState='+xmlhttp.readyState);
}
</script>


这里写图片描述 
通过执行结果,正好证实了,我们上面的事件触发的论述。

ajax进度条实例

现在要开始写ajax进度条了,好久没有写过进度条,还是有点小激动。 
代码如下:

<meta charset="utf-8">
<script type="text/javascript">
Object.prototype.addListener=function(ev,fn){
    if (this.attachEvent) {
        this.attachEvent('on' + ev, fn);
    }else{ 
        this.addEventListener(ev,fn,false);
    }
}
function CreateXmlHttp() {
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }else{// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }    
}
var xmlhttp=null;
window.onload=function(){
    var loadbutton=document.getElementById('loadbutton');
    loadbutton.addListener('click',function(){
        CreateXmlHttp();//创建xmlHttpRequest对象
        //绑定事件,是我addListener自定义兼容各浏览器的绑定事件方法
        xmlhttp.addListener('loadstart',loadstart);
        xmlhttp.addListener('progress',progress);
        xmlhttp.addListener('load',load);
        xmlhttp.addListener('loadend',function(){console.log('执行结束了');});
        xmlhttp.open("get", "http://127.0.0.1/ceshi.pdf", true);//调用open的方法初始化(为了便于查看效果,我让其加载一个比较大的文件,因为最开始,我尝试使用一个php文件但是看不到效果,因为它立刻出现结果)
        xmlhttp.send();//调用send方法发送数据
    }); 
}
//处理开始接受数据的画面
function loadstart(){
    //当开始加载的时候,将defaultCont隐藏,将progressBox显示出来
    document.getElementById('defaultCont').style.display="none";
    document.getElementById('progressBox').style.display="block";
}
//处理进度
function progress(event){
    //修改progressTest里面的文本提示信息以及progress的长度
    var progressTest=document.getElementById('progressTest');
    var progress=document.getElementById('progress');
    if (event.lengthComputable) {//判断响应文本是否可以计算长度
        var recivedSize= event.position;//已经接收的字节数
        var totalSize=event.totalSize;//根据Content-Length相应头部确定的预期字节数
        progressTest.innerText=(recivedSize/totalSize*100 )+"%";
        progress.style.width=600*(recivedSize/totalSize)+"px";// 为什么是600,因为包含它的容器长度为600
    }
}
//处理加载完成
function load(event){
    //当开始加载的时候,将defaultCont显示出来,并将服务器返回的结果放在其里面,并将progressBox隐藏掉
    document.getElementById('progressBox').style.display="none";
    var defaultCont=document.getElementById('defaultCont')
    defaultCont.style.display="block";  
    //因为加载的是一个pdf文件,所以不需要将其显示在页面上,我直接输出了xmlhttp对象
    console.log(event.target);
    //defaultCont.innerText=event.target.responseText;//备注,其中event.target为xmlhttp对象 
    //使用innerText代替innerHTML更加安全,因为如果使用innerHTML,responseText中包含html代码或JavaScript代码时候,浏览器不会解析,如果你需要其解析,当然得用innerHTML。
}
</script>
<div style="width:600px; height:auto;margin:0 auto">
    <input type="button" id="loadbutton" value="加载">
    <div id="defaultCont">
        <img src="1.jpg" width="600px">
    </div>
    <div id="progressBox" style="display:none;position:relative">
        <div>已经加载了:<span id="progressTest">0</span></div>
        <div id="progress" style="position:absolute; width:0px; top:35px; left:0;z-index:10; height:35px; background-color:#F00"></div>
        <div style="position:absolute; width:600px; top:35px; left:0; z-index:1;height:35px; background-color:#040"></div>
    </div>
</div>

执行效果截图如下 
这里写图片描述
这里写图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
智慧校园整体解决方案是响应国家教育信息化政策,结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础,旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变,通过自动数据采集、智能分析和按需服务,实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通,确保系统能够满足不同用户角色的需求,并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面,构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等,以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能,增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术,实现人员和设备的智能管理,提高校园运营效率。 智慧教学部分,方案提供了智慧学习系统和精品录播教室方案,支持专业级学习硬件和智能化网络管理,促进个性化学习和教学资源的高效利用。同时,教学质量评估中心和资源应用平台的建设,旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理,通过智慧教室管理系统实现教室环境的智能控制和能效管理,打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设,将作为智慧校园的核心和入口,提供教务、一卡通、图书馆等系统的集成信息。 总体而言,智慧校园整体解决方案通过集成先进技术,不仅提升了校园的信息化水平,而且优化了教学和管理流程,为学生、教师和家长提供了更加便捷、个性化的教育体验。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值