接上文，我们已经对原生的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.