关于Ajax原生封装

接上文，我们已经对原生的Ajax有了一个基础的了解，但是在我们日常工作中，不可能每次需要用到时在用原生写一遍，所以本文针对后续工作需要，对Ajax进行封装，主要演示其封装过程，便于理解其中原理。

1.Ajax原生封装过程

  //调用（为了查看方便，我在开头调用该封装函数，里面的实参是一个模拟的数据源对象）
        ajax({
            url:'http://139.9.177.51:3333/api/testGet',//请求地址
            type:'GET',//请求方式
            data:{
                name:'张三',
                age:18
            },//传参
            async:true,//可选,同步或异步 true为异步,false为同步
            success:function(res){//成功时的回调用函数
                console.log(res)
            },
            error:function(err){//失败时的回调函数
                console.log(err)	
            }
        })
        //进行封装
		function ajax(){
			let url=a.url;
			let type=a.type.toLowerCase();//为了后续，发送方式一律改为小写
			let data=Boj(a.data)||{}//这里运用短路运算，判断是否有参数值。有值就执行前面
			function Boj(data){  //定义一个处理参数的函数
             	let arr=[];//定义一个空数组用来保存数据
             	for(let key in data){ //遍历参数对象 key表示健名
					arr.push(key+'='+data[key])//这里需要注意，用拼接方式我们需要将参数转成 name=张三 这样的格式（这是get方式的传参）
             	}
                   return arr.join('&')//将arr数组拼接成一个字符串 name=张三&age=18 返回到data处

			}
		let xhr=new XMLHttpRequest()//创建ajax对象
	     //下面进行判定，get方式和post方式分开
	     if(type=='get'){
	         xhr.open('get',url+'?'+data)//设置请求方式和请求地址，参数拼接上去
	         xhr.send()//发送请求
	     }else{
	         xhr.open('post',url+'?'+data)//设置请求方式和请求地址，参数拼接上去
	         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//设置请求头
	          xhr.send('name=小飞飞&age=18')//发送请求
	     }
			//监听状态码和响应码
           xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.response).data);//进行一系列数据渲染操作
                    //3只有状态码为4，响应码为200 接受数据成功，响应完成
                } else {
                  
                }
            }	
		
		}

以上是ajax封装的过程，便于理解消化，下面是最终的封装函数

2 最终封装成型(每次使用前都要引入)

      ajax({   //get方式
            url:'http://139.9.177.51:3333/api/testGet',//请求地址
            type:'GET',//请求方式
            data:{
                name:'张三',
                age:18
            },//传参
            async:true,//可选,同步或异步 true为异步,false为同步
            success:function(res){//成功时的回调用函数    res是响应的数据
                console.log(res)
            },
            error:function(err){//失败时的回调函数
                console.log(err)	
            }
        })
        //post方式
        ajax({
            url:'http://139.9.177.51:3333/api/testPost',//请求地址
            type:'post',//请求方式
            data:{
                name:'小飞飞',
                age:18
            },//传参
            async:true,//可选,同步或异步 true为异步,false为同步
            success:function(res){//成功时的回调用函数  res是响应的数据
                console.log(res)
            },
            error:function(err){//失败时的回调函数
                console.log(err)	
            }
        })

在日常工作中，可能使用原生Ajax相对较少，为了方便快捷的完成工作，我们一般会使用axios来进行数据请求 axios是易用、简洁且高效的http库，axios本质上也是对原生XHR（ajax）的封装。详情见axios官方网站
`
链接: link.