前端三大框架，解析原生AJAX封装方法

[a96517127128]

有用AJAX接口请求封装，举一反三。话不多说，直接上代码：
global.NEWS_KEY = 'axxxxxxxxx'; //接口 KEY

global.REQUEST_IP='http://192.168.0.X:8080';


global.requestChannel = `${global.REQUEST_IP}/news/h5/v1.1/channel`;
global.requestTheChannel = `${global.REQUEST_IP}/news/h5/v1.1/getNews`
global.requestSearchChannel = `${global.REQUEST_IP}/news/h5/v1.1/searchNews`
global.requestTongcheng = `${global.REQUEST_IP}/live/tongcheng/h5/v1.1/getUrl`
global.requestBaiZhou = `${global.REQUEST_IP}/live/baiZhou/h5/v1.1/getUrl`
global.requestUserinfo = `http://192.168.0.X/userinfo/detail`//

/**
* 请求
* @param {*} type 请求类型get/post，
* @param {*} url 请求地址
* @param {*} data 请求数据
* @param {*} requestHeader 请求头
* @param {*} success 请求成功回调
* @param {*} error 请求错误回调
*/
global.xAjax = (type, url, data, requestHeader, success,error) => {
// 1. 创建 ajax 请求对象。
let xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
// 2. 设置请求参数。
xhr.open(type, url, true);
if('' === requestHeader){
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}else{
xhr.setRequestHeader("Content-type", requestHeader);
}

// 3. 将请求提交给服务器
xhr.send(data);
// 4. 等待服务器响应。
xhr.onreadystatechange = function () {
if (4 == xhr.readyState && 　200 == xhr.status) {
success(xhr.responseText);
}else if(200 != xhr.status){
error({"status":xhr.status,"msg":'请求错误'});
}
}

}

/**
* 请求
* @param {*} type 请求类型get/post，
* @param {*} url 请求地址
* @param {*} data 请求数据
* @param {*} reqParams 请求参数
* @param {*} callback 请求成功回调，该回调两个参数 err,response
*/
global.ajax = function (type, url, reqParams,callback) {
// 1. 创建 ajax 请求对象。
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
// 2. 设置请求参数。
xhr.open(type,url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3. 将请求提交给服务器
xhr.send(reqParams);
// 4. 等待服务器响应。
xhr.onreadystatechange = ()=>{
if (4 == xhr.readyState && 　200 == xhr.status) {
callback(null,xhr.responseText);
}else if(200 != xhr.status){
callback(xhr.status,null);
}
};
}

/**
* 请求
* @param {*} type 请求类型get/post，
* @param {*} url 请求地址
* @param {*} data 请求数据
* @param {*} reqParams 请求参数
* @param {*} token 请求头部token
* @param {*} callback 请求成功回调，该回调两个参数 err,response
*/
global.urlAjax = function (type, url, reqParams,token,callback) {
// 1. 创建 ajax 请求对象。
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
// 2. 设置请求参数。
xhr.open(type,url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("channel", "mobile");
xhr.setRequestHeader("access_token", token);
// 3. 将请求提交给服务器
xhr.send(reqParams);
// 4. 等待服务器响应。
xhr.onreadystatechange = ()=>{
if (4 == xhr.readyState && 　200 == xhr.status) {
callback(null,xhr.responseText);
}else if(200 != xhr.status){
callback(xhr.status,null);
}
};
}

[風灬雲]

明明就是原生ajax封装，和三大框架有毛关系