<script>
// 请求服务器返回客户端的数据是字符串的json数据,所以把json数据转换为json对象
function ajax(options){
// 存储的是默认值
let defaults = {
type:'get',
url:'',
data:{},
header:{
'Content-Type':'application/json'
},
success:()=>{},
error:()=>{}
};
// 使用options里面的属性覆盖defaults里面的属性
Object.assign(defaults,options);
// 1.创建
let xhr = new XMLHttpRequest();
// 拼接请求参数的变量
let params = '';
// 循环用户传递进来的对象格式参数
for(let attr in defaults.data){
// 参数转换为字符串格式
params += attr + '=' + defaults.data[attr] +'&';
}
// 将参数最后面的&截取掉
params = params.substr(0,params.length - 1);
// 判断请求方式
if(defaults.type == 'get'){
defaults.url = defaults.url + '?' + params;
}
// console.log(params);
// 2.配置ajax对象
xhr.open(defaults.type,defaults.url);
// 如果请求方式为post
if(defaults.type == 'post'){
// 用户希望的向服务器传递的请求参数的类型
let contentType = defaults.header['Content-Type'];
// 设置请求参数格式的类型
xhr.setRequestHeader('Content-type',contentType);
// application/x-www-form-urlencoded是get式的字符拼接
// application/json 是json格式的
if(contentType == 'application/json'){
xhr.send(JSON.stringify(defaults.data));//json转换为json字符串
}else{
xhr.send(params);
}
}else{
// 3.发送请求
xhr.send();
}
// 监听xhr对象下面的onload事件
xhr.onload = ()=>{
// 获取响应头中的数据
let contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
let responseText = xhr.responseText;
// 如果响应类型包含application/json
if(contentType.includes('application/json')){
responseText = JSON.parse(responseText)
}
if(xhr.status == 200){
defaults.success(responseText,xhr);
}else{
defaults.error(responseText,xhr);
}
}
}
ajax({
url:'http://localhost:3000/responseData',
data: {
name:'lf',
age:20
},
success:(data,xhr)=>{
// console.log('this is '+ data)
console.log(data)
}
});
</script>
node Ajax完整封装
最新推荐文章于 2022-08-02 00:03:22 发布