最近的工作中涉及到大量的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) "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+='"Content-type","application/x-www-form-urlencoded");
                sendstring = datastring;
            }      

            //在send之前重置onreadystatechange方法,否则会出现新的同步请求会执行两次成功回调(chrome等在同步请求时也会执行onreadystatechange)
            req.onreadystatechange = async "codetitle">复制代码 代码如下:
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"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肯定有不完善的地方,以后使用中如果发现了,我会及时修正的.如果你用得不爽或发现不足,也请不吝提出改进意见.