手动封装XMLHttpRequest
自己动手封装一个XMLHttpRequest, 兼容低版本浏览器，自动检测post与get 类型请求，自动参数拼接，参数类型辨别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义XMLHttpRequest实现前后端通讯</title>
</head>
<body>
<button type="button" onclick="getData()">获取数据</button>
<script>
function getData() {
custRequest([{
url: './box.html',
success: function(res) {
console.log(res)
},
error: function(err) {
console.log(err)
}
}])
}
function custRequest(options) {
var opt = {
url: '',
type: 'get',
data: {},
success: function() {},
error: function() {}
};
// detect type of options
if (typeof options === 'string') {
if (isJsonObj(options)) {
options = JSON.parse(options)
} else {
throw 'The options be must a json object or a string of json format'
}
}
if(Array.isArray(options)){
options = options[0]
}
// merage options
for (var key in options) {
opt[key] = options[key]
}
if (opt.url) {
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new Window.ActiveXObject('Microsoft.XMLHTTP');
var data = opt.data,
url = opt.url,
type = opt.type.toUpperCase(),
dataArr = [];
for (var k in data) {
dataArr.push(k + '=' + data[k])
}
if (type === 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url.replace(/\?$/g, ''), true);
xhr.send();
}
if (type === 'POST') {
xhr.open(type, url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(dataArr.join('&'));
}
xhr.onload = function() {
if (xhr.status === 200 || xhr.status === 304) {
var res;
if (opt.success && opt.success instanceof Function) {
res = xhr.responseText;
if (typeof res === 'string') {
if (isJsonObj(res)) {
res = JSON.parse(res);
}
opt.success.call(xhr, res)
}
}
} else {
if (opt.error && opt.error instanceof Function) {
opt.error.call(xhr, res)
}
}
}
}
}
function isJsonObj(text){
if (/^[\],:{}\s]*$/.test(text.replace(/\\["\\\/bfnrtu]/g, '@').
replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
//the json is ok
return true
}else{
//the json is not ok
return false
}
}
</script>
</body>
</html>
