函数对象封装ajax

创建js文件

function Ajax(option){
    this.options = option
    this.newpop()
}
//创建ajax对象
Ajax.prototype.createAjax = function(){
   let xhr = null;
   //创建ajax对象
   if(window.XMLHttpRequest){
       xhr = new XMLHttpRequest();//其他浏览器
   }else{
       xhr = new ActiveXObject("Microsoft.XMLHTTP");//兼容浏览器
   }
   return xhr;
}
//初始化
Ajax.prototype.newpop = function(){
   that = this
   this.ajax()
}
//参数拼接
Ajax.prototype.getValStr = function(dataObj){
   let arr= [];
   for(var key in dataObj){
       arr.push(key+"="+dataObj[key]);
   }
   var datas = arr.join("&");
   return datas;
}
Ajax.prototype.ajax = function(){
   var xhr = this.createAjax() //创建ajax对象
   console.log(xhr);
   var types = this.options.type.toLowerCase();//转换大小写
   console.log(types);
   var datas = this.getValStr(this.options.data)//参数拼接
   console.log(datas);
   if(types == 'post'){
       xhr.open(this.options.type,this.options.url)
   }
   if(types == "get"){
       this.options.url = this.options.url+ "?" + datas
   }else if(types === "post"){
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
   }else{
       console.log("传输方式错误");
   }
   if(types === 'get'){
       xhr.open(this.options.type,this.options.url)
   }

   xhr.send(types == "get"? null : datas)

   xhr.onreadystatechange = function(){
       if(xhr.readyState==4){
           let data = JSON.parse(xhr.responseText)
           if(xhr.status==200){
               //成功回应
               that.options.success(data)     
           }else{
               //失败回应
               that.this.options.error(data)
           }
       }
   }
}

html调用

<script src="./api.js"></script>
<script>
    new Ajax({
        type:"get",
        url:"http://localhost:3000/getCartList",
        data:{
            username:"zhangye",
            password:"123123"
        },
        success: function(res){
            console.log(res);
        },
        error:function(res){
            console.log(res);
        }
    })
</script>