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