javascript: handling client side initiated objects that the server hasn't assigned an id to

I'm developing a javascript application and I'm trying to make server side syncing as automagic and unobtrusive as possible

The problem I'm facing is that when creating an object client side I can immediately send the create ajax request and while I'm waiting for it to return add the object to the ui where necessary

However since the object has no id until the server responds I can't perform any update or destroy actions on it until the server responds and updates its id

What is the best way of dealing with this problem?

Some code if it helps:

create_object = function() {

  return {

    save: function() {
      if (this.isNew()) {
        this.create();
      } else {
        this.update();
      }
    },  

    isNew: function() {
      return (this.id === undefined || this.id === null);
    },

    update: function () {
      $.ajax({
        url: '/update_object/'+this.id+'.json',
 开发者_如何学C       type: 'post',
        dataType: 'json',
        data: this
      });
    },

    create: function () {
      var object = this;
      $.ajax({
        url: '/create_object',
        type: 'post',
        dataType: 'json',
        data: this,
        success: function(data) {
          object.id = data.id;
        }
      });
    },

    destory: function () {
      $.ajax({
        url: '/destroy_object/'+this.id+'.json',
        type: 'get',
        dataType: 'json'
      });
    }

  };

};

var object = create_object();
object.message = "Foo!";
object.save();

// this will create a new object until object.save has responded
object.message = "Bar!";
object.save();

// this wont work until object.save has responded
object.destroy();

This is not really a problem. AJAX is asynchronous by nature (Asynchronous Javascript and XML). You will have to wait until you get a response from the server to update your UI.

If you must update the UI immediately, you can create an element with a placeholder ID that you can then update with the actual ID once the server responds.

UPDATE

This is in response to your comment. Webapps are not purely client-side applications. They fit into the client-server paradigm. You can try using a synchronous post, but this has the side-effect of tying up the browser until the server responds (this is due to the fact that Javascript is single-threaded).

That being said, the response from the server should be pretty quick unless your network is slow or if whatever post your sending to the server results in some computationally-intensive operation.

Going by the placeholder route will (as you have realized) result in all sorts of new problems that you have to deal with. You have to ensure that they are unique. Now what if they perform some operation on the client-side element before the server responds with an id? The server won't know what the placeholder id means. There are ways around this (queuing requests is one way), but it will make your code a whole lot more complicated. I don't think the tradeoff is worth it just to make the UI update faster.

An option is to provide some visual feedback to the user that the app is "working" (i.e., while you are waiting for a response from the server). A spinner, for example.

As far as stacking the AJAX requests, that is one approach that you can take using the jQuery message-queuing plugin.