这几天在恶(xue)补(xi)node.js,其中老师讲到了ajax,以前学习js都是东一点、西一点。不系统,当然,原因也很多。
当时一些js基础知识也欠缺(虽然现在也不咋的),想要自己封装,难度也很大。
今天也终于自己封装一个简易 的ajax。
发送POST数据,需要设置header头:
将 Content-Type
头部信息设置为 application/x-www-form-urlencoded
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
完整代码参考:
(function (w) {
var responseType = function (type, content) {
switch (type) {
case 'TEXT':
return content;
case 'JSON':
return JSON.parse(content);
default:
return content;
}
};
var param = function (a) {
var s = [],
rbracket = /\[\]$/,
isArray = function (obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
},
add = function (k, v) {
v = typeof v === 'function' ? v() : v === null ? '' : v === undefined ? '' : v;
s[s.length] = encodeURIComponent(k) + '=' + encodeURIComponent(v);
},
buildParams = function (prefix, obj) {
var i, len, key;
if (prefix) {
if (isArray(obj)) {
for (i = 0, len = obj.length; i < len; i++) {
if (rbracket.test(prefix)) {
add(prefix, obj[i]);
} else {
buildParams(prefix + '[' + (typeof obj[i] === 'object' ? i : '') + ']', obj[i]);
}
}
} else if (obj && String(obj) === '[object Object]') {
for (key in obj) {
buildParams(prefix + '[' + key + ']', obj[key]);
}
} else {
add(prefix, obj);
}
} else if (isArray(obj)) {
for (i = 0, len = obj.length; i < len; i++) {
add(obj[i].name, obj[i].value);
}
} else {
for (key in obj) {
buildParams(key, obj[key]);
}
}
return s;
};
return buildParams('', a).join('&').replace(/%20/g, '+');
};
async function ajax(options) {
options.method = options.method ? options.method.toUpperCase() : 'GET';
options.dataType = options.dataType ? options.dataType.toUpperCase() : 'TEXT';
options.data = options.data ? options.data : '';
options.success = options.success ? options.success : function () {
};
options.fail = options.fail ? options.fail : function () {
};
if (!options.url) {
throw new Error("there are no url.");
}
var ajax = new XMLHttpRequest();
ajax.open(options.method, options.url, true);
if (options.method === 'POST') {
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(typeof options.data === 'object' ? param(options.data) : options.data);
} else {
ajax.send();
}
ajax.onreadystatechange = function () {
if (ajax.readyState === 4) {
if (ajax.status === 200 || ajax.status === 301) {
options.success(responseType(options.dataType, ajax.responseText));
} else {
throw new Error("the status of this request is't done.");
}
}
};
}
w.ajax = ajax;
})(window);
其中param函数是参考:https://www.cnblogs.com/daysme/p/6651382.html
目的是发送post时,如果data参数是对象,那么将其转换为字符串类型。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="ajax.js"></script>
<script>
window.onload = function () {
let oBtn = document.getElementById('btn');
oBtn.onclick = function () {
ajax({
url: 'http://localhost:3000',
method: 'post',
data: 'aa=ff&dd=afjalk',
success: function (res) {
console.log(res);
},
dataType: 'json'
})
};
};
</script>
</head>
<body>
<button id="btn">Request</button>
</body>
</html>
核心就是:
ajax({
url: 'http://localhost:3000',
method: 'post',
data: 'aa=ff&dd=afjalk', // data可以是这种字符串,也可以是对象{}
success: function (res) {
console.log(res);
},
dataType: 'json'
})
压缩文件下载:ajax.min.js