原生JS封装AJAX详解

Posted 2020-10-10

//1.type 请求方式post，还是get
//2.请求URL地址
//3.参数 (对象)
//4.回调函数
//5.同步还是异步
//请求方式 请求url地址 参数：是一个对象 回调函数 同步异步
function ajax(type,url,par,fn,async) {
    //判断请求方式是否合法
    //因为传入可能会有大写或小写，统一转化为大写，方便验证
    type =type.toUpperCase();
    //判断合法性
    if(type != "GET" && type !="POST"){
        console.error("请求方式不合法");
        return;
    }
    var ajaxObj;
    //判断浏览器类型，创建ajax对象
    if(window.XMLHttpRequest){
        ajaxObj =new XMLHttpRequest();
    }else {
        ajaxObj =new ActiveXObject("Microsoft.XMLHTTP");
    }
    //处理参数
    var data ="";
    for(var prop in par){
        data += prop +"="+par[prop]+"&";
    }
    data =data.substr(0,data.length-1);
    if(type =="GET"){
        url +="?" +data;
    }
    //调用open
    ajaxObj.open(type,url,async);
    if(type =="POST"){
        ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        ajaxObj.send(data);
    }else{
        //get
        ajaxObj.send();
    }
    //监听数据返回，通过回调函数通知用户 异步
    ajaxObj.onreadystatechange =function () {
        if(4 ==ajaxObj.readyState &&200 ==ajaxObj.status){
            fn(ajaxObj.responseText);
        }
    }
}