封装函数的要点就是把重复使用的部分提取取来,同时一些变化的东西作为参数,无法作为参数的进行判断处理。
1 所以我们先看看变化的东西都有哪些:1 请求方式是get/post 2 请求的地址 3 请求的数据 4 请求成功后需要做的事情
2 因为不同的请求方式,我们传数据的方式不一样,所以对于这些,需要进行条件判断。
3 还有一个问题就是关于 xhr.responseText ,变量xhr是在封装函数中声明的,所以这个东西属于ajax函数的,我们在success函数中是用不到的, 但是success这个函数里面需要用这个数据。所以办法就是在封装函数中调用success函数的时候,把xhr.responseText当作参数传出去。success(xhr.responseText)。
其实这是一种回调,回调就是一个函数作为另一个函数的参数,并在另一个函数里面被调用,这个栗子就是success作为ajax函数的参数,并在ajax里面被调用。 (其实个人感觉就是函数在用参数,函数的参数,就是拿来用的,只是现在参数是函数,所以就调用呗)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//封装
document.onclick = function(){
var url = "http://localhost/ajax/data/get-post.php";
ajax({
success:function(res){
console.log(res);
},//成功的时候
url:url,//属性名跟变量
type:"get",//类型
data:"user=admin&pass=123"//发送数据
});
}
//ops是传入的对象
function ajax(ops){
// 先处理默认属性
ops.type = ops.type || "get";//默认ops是get
ops.data = ops.data || "";
// 根据当前的请求方式,决定是否需要拼接数据,处理url
if(ops.type=="get"){
let t=new Date().getTime();
ops.url = ops.url + "?__qft=" + t + "&" +ops.data;
}
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 开启请求
xhr.open(ops.type, ops.url);
// 根据类型决定send的内容及内容数据格式
if(ops.type == "get"){
xhr.send();
}else{
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(ops.data);
}
// 开启监听
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
// 执行回调函数,取出数据
ops.success(xhr.responseText);
}
}
}
</script>
</html>