js 封装ajax 以及调用发起后台请求
一个功能封装一个方法
如何封装方法
1,确定哪些方法是可变的(参数)
2,确定返回值 (单个值,对象)
3,参数+代码 实现达到返回值
function createAjax(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function getValStr(dataObj){
var arr= [];
for(var key in dataObj){
arr.push(key+"="+dataObj[key]);
}
var datas = arr.join("&");
return datas;
}
function ajax(options){
var xhr = createAjax()
var types = options.type.toLowerCase();
var datas = getValStr(options.data)
if(types == "get"){
options.url = options.url+ "?" + datas
}else if(types == "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
}else{
console.log("传输方式错误");
}
xhr.open(options.type,options.url)
xhr.send(types == "get"? null : datas)
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
var data = JSON.parse(xhr.responseText)
if(xhr.status==200){
options.success(data)
}else{
options.error(data)
}
}
}
}
调用 ajax方法 发送请求
ajax({
type:"get",
url:"http://localhost:3000/user/getUserList",
data:{
page:1,
size:13
},
success:function(res){
console.log(res);
},
error: function(status) {
console.log('状态码为' + status);
}
});