原生Javascript封装的一个AJAX函数分享

最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法.
所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequest.
复制代码代码如下:
/*
* Name: xhr,AJAX封装函数
* Description: 一个ajax调用封装类,仿jquery的ajax调用方式
* Author:十年灯
*/
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,出了错不怪我
2.method: ‘GET"或"POST",全大写,默认GET
3.data: 要附带发送的数据,格式是一个object
4.async: 是否异步,默认true
5.type: 返回的数据类型,只有responseText或responseXML,默认responseText
6.complete: 请求完成时执行的函数
7.success: 请求成功时执行的函数
8.error: 请求失败时执行的函数
注:其中的type参数,并没有jquery的dataType那么丰富,只有原生AJAX有的responseText或responseXML.要是返回的是json数据,你需要在success函数中自己处理一下把text转成json.
函数说明:
一个实例化的xhr对象有两个函数可使用,一个是send,调用方法是:xhr.send（）,无参数,其作用是发起请求过程.如果初始化时没有url,则不会执行send方法,这样你就可以在后面再加入url,并手动发起send—-如果send的时候没有url,那么请求会失败并且我没有处理这个错误,出了错只有你自己找了.
另一个方法是setData,调用方法是xhr.setData（data_obj）,其参数是一个object. setData方法的作用是局部替换xhr的data属性里的值,比如xhr.data中已有一个page:1,你可以用xhr.setData（{page:2}）来更新他的值,而不影响data中已存在的其他属性值.
调用方法:
复制代码代码如下:
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类应该具有一个很常见的特色:便于重复发起请求.比如项目中我写分页ajax的时候,每次翻页都要发送请求,但发送的数据中除了当前页码和每页条数,其他的都是不会改变的.如果多次这样的请求,都要重复定义那些不变的参数,无疑是种资源浪费.
所以这个xhr函数,就已经考虑了这个功能.还是拿分页的例子来说,我们可以在页面加载完成的时候就初始化一个xhr对象,保存为变量a1,当发起翻页请求时,其他的什么参数都没变,但pageNumber变了,此时就可以调用xhr的setData方法,把pageNumber改掉.
复制代码代码如下:
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肯定有不完善的地方,以后使用中如果发现了,我会及时修正的.如果你用得不爽或发现不足,也请不吝提出改进意见.