原生js封装ajax，支持实时进度条
function ajax(obj){
var xhr=(function(){
if(typeof XMLHttpRequest !='undefined'){
return new XMLHttpRequest();
}else if(typeof ActiveXObject !='undefined'){ //兼容ie6
var version=[
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp.3.0',
'MSXML2.XMLHttp'
];
for(var i=0; version.length;i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
}
}
}else{
throw new Error('你的系统不支持浏览器不支持ajax');
}
})();
console.log(xhr.upload);
obj.type=obj.type!= undefined ? obj.type : obj.processData==false ? 'post' : 'get';//默认为get
obj.url=obj.url+'?rand='+Math.random();//防止ie浏览器假提交
obj.async=obj.async!=undefined ? obj.async : true;//默认为异步
obj.processData=obj.processData!=undefined ? obj.processData : true;//默认为true
obj.contentType=obj.contentType!=undefined ? obj.contentType : true;//默认为true
if(obj.processData){ //是否进行url编码
obj.data=(function(data){
var arr=[];
for(var i in data){
arr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]))
}
arr=arr.join('&');
return arr;
})(obj.data)
}
if(obj.type=='get')obj.url=obj.url.indexOf('?')==-1 ?obj.url+'?'+obj.data: obj.url+'&'+obj.data;
xhr.open(obj.type,obj.url,obj.async);
if(obj.contentType && obj.type=='post'){ //设置请求格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
if(obj.async){//异步
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
obj.success(xhr.responseText);
}
}
}
}
if(obj.xhr!=undefined){
xhr.upload.onprogress=obj.xhr;
}
if(obj.type=='post'){
xhr.send(obj.data);
}else if(obj.type=='get'){
xhr.send(null);
}
if(obj.async==false){//同步
if(xhr.status==200){
obj.success(xhr.responseText);
}
}
}
调用方式
调用方式
//调用源代码
var form=new FormData();
document.getElementById('file').onchange=function(){
var file=this.files[0];
form.append('file',file)
console.log(form);
ajax({
url:'index.php',
data:form,
contentType:false,//上传文件时设置请求头格式
processData:false,//上传文件时设置不要转换为URL编码
success:function(text){
console.log(text);
},
xhr:function(e){//获取实时上传文件实时进度条
console.log(e);
document.getElementById('progress').value=e.loaded;
document.getElementById('progress').max=e.total;
}
});
}
相关推荐
-
对笔顺正确的写法（正式出台的笔顺标准写法,超全面）
好多孩子写字会有倒笔顺的现象，孩子不管是刚学写字，还是已经读到了三五年级经常写字笔顺还是会错。 有时写一个字是不是也要思考一小会儿？有时，写出来的字连笔顺都不一定正确。 下面是国家规定的汉字笔顺规则，看...
-
基本编码规则怎么编码（最常用的编码方式有哪些）
这篇教程会帮你梳理清楚各种编码规则是怎么来的，让你对计算机的编码有个全方位认知。 我们常用的编码大概有这么几种， ASCII，GBK， GB2312，UTF8，UTF16，UTF32 ASCII 计算机问世开始，大家都用的 ascii 编码格式...
-
爬虫python入门好学吗（python可以直接学爬虫吗）
Python语言这两年是越来越火了，它渐渐崛起也是有缘由的。比如市场需求、入门简单易学、支持多种语言……当然这些都是很官方的。说白了，就是写个web服务，可以用python；写个服务器脚本，可以用python；写个桌面客户...
-
什么是FTP服务器（FTP服务器作用）
什么是FTP服务器？ FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机，它们依照FTP协议提供服务。 FTP协议是File Transfer Protocol(文件传输协议)。顾名思义，就是专门用来传...
-
国产投影仪排名前十的品牌（国产十大投影仪的排名）
大多数人在观影的时候习惯用手机，但也有一部分人会选择使用投影仪来提升自己的观影体验，不过在选择投影仪的时候这么多参数、配置让人头大，希望能有一个参考。八年来进行了很多产品评测，对投影仪也有自己的见解，...
-
创业前如何做好市场调查工作（创业前如何做好市场调查问卷）
老吴评析：兵法云知己知彼、百战不殆，而商场如战场，为了在竞争中立于不败之地，创业者做新手，更需要对计划进入的市场进行全整评估和深刻洞察。本文对创业前的市场调查进行了脉络化梳理，为新玩家下场前的信息收集...