原生JavaScript封装轻量级AJAX函数：仿jQuery调用与setData复用技巧

背景与需求：无jQuery环境下的AJAX封装

近期开发工作中涉及大量异步数据交互，部分逻辑需由前端承担。此前使用的AJAX函数由后台同事封装，但强依赖jQuery，导致脱离jQuery环境后无法运行。鉴于jQuery自身的AJAX功能已相当完善，若项目已引入jQuery，直接使用其原生方法即可；但若项目未引入jQuery，则亟需一个独立、轻量级的原生AJAX解决方案。

为此，我耗时一天编写了一个名为xhr的封装函数。其参数结构与调用方式高度模仿jQuery的ajax接口，命名xhr源于XMLHttpRequest的缩写，旨在提供无依赖下的标准化异步请求能力。

/*
* 名称: xhr，AJAX封装函数
* 描述: 一个仿照jQuery调用方式的AJAX封装类
* 作者: 十年灯
*/
var xhr = function () {
var
ajax = function () {
return ('XMLHttpRequest' in window) ? function () {
return new XMLHttpRequest();
} : function () {
return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }(),
formatData= function (fd) {
var res = '';
for(var f in fd) {
res += f+'='+fd[f]+'&';
        }
return res.slice(0,-1);
    },
AJAX = function(ops) {
var
root = this,
req = ajax();
root.url = ops.url;
 root.type = ops.type || 'responseText';
 root.method = ops.method || 'GET';
 root.async = ops.async || true; 
 root.data = ops.data || {};
 root.complete = ops.complete || function () {};
 root.success = ops.success || function(){};
 root.error = ops.error || function (s) { alert(root.url+'->status:'+s+'error!')};
 root.abort = req.abort;
 root.setData = function (data) {
 for(var d in data) {
 root.data[d] = data[d];
 }
 }
 root.send = function () {
 var datastring = formatData(root.data),
 sendstring,get = false,
 async = root.async,
 complete = root.complete,
 method = root.method,
 type=root.type;
 if(method === 'GET') {
 root.url+='?'+datastring;
 get = true;
 }
 req.open(method,root.url,async);
 if(!get) {
 req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 sendstring = datastring;
 }
//在send之前重置onreadystatechange方法,否则会出现新的同步请求会执行两次成功回调(chrome等在同步请求时也会执行onreadystatechange)
 req.onreadystatechange = async ? function () {
 // console.log('async true');
 if (req.readyState ==4){
 complete();
 if(req.status == 200) {
 root.success(req[type]);
 } else {
 root.error(req.status);
 } 
 }
 } : null;
 req.send(sendstring);
 if(!async) {
 //console.log('async false');
 complete();
 root.success(req[type]);
 }
 }
 root.url && root.send(); 
 };
 return function(ops) {return new AJAX(ops);} 
}();

参数配置与接口说明

参数配置说明如下：

1. url：请求地址。若不填写则不发起请求，但若强行调用send方法且未提供url，将导致错误且本函数未做异常捕获，需自行处理。 2. method：请求方法，仅支持'GET'或'POST'（需全大写），默认为'GET'。 3. data：附带发送的数据，格式必须为对象（object）。 4. async：是否异步请求，默认为true。 5. type：返回数据类型，仅支持原生AJAX支持的'responseText'或'responseXML'，默认为'responseText'。 6. complete：请求完成时（无论成功失败）执行的回调函数。 7. success：请求成功时执行的回调函数。 8. error：请求失败时执行的回调函数。

注意：type参数功能较jQuery的dataType有限，仅支持文本或XML。若后端返回JSON格式数据，需在success回调中手动通过JSON.parse等方法将文本转换为JSON对象。

函数接口说明：

实例化的xhr对象提供两个主要方法： 1. send()：无参方法，用于发起请求。若初始化时未指定url，则不会自动执行send，允许后续补充url并手动调用send。若send时仍无url，请求将失败且无错误处理。 2. setData(data_obj)：接受一个对象参数，用于局部替换xhr实例中data属性的值。例如，若原data包含page:1，调用setData({page:2})可仅更新页码，保留其他属性不变。

另一个方法是setData，调用方法是xhr.setData(data_obj)，其参数是一个object. setData方法的作用是局部替换xhr的data属性里的值,比如xhr.data中已有一个page:1,你可以用xhr.setData({page:2})来更新他的值,而不影响data中已存在的其他属性值.

调用示例与核心功能：setData复用机制

具体调用示例如下：

var a1 = xhr({
url:'2.php',
data:{
'username':'lix',
'password':'123456',
'gender':'male',
'interset':'play'
        },
async:false,
method:'GET',
success: function (data) {
var obj = JSON.parse(data);
            //....
        }
    });

注:不用写new

设计特色：动态修改与重复请求优化

设计特色与复用场景：

基于项目经验，一个优秀的AJAX封装应具备便于重复发起请求的特性。例如分页功能中，每次翻页仅页码和每页条数变化，其余参数固定。若每次翻页都重新定义完整参数，会造成代码冗余和资源浪费。

本xhr函数已内置此功能。以分页为例，可在页面加载时初始化一个xhr对象并保存为变量a1。当需要翻页时，仅需调用setData方法修改页码参数，无需重新构建整个请求配置，从而实现高效复用。

a1.setData({pageNumber:2});

注:setData的参数也是一个object.

当然，你也可以把data全盘替换:

a1.data = {…};

不只是data,你可以对a1这个已经实例化的xhr对象进行更多的更改,比如换掉url,换掉success函数,GET换成POST,同步换成异步…换完之后,再调用a1.send()方法,他就会按你的设置再次发起请求了.

当然，如果是完全不相关的另一个ajax请求,就没有必要硬要用这个现成的a1了.我们可以再实例化一个xhr,叫a2什么的.

如果你对xhr这个名字不满意,那就只有自己改掉了.

此外提供压缩加密版。未压缩版去注释后约2kb，压缩版仅1.00kb。

var xhr=function(){var e=function(){return"XMLHttpRequest"in window?function(){return new XMLHttpRequest}:function(){return new ActiveXObject("Microsoft.XMLHTTP")}}(),t=function(e){var t="";for(var n in e){t+=n+"="+e[n]+"&"}return t.slice(0,-1)},n=function(n){var r=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r.async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){};r.error=n.error||function(e){alert(r.url+"->status:"+e+"error!")};r.abort=i.abort;r.setData=function(e){for(var t in e){r.data[t]=e[t]}};r.send=function(){var e=t(r.data),n,s=false,o=r.async,u=r.complete,a=r.method,f=r.type;if(a==="GET"){r.url+="?"+e;s=true}i.open(a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function(){if(i.readyState==4){u();if(i.status==200){r.success(i[f])}else{r.error(i.status)}}}:null;i.send(n);if(!o){u();r.success(i[f])}};r.url&&r.send()};return function(e){return new n(e)}}()

xhr肯定有不完善的地方,以后使用中如果发现了,我会及时修正的.如果你用得不爽或发现不足,也请不吝提出改进意见.