首先我们先了解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) } } } }
这样我们就封装好了,以后使用也就变得方便了