javascript - 如何编写一个 javascript 函数来执行 ajax 请求而不重复以避免代码异味而不使用 JQuery 库

Question

我有一个 javascript 代码，它使用对象和属性来执行不同的 ajax 请求。我想找到一种方法来优化我的代码以避免重复和代码异味。我有一个包含列表的对象 trip，它应该从数据库中获取详细信息并附加到我用路径 ./trips/action/定义的 servlet。不需要 JQuery

 var trip = {
    list: function(){
        var ajax = new XMLHttpRequest();

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4){
                if(ajax.status == 200){
                    document.getElementById('ajax-content').innerHTML = ajax.responseText;
                }
            }
        }

        ajax.open("GET", "./trips/action", true);
        ajax.send();
    },
    add: function(){
        var ajax = new XMLHttpRequest();

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4){
                if(ajax.status == 200){
                    document.getElementById('ajax-content').innerHTML = ajax.responseText;
                }
            }
        }

        ajax.open("GET", "./trip/addTrip.jsp", true);
        ajax.send();
    },

    save: function(){
        var me = this;
        var ajax = new XMLHttpRequest();

        var depatureDate = document.getElementById('depatureDate').value;
        var arrivalDate = document.getElementById('arrivalDate').value;
        var route = document.getElementById('route').value;
        var vehicle = document.getElementById('vehicle').value;
        var price = document.getElementById('price').value;

        var params = 'depatureDate=' + encodeURIComponent(depatureDate) 
            + '&arrivalDate=' + encodeURIComponent(arrivalDate)
            + '&route=' + encodeURIComponent(route)
            + '&vehicle=' + encodeURIComponent(vehicle)
            + '&price=' + encodeURIComponent(price);

        console.log(params);

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4){
                if(ajax.status == 200){
                    me.list();
                }
            }
        }

        ajax.open("POST", "./trips/action/add", true);
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        ajax.send(params);
    }

  }

Answer 1

您可以创建效用函数:

var utils = {
    ajax: function(url, method, params, callback) {
        if (typeof callback == 'undefined') {
            callback = arguments[1];
            params = null;
        }
        var ajax = new XMLHttpRequest();

        ajax.onreadystatechange = function() {

            if (ajax.readyState == 4){
                if (ajax.status == 200){
                    if (typeof callback == 'function') {
                        callback(ajax.responseText);
                    }
                }
            }
        }

        ajax.open(method, url, true);
        if (params) {
            ajax.send(params);
        } else {
            ajax.send();
        }
   },
   get: function(url, params, callback) {
       this.ajax(url, 'GET', params, callback);
   },
   post: function(url, params, callback) {
       this.ajax(url, 'POST', params, callback);
   }
};

您可以在您的代码中使用它:

var trip = {
    list: function(){
        util.get("./trips/action", function(data) {
            document.getElementById('ajax-content').innerHTML = data;
        });
    },
    ...
};