标签：function 封装 函数 xhr ajax console options types

创建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>

标签：function,封装,函数,xhr,ajax,console,options,types
来源： https://blog.csdn.net/Vue1024/article/details/123065717

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。