music
吾推更多
原生ajax得封装与简单的附件应用
　 来源: 吾推网　 发布时间: 2018-04-22　　 次浏览
一、最简单的方式
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.连接服务器，第三参数为true表示异步
xhr.open('get', 'http://5tweb.cn?q=javascript&alt=json', true);
//指定类型
xhr.setRequestHeader("Content-Type","application/json");
//3.接收返回
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4){
            if ( xhr.status == 200 ){
                 alert( xhr.responseText );
            }
    }
}
//4.发送请求
xhr.send();
二、兼容IE6的方式
//1.创建ajax对象
var xhr=null;
if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
}else{//IE6
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
xhr.open('get', 'http://5tweb.cn?q=javascript&alt=json', true);
//指定类型
xhr.setRequestHeader("Content-Type","application/json");
//3.接收返回
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
            if ( xhr.status == 200 ){
                 alert( xhr.responseText );
            }
    }
}
//4.发送请求
xhr.send();
三、通过ajax上传附件
var fd = new FormData();
//file是通过<input type="file">获得到的文件
fd.append("file", file);
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//2.连接服务器
xhr.open('get', 'http://5tweb.cn?q=javascript&alt=json', true);
//3.发送请求
xhr.send(fd);
//4.接收返回
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
            if ( xhr.status == 200 ){
                 alert( xhr.responseText );
            }
    }
}
四、通过ajax下载附件
//1.创建ajax对象 
var xhr = new XMLHttpRequest();
//2.连接服务器,传送需要下载的附件id给后端
xhr.open('get', 'http://5tweb.cn?id=123', true);
//3.监听进度事件
 xhr.addEventListener("progress", function (evt) {
     if (evt.lengthComputable) {
            var percentComplete = evt.loaded/evt.total;
            //此处写进度方法
      }
},false);
//4.后台需通过流的形式返回给前端
xhr.responseType = "blob";
//5.接收返回
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
            if ( xhr.status == 200 ){
                    var filename = ‘test’;
                    //成功函数
                    onSuccess(xhr.response);
                    if (typeof window.chrome !== 'undefined') {
                        // Chrome version
                        var link = document.createElement('a');
                        link.href = window.URL.createObjectURL(xhr.response);
                        link.download = filename;
                        link.click();
                    } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        // IE version
                    var blob = new Blob([req.response], { type: 'application/force-download' });
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        // Firefox version
                        var file = new File([req.response], filename, { type: 'application/force-download' });
                        window.open(URL.createObjectURL(file));
                    }
                }else{
                        //失败走失败函数
                        onFailure();
                }
            }
    }
}
//6.发送请求
xhr.send();
五、把ajax封装成JQ的形式
function ajax(setting){
    setting.type=setting.type||'get';
    setting.contentType=setting.contentType||'application/x-www-form-urlencoded';
    setting.async=setting.async||true;
    var xhr=null;
if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
}else{
    xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
          setting.success&&setting.success(xhr.responseText);
    }else{
          setting.error&&setting.error(null);
    }
}
if(setting.type.toLowerCase()=='post'){
     xhr.open(setting.type,setting.url,setting.async);
     xhr.setRequestHeader('content-type',setting.contentType);
     xhr.send(setting.data);
}else{
     setting.url+= '?' + setting.data;
     xhr.open(setting.type,setting.url,setting.async);
     xhr.send();
}
}
//post方式
var data=JSON.stringify({
name:'lisi',
age:'34'
});
ajax({
type:'post',
url:'/serverTest/ajax/ajax.php',
data:data,
contentType:'application/json',
success:function(date){
document.getElementsByTagName('body')[0].innerHTML=date;
        console.log(date);
},
error:function(msg){
document.getElementsByTagName('body')[0].innerHTML=msg;
        console.log(msg);
}
});
后台部分：
//post方式获取
header('Content-type:application/json;charset=utf-8');  
$raw = file_get_contents('php://input');
$data = json_decode($raw,true);
echo "你的名字：".$data['name']."，年龄：".$data['age']; 
//get方式获取
//echo "你的名字：".$_GET['name']."，年龄：".$_GET['age']; 
案例下载：https://github.com/coohui/serverTest/tree/master/ajax