JavaScript Ajax 简易版

前言

前台提交数据到后台，很平常的事情。但是很多情况下我们要用到静默提交或局部刷新，这就需要用到Ajax。笔者使用了很多的工具例如JQuery，在后面发现JQuery的体积太大，其实笔者只是需要提交数据到后台，就根据自己的需求简写了一个Ajax。

代码

Ajax = (function() {
    this.options = {
        timeout: 30000,
        async: true,
        dataType: "text"
    };

    var BaseRequest = function(ajax) {
        var xhr = null;

        /*var error = {
            url: "Please check your url of params",
            type: "Please check your type of params"
        }*/

        var

        init = function() {
            xhr = window.XMLHttpRequest ? 
                (function() {
                    return new window.XMLHttpRequest();
                })() :
                (function() {
                    try {
                        return new window.ActiveXObject("Microsoft.XMLHTTP");
                    } catch(e) {
                        console.log("Ajax - XMLHttpRequest cannot be used with the brower.");
                    }
                })();

            if(xhr) {
                xhr.onreadystatechange = callback;
                xhr.timeout = ajax.timeout ? ajax.timeout : options.timeout;
                xhr.ontimeout = (ajax.timeout && typeof ajax.timeout === "function") ? ajax.timeout : null;
            }
            console.log("xhr init complete :", xhr);
        },

        execute = function() {
            xhr.open(ajax.type, 
                    ajax.url, 
                    ajax.async ? ajax.async : options.async);

            if(ajax.headers) {
                var keys = Object.keys(ajax.headers);
                for(var i = 0; i < keys.length; i++) {
                    xhr.setRequestHeader(keys[i], ajax.headers[keys[i]]);
                }
            }

            if(ajax.type.toUpperCase() == "POST") {
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            } else if(ajax.type.toUpperCase() == "GET") {
                ajax.data = null;
            }

            try {
                xhr.send(ajax.data);
            } catch(e) {
                console.log("Ajax send error:" + e);
            }
        },

        callback = function() {
            switch(xhr.readyState) {
                case 0:
                    break;  
                case 1:
                    if(ajax.beforeSend && typeof ajax.beforeSend === "function") {
                        ajax.beforeSend();
                    }
                    break;
                case 2:
                    break;
                case 3:
                    break;
                case 4: 
                    var message = xhr.responseText; 
                    if(xhr.status === 200) {
                        if(ajax.success && typeof ajax.success === "function") {
                            ajax.success(message);  
                        }
                    } else {
                        if(ajax.error && typeof ajax.error === "function") {
                            ajax.error(xhr); 
                        }
                    }  

                    if(ajax.complete && typeof ajax.complete === "function") {
                        ajax.complete(message); 
                    }
                    break;
                default: break;
            }  
        };

        return {

            getField: function(field) {
                return xhr[field];
            },

            auto: function() {
                init();
                execute();
            }
        }
    };

    return {

        /*  post、get、getJson Method的params template
            var obj = {
                url: ["http://...", "https://..."],
                dataType: ["json", "text"]
                data: data,
                success: function() {},
                error: function() {},
                async: [true, false],
                headers: {key1:"value1", key2:"value2", ……},
            }
        */

        post: function(ajax) {
            ajax.type = "POST";
            new BaseRequest(ajax).auto();
        },

        get: function(ajax) {
            ajax.type = "GET";
            new BaseRequest(ajax).auto();
        },

        configuration: this.options
    }
})();

方法讲解

• 对外提供简易的get/post方式

    POST: Ajax.post(param);
    GET : Ajax.get(param);

• 参数格式为：参数根据需求实现，必须选择的为url，success等

param = {
    url: "where you want",
    data: "transfer to back end",
    dataType: "which type you want data format",
    timeout: "Integer, default is 3000ms",
    headers: "http headers, {key1: value1, key2: value2, ……}",
    type: "POST/GET",
    success: function,
    error: function
}

心得

• 使用XMLHttpRequest实现Ajax的请求，实现浏览器兼容;
• 实现简易的访问方式，如有其他的访问方式或者需求，请自定义方法;
• 并没有使用Promise来处理Success/Error的返回，因此可能仍需链式迭代;
• 可以根据需要实现option（全局定义），也可在每次的请求中自定义;
• 对于成功访问的定义为状态码返回200，状态码返回302并不是一个成功的请求，如有需要请自行更改。
• 第一次使用使用Markdown折腾了半天，我好笨#流泪