<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
function ajax(data) {
//console.log(data.url,data.method); 可改变顺序
var xhr = new XMLHttpRequest();
var method = data.method;
var url = data.url;
var success = data.success;
var error = data.error
var data =data.data||{} //{}设置默认值，创建一个data变量，将data（ajax对象）中的data数据赋值给data变量
//https://jsonplaceholder.typicode.com/posts?username=ajax
//当以get方式上传数据时，数据前加？跟在地址后面
//对method进行判断（get/post）
switch(method)
{
case 'get' :
xhr.open(method,url+'?'+fn(data),true);
xhr.send(null);
break;
case 'post' :
xhr.open(method,url,true);
xhr.setRequestHeader('content-type','application/x-www-urlencoded');
xhr.send(fn(data));
break;
}
//对状态码进行判断
xhr.onreadystatechange = function () {
if (xhr.readyState===4) { //已经接收到全部响应数据，而且已经可以在客户端使用了
if(xhr.status>=200&&xhr.status<300||xhr.status===304){
//console.log(xhr.responseText);
success(JSON.parse(xhr.responseText)); // 如果成功，返回对象数据数据
}
else{
error(xhr.status); //如果失败，返回失败状态码
}
}
}
// 把{name:'ajax',age:28}-->'name=ajax&&age:28' 将对象转换为字符串方便拼接
function fn(obj) {
var arr = [];
for(var key in obj){
//key+'='+obj[key] 利用等号将kv相连，得到name=ajax
arr.push(key+'='+obj[key]) // 每进行一圈，将key+'='+obj[key]的值推入数组
}
return arr.join('&') ; //将处理好的数据丢出去
}
}
//用对象存储数据,对象是函数的实参
ajax(
{
method:'get', // 当通过get方式获取和传入数据时
url:'https://jsonplaceholder.typicode.com/posts',
data:{ //发送的数据
username : 'ajax',
age : 28
},
success:function (res) { // 当获取到数据之后，执行回调函数
console.log(res); //可以改变触发方式，console/alert等
},
error:function (status) {
console.log(status);
}
}
);
/*
不推荐将ajax函数设置成为参数一一对应的关系，因为这样会使顺序固定，
实参传入过程中一旦顺序改变，则程序会报错。
传入对象可解决这个问题
*/
</script>
</body>
</html>
封装函数的完整代码在：
https://blog.csdn.net/weixin_44845533/article/details/99097864
