Question

我有一个javascript代码，它使用对象和属性来执行不同的ajax请求。我想找到一种方法，我可以优化我的代码，以避免重复和代码嗅觉。我有一个对象之旅，其中包含应从数据库中获取详细信息的列表，并附加到使用路径./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;
        });
    },
    ...
};

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

1 个答案: