事情之余简朴封装了ajax的要求,然则事情中照样用jquery,axios,angular内部封装好了http模块(笑)。
ajax平常分为简朴的四部:
- 竖立ajax对象(这里兼容ie的话要做一下处置惩罚)
- 衔接,即要求对象的open要领(get和post另有点差别,get参数要放在url背面,post要设置要求头)
- 发送,即要求对象的send函数(post参数则放在send内里)
- 吸收,在onreadystatechange(存储函数或函数名,每当readyState属性转变时,就会挪用该函数。)函数内里处置惩罚。
还能够加上超时这些
onreadystatechange剖析
- 要先推断readyState的状况(有四个状况)
①: 0,要求未初始化;
②: 1,服务器衔接已竖立;
③: 2,要求已吸收;
④: 3,要求处置惩罚中;
⑤: 4,要求已完成,且相应已停当
- 当readyState即是4时,你又要推断status的状况
- 要求胜利时status状况 200-300(不包括300) ,另有304(是缓存)(详细状况能够去参考文档)
- 在胜利(失利)的回掉函数内里将xhr.responseText的值返回出去。
代码
'use strict';
var $ = {};
$.ajax = ajax;
function ajax(options) {
// 剖析参数
options = options || {};
if (!options.url) return;
options.type = options.type || 'get';
options.timeout = options.timeout || 0;
// 1 竖立ajax
if (window.XMLHttpRequest) {
// 高等浏览器和ie7以上
var xhr = new XMLHttpRequest();
} else {
//ie6,7,8
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2 衔接
var str = jsonToUrl(options.data);
if (options.type === 'get') {
xhr.open('get', `${options.url}?${str}`, true);
// 3 发送
xhr.send();
} else {
xhr.open('post', options.url, true);
// 要求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 3 发送
xhr.send();
}
// 吸收
xhr.onreadystatechange = function() {
// 完成
if (xhr.readyState === 4) {
// 消灭定时器
clearTimeout(timer);
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
// 胜利
options.success && options.success(xhr.responseText);
} else {
options.error && options.error( xhr.status );
}
}
};
// 超时
if (options.timeout) {
var timer = setTimeout(function(){
alert("超时了");
xhr.abort(); // 停止
},options.timeout);
}
}
// json转url
function jsonToUrl(json) {
var arr = [];
json.t = Math.random();
for(var name in json) {
arr.push(name + '=' + encodeURIComponent(json[name]));
}
return arr.join('&');
}