javascript xmlhttprequest 纯天然无第三方插件 ajax 实现

手写的纯javascript 实现xmlhttprequest .

屛弃了所有第三方javascript 包,这样做的目的主要是节省空间,现在很多第三方框架动辄几十K,上百k 等.

如果我们只用到其中一个很小的 ajax 功能,完全没有必要这样做.

而且当前的应用环境是手机端的展示,所以对于流量的考虑至关重要.

看下代码实现:

function ajax(option, callback) {
    //option 参数必须是对象,里面包括 (type 请求方式,url 请求路径,param 请求参数)
    if (typeof option === 'object') {
        //option 没有定义请求url ,直接返回错误
        if (!option.hasOwnProperty('url')) {
            return callback('no url');
        }
        //option 没有定义请求方式,默认我 get 请求
        if (!option.hasOwnProperty('type')) {
            option.type = 'GET';
        }
    } else {
        //如果 option 不是对象,直接返回
        return callback('option not object');
    }

    var xmlHttp = null;
    if (window.XMLHttpRequest) {
        //针对chrome,firefox 等浏览器创建 xmlhttprequest 对象
        xmlHttp = new XMLHttpRequest();
        if (xmlHttp.overrideMimeType) {
            //针对http传输mime类型不是 text/xml 时的设置.
            xmlHttp.overrideMimeType('text/xml');
        }
    } else if (window.ActiveXObject) {
        //针对变态浏览器IE及其各版本创建 xmlhttprequest 对象
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                console.log('Microsoft.XMLHTTP xmlHttpRequest Generation error!', e);
                return callback('Microsoft.XMLHTTP xmlHttpRequest Generation error!', null);
            }
        }
    }
    //如果参数对象option 包括 param 参数对象
    if ( option.hasOwnProperty('param')) {
        //如果传输方式是 get 时
        if(option.type.toLowerCase() === 'get'){
            option.url += '?';
            var i = 0;
            for (var key in option.param) {
                option.url += i == 0 ? (key + '=' + option.param[key]) : ('&' + key + '=' + option.param[key]);
                ++i;
            }
        }
        //如果传输方式是 post 时
        if(option.type.toLowerCase() === 'post'){
            xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            var params,i=0;
            for (var key in option.param) {
                params += i == 0 ? (key + '=' + option.param[key]) : ('&' + key + '=' + option.param[key]);
                ++i;
            }
            xmlHttp.send(params);
        }
    }
    xmlHttp.open(option.type.toUpperCase(), option.url, true);
    xmlHttp.send();

    //ajax 请求状态变化监听
    xmlHttp.onreadystatechange = function () {
        // readState == 4 请求完成
        if (xmlHttp.readyState == 4) {
            //状态码 返回 200 表示请求成功
            if (xmlHttp.status == 200) {
                callback(null, xmlHttp.responseText);
            }
            //状态码 返回 1xx 提示客户端使用更高版本 HTTP 协议
            if ((xmlHttp.status / 100) === 1) {
                callback('请使用更高版本的HTTP协议');
            }
            //状态码 返回 3xx 表示请求实现了跳转
            if ((xmlHttp.status / 100) === 3) {
                callback('请求跳转到新的URL');
            }
            //状态码 返回 4xx 表示请求的资源不存在,比如 404
            if ((xmlHttp.status / 100) === 4) {
                callback('客户端请求的资源不存在');
            }
            //状态码 返回 5xx 表示服务器端错误
            if ((xmlHttp.status / 100) === 5) {
                callback('服务器端错误');
            }
        }
    };
}

上面的注释足够清楚.

如何使用,见下面的代码:

ajax({
    type: "GET",
    url: "/common/blog/detail",
    param: {
        key: "66787826c3da3e9f1db21"
    }
}, function (err, result) {
    //这里返回错误信息 或者 正确结果
    alert(err + result);
});