原生js ajax 封装

微信扫一扫,分享到朋友圈

原生js ajax 封装

首先我们先了解ajax的get和post请求分别是怎样请求数据的

get请求

let ajx = new XMLHttpRequest() //创建ajax实例
/*打开需要请求的地址,可以有三个参数
参1:请求方式
参2:请求地址
参3:是否异步,可选,默认异步
*/
ajx.open('get','http://localhost/day02/api/gouwu.php?name=zhangsan')
ajx.send()//向后端发送的数据,get方式用不到
ajx.onreadystatechange = ()=>{//监听状态
if(ajx.readyState==4){//判断就绪码,4为成功
if(ajx.status==200){//判断状态码,200表示成功
console.log(ajx.responseText) //打印请求的内容
}
}
}

post请求

let ajx = new XMLHttpRequest() //创建ajax实例
// /*打开需要请求的地址,可以有三个参数
// 参1:请求方式
// 参2:请求地址
// 参3:是否异步,可选,默认异步
// */
ajx.open('post','http://localhost/day02/api/gouwu.php')
ajx.setRequestHeader('content-type','application/x-www-form-urlencoded')//设置请求头
ajx.send('name=zhangsan')//向后端发送的数据,get方式用不到
ajx.onreadystatechange = ()=>{//监听状态
if(ajx.readyState==4){//判断就绪码,4为成功
if(ajx.status==200){//判断状态码,200表示成功
console.log(ajx.responseText) //打印请求的内容
}
}
}

很麻烦吧,请求个数据我们需要写这么多,那么我们把它封装成get、post请求都可以使用的方法

首先先想好我们需要调用的方式,这里我封装的调用方式是这样的

ajax({ //调用封装的方法
type: 'get', //可以不写,默认get
url: 'http://localhost/day02/api/gouwu.php', //请求地址
data: { //需要传输的数据,可选
name: 'zhangsan',
age: 18
}
},a=>{//处理的到的数据
console.log(a)
})

然后根据上面的调用方法进行封装

function ajax(obj, fn) {
let ajx = new XMLHttpRequest() //创建ajax实例
obj.type = obj.type ? obj.type : 'get' //判断type存不存在,不存在默认等于get
let data = null //向后端发送的数据
if (obj.data) { //判断是否存在
for (let i in obj.data) {
data += i + '=' + obj.data[i] + '&' //键值拼接成name=zhagnsan&age=18形式
}
}
if (obj.type == 'get') { //处理get请求发送数据
ajx.open(obj.type, obj.url + '?' + data) //地址上拼接数据
ajx.send()
} else if (obj.type == 'post') { //处理post请求发送数据
ajx.open(obj.type, obj.url)
ajx.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //设置请求头
ajx.send(data) //发送数据
}
ajx.onreadystatechange = () => {
if (ajx.readyState == 4) {
if (ajx.status == 200) {
/*
将得到的数据传给回调函数
短路写法,如果不传fn为空不会执行,有值就执行
*/
fn&&fn(ajx.responseText)
}
}
}
}

这样我们就封装好了,以后使用也就变得方便了

小师妹学JVM之:JIT的Profile神器JITWatch

上一篇

组合查询

下一篇

你也可能喜欢

原生js ajax 封装

长按储存图像,分享给朋友