AJAX封装
作者:互联网
主要就是判断请求方法和请求头的类型
defaults存储默认值,当调用AJAX时,有些属性未定义时,则使用默认值
js
function AJAX(options){
// 存储的是默认值
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function () {},
error: function () {}
};
// 将options对象中的属性覆盖defaults
Object.assign(defaults,options);
let xhr = new XMLHttpRequest();
// 拼接请求参数的变量
let params = '';
// 遍历用户传递的对象格式数据
for(let attr in defaults.data){
// 将参数转为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后的&截取掉
params = params.substr(0,params.length-1);
// 判断请求方式 将参数拼接进url
if(defaults.type == 'get'){
defaults.url = defaults.url + '?' +params;
}
xhr.open(defaults.type,defaults.url);
// 如果请求方式为post 设置请求参数格式的类型
if(defaults.type == 'post')
{
// 用户向服务器端传递的请求参数的类型
let contentType = defaults.header['Content-Type'];
// 设置请求头
xhr.setRequestHeader('Content-Type',contentType);
// 若类型为json
if(contentType == 'application/json'){
// 向服务器端传递json数据格式的参数
xhr.send(JSON.stringify(defaults.data))
}
else{
// 向服务器端传递普通数据类型的参数
xhr.send(params);
}
}
// 若为get 则不需带参数 直接发送请求
else{
xhr.send()
}
xhr.onload = function(){
// 获取响应头中的数据
let contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
let responseText = xhr.responseText;
// 如果响应类型中包含application/json
if(contentType.includes('application/json')){
// 将json字符串转为json对象
responseText = JSON.parse(responseText)
}
if(xhr.status == 200){
defaults.success(responseText,xhr)
}else{
defaults.error(responseText,xhr)
}
}
}
引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./09.AJAX封装.js"></script>
<script>
AJAX({
type:'get',
url:'http://localhost:3000/responseData',
// 接受响应的数据
success(data){
console.log('这里是success函数:');
console.log(data);
}
})
</script>
</body>
</html>
Xyouzi
发布了6 篇原创文章 · 获赞 0 · 访问量 289
私信
关注
标签:封装,responseText,json,xhr,AJAX,params,defaults,let 来源: https://blog.csdn.net/Xyouzi/article/details/104080009