How to use one AJAX handler for multiple purposes with callbacks?

Question

I have a piece of code written in an object. You can see there is a customers object with a function for adding a new customer and a method for making AJAX calls

var sys = {
  customers: {
    addNew: function(ref, cb = null) {
      if (!cb) { // so it can check if the call to this method was for requesting ajax request or handling its response . note i am sending the callback function reference same as the current
        core.request({
          d: $('form').serialize()
        }, 'sys.customers.addNew', ref);
      } else {
        if (ref.status) {
          $('.customers-list').append('<li>' + ref.customer.name + '</li>');
          alert('success')
        }
      }
    },
    updateRowAfterAdd: function() {
      // or i could use this for handling callback by passing its reference instead of the upper same function
    }
  },
  request: function(p = {}, c = null, e = false) {
    $.ajax({
      url: "/to/my/server",
      data: {
        p: p
      },
      type: 'post',
      dataType: 'json',
      beforeSend: function() {

      },
      success: function(r) {
        if (c != null)
          (e ? eval("(" + c + "(r,e));") : eval("(" + c + "(r));"));
      }
    });
  }
}

$(document).on('click', '.addNew', function() {
  sys.customers.addNew($(this));
});

The idea in this example is to call the AJAX method by passing a callback function reference for handling the success response.

If you look at the addNew() method it is working in two ways. With the help of the second parameter, cb, it is determining that the call to this function was for sending an AJAX request or handling its response back.

I'm using eval() in the success callback which I know is evil, so I want to understand how I can do this without using eval()?

I have multiple things running on my page which need AJAX calls and I don't want to rewrite each of them.

I also need this for AJAX's beforeSuccess() method as well.

Answer 1

The design pattern you're using seems to be a needless abstraction which is causing more problems that it solves.

A better idea would be to have a central 'service' layer which makes the requests to your server side and handles the responses. If you wanted to abstract this further you could have other domain logic abstractions to handle AJAX requests and responses through a single class, however at that stage I would argue you're far better off using an existing framework to do this for you.

A strong recommendation would be to use Angular, given that its MVC pattern is where you're heading anyway.

If you did want to roll your own simplistic version, then a simple example would look something like this:

$(document).on('click', '.addNew', function() {
  services.customers.save($('form').serialize());
});

// in a service layer JS file, far away from UI logic...
let services = {
  customers: {
    save: requestData => {
      $.ajax({
        url: '/to/my/server',
        type: 'post',
        dataType: 'json',
        data: $('form').serialize(),
        success: services.customers.renderUi
      });
    },
    renderCustomerUi: customerData => {
      // optional: extract the UI update logic to your UI layer and pass in the callback as an argument
      if (customerData.status) {
        $('.customers-list').append('<li>' + customerData.customer.name + '</li>');
      }
    }
  }
}