对于ajax进行封装
在jQuery中,使用ajax异步对象时只需要调用ajax函数即可使用,并且使用对象接收所有的参数,可以让使用者无需在意传递参数的顺序。
// obj接收所有参数
function ajax(obj){
const xhr=new XMLHttpRequest();
// 判断请求类型,当请求类型为get时拼接url
if(obj.type=='get'){
obj.url+='?'+obj.data;
// 修改data值为null,让send时不需要判断传递类型
obj.data=null;
}
xhr.open(obj.type,obj.url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
// 设置回调函数,传递请求报文给回调函数
obj.success(xhr.responseText)
}
}
xhr.send(obj.data);
}
使用时只需要调用函数并且传递参数即可,因为使用对象接收参数,所以参数的顺序可以任意。
btn.addEventListener('click',function(){
ajax({
type:'get',
url:'test.php',
data:'name=ming&age=18',
success:function(data){
// 对请求报文做出JS操作
console.log(data);
}
})
})