/**
* @author li914
* 功能:使用XMLHttpRequest实现进行请求,get/post 请求
* 创建时间:2019-11-14
* */
var liHttp = {
/**
* 功能:进行get请求
* @param options 请求设置
* options.url 请求地址
* options.timeout 请求超时时间,默认0
* options.dataType 请求完成后返回数据格式 默认为空,即返回数据为字符串
* options.sysnc 设置请求异步或同步 默认为 true 异步请求
* options.headers 设置请求header信息 例如:{"aaa":"bbb"}
* options.success 请求成功时触发的回调函数
* res 请求结果 包含:response 服务器返回的数据 status 服务器返回的状态码 statusText 结果文字 OK
* xml XMLHttpRequest的对象
* options.error 请求失败时触发的回调函数
* err 失败信息
* xml XMLHttpRequest的对象
* options.complete 请求完成时触发回调函数,无论成功或失败,都会触发此函数
* res 完成信息
* xml XMLHttpRequest的对象
* */
get:function (options) {
var _options_ = {
url:"",
timeout:0,
dataType:"",
sysnc:true,
headers:{},
success:function (res,xml) {},
error:function (err,xml) {},
complete:function (res,xml) {}
};
if (typeof options == "object"){
for (var key in options){
if (_options_.hasOwnProperty(key)){
_options_[key] = options[key];
}
}
}
this.xml();
var xml = this.http;
xml.open("GET",_options_.url,_options_.sysnc);
xml.timeout = _options_.timeout;
xml.responseType = _options_.dataType;
for (var k in _options_.headers){
xml.setRequestHeader(k, _options_.headers[k]);
}
xml.send();
xml.onreadystatechange = function (evt) {
if (xml.readyState === 4){
var status = xml.status;
var statusText = xml.statusText;
var response = xml.response;
if (status && statusText){
_options_.success({response:response,status:status,statusText:statusText},xml);
}
}
};
xml.ontimeout = function (e) {
_options_.complete(e.type,xml);
};
xml.onloadend = function(e){
_options_.complete(e,xml);
};
xml.onerr = function (err) {
_options_.error(err,xml);
_options_.complete(err,xml);
};
return this;
},
/**
* 功能:进行post请求,并且可使用FormData包装可进行上传文件
* @param options 请求设置
* options.url 请求地址
* options.timeout 请求超时时间,默认0
* options.data post请求参数
* options.dataType 请求完成后返回数据格式 默认为空,即返回数据为字符串
* options.sysnc 设置请求异步或同步 默认为 true 异步请求
* options.headers 设置请求header信息 例如:{"aaa":"bbb"}
* options.success 请求成功时触发的回调函数
* res 请求结果 包含:response 服务器返回的数据 status 服务器返回的状态码 statusText 结果文字 OK
* xml XMLHttpRequest的对象
* options.error 请求失败时触发的回调函数
* err 失败信息
* xml XMLHttpRequest的对象
* options.complete 请求完成时触发回调函数,无论成功或失败,都会触发此函数
* res 完成信息
* xml XMLHttpRequest的对象
* */
post:function (options) {
var _options_ = {
url:"",
timeout:0,
data:{},
dataType:"",
sysnc:true,
headers:{},
success:function (res,xml) {},
error:function (err,xml) {},
complete:function (res,xml) {}
};
if (typeof options == "object"){
for (var key in options){
if (_options_.hasOwnProperty(key)){
_options_[key] = options[key];
}
}
}
this.xml();
var xml = this.http;
xml.open("POST",_options_.url,_options_.sysnc);
xml.timeout = _options_.timeout;
xml.responseType = _options_.dataType;
for (var k in _options_.headers){
xml.setRequestHeader(k, _options_.headers[k]);
}
var params = null;
if (Object.prototype.toString.call(_options_.data)==='[object Object]') {
params = new FormData();
for (var key in _options_.data){
params.append(key,_options_.data[key]);
}
}
if (Object.prototype.toString.call(_options_.data)==='[object FormData]') {
params = _options_.data;
}
if (Object.prototype.toString.call(_options_.data)==='[object String]') {
params = _options_.data;
}
xml.send(params);
xml.onreadystatechange = function (evt) {
if (xml.readyState === 4){
var status = xml.status;
var statusText = xml.statusText;
var response = xml.response;
if (status && statusText){
_options_.success({response:response,status:status,statusText:statusText},xml);
}
}
};
xml.ontimeout = function (e) {
_options_.complete(e.type,xml);
};
xml.onloadend = function(e){
_options_.complete(e,xml);
};
xml.onerr = function (err) {
_options_.error(err,xml);
_options_.complete(err,xml);
};
return this;
},
/**
* 功能:进行get/post请求,在post请求下,,可使用FormData包装可进行上传文件
* @param options 请求设置
* options.url 请求地址
* options.timeout 请求超时时间,默认0
* options.data post 请求参数
* options.data type 请求方法 默认get
* options.dataType 请求完成后返回数据格式 默认为空,即返回数据为字符串
* options.sysnc 设置请求异步或同步 默认为 true 异步请求
* options.headers 设置请求header信息 例如:{"aaa":"bbb"}
* options.success 请求成功时触发的回调函数
* res 请求结果 包含:response 服务器返回的数据 status 服务器返回的状态码 statusText 结果文字 OK
* xml XMLHttpRequest的对象
* options.error 请求失败时触发的回调函数
* err 失败信息
* xml XMLHttpRequest的对象
* options.complete 请求完成时触发回调函数,无论成功或失败,都会触发此函数
* res 完成信息
* xml XMLHttpRequest的对象
* */
ajax:function(options){
var _options_ = {
url:"",
timeout:0,
data:{},
type:"get",
dataType:"",
sysnc:true,
headers:{},
success:function (res,xml) {},
error:function (err,xml) {},
complete:function (res,xml) {}
};
if (typeof options == "object"){
for (var key in options){
if (_options_.hasOwnProperty(key)){
_options_[key] = options[key];
}
}
}
this.xml();
var xml = this.http;
xml.open(_options_.type,_options_.url,_options_.sysnc);
xml.timeout = _options_.timeout;
xml.responseType = _options_.dataType;
for (var k in _options_.headers){
xml.setRequestHeader(k, _options_.headers[k]);
}
var params = null;
if (Object.prototype.toString.call(_options_.data)==='[object Object]') {
params = new FormData();
for (var key in _options_.data){
params.append(key,_options_.data[key]);
}
}
if (Object.prototype.toString.call(_options_.data)==='[object FormData]') {
params = _options_.data;
}
if (Object.prototype.toString.call(_options_.data)==='[object String]') {
params = _options_.data;
}
xml.send(params);
xml.onreadystatechange = function (evt) {
if (xml.readyState === 4){
var status = xml.status;
var statusText = xml.statusText;
var response = xml.response;
if (status && statusText){
_options_.success({response:response,status:status,statusText:statusText},xml);
}
}
};
xml.ontimeout = function (e) {
_options_.complete(e.type,xml);
};
xml.onloadend = function(e){
_options_.complete(e,xml);
};
xml.onerr = function (err) {
_options_.error(err,xml);
_options_.complete(err,xml);
};
return this;
},
/**
* 功能:进行创建XMLHttpRequest对象
* */
xml:function () {
if (!this.http){
if (window.XMLHttpRequest) {
this.http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
this.http = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return this;
},
/**
* 保存XMLHttpRequest对象
* */
http:null
};
使用方法:引入后,可直接调用