布局结构
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/myAjax.js"></script>
</head>
<body>
<script>
var obj={
method:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
data:{id:1},
success:function(res){
console.log(res);
}
}
var obj2={
method:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
data:null,
success:function(res){
console.log(res);
}
}
var obj3={
method:'POST',
url:'http://www.liulongbin.top:3006/api/addbook',
data:{
bookname:'水浒传',
author:'施耐庵',
publisher:'上海图书出版社'
},
success:function(res){
console.log(res);
}
}
myAjax(obj);
myAjax(obj2);
myAjax(obj3);
</script>
</body>
</html>js文件
//转换为查询字符串格式
function strForm(data){
var arr=[];
for(let k in data){
arr.push(k+'='+data[k])
};
return arr.join('&');
};
//封装自己的ajax
function myAjax(obj){
var xhr=new XMLHttpRequest();
var str=strForm(obj.data);
if(obj.method.toUpperCase()==='GET'){
if(obj.data){
xhr.open(obj.method,obj.url+'?'+str);
}
else{
xhr.open(obj.method,obj.url);
}
xhr.send();
}else if(obj.method.toUpperCase()==='POST'){
xhr.open(obj.method,obj.url);
xhr.setRequestHeader('Content-Type','application/x-www-html-urlencoded');
xhr.send(str);
}
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
var result=JSON.parse(xhr.responseText) //需要把JSON字符串格式转换为js对象格式
obj.success(result);
}
}
};