javascript:处理客户端发起的服务器尚未分配id的对象

时间:2011-04-06 18:27:43

标签: javascript ajax

我正在开发一个javascript应用程序,我正在努力使服务器端同步尽可能自动化和不引人注目

我面临的问题是,在创建对象客户端时,我可以立即发送create ajax请求,而我正在等待它返回,在必要时将对象添加到ui

然而,由于在服务器响应之前对象没有id,因此在服务器响应并更新其id之前,我无法对其执行任何更新或销毁操作

处理这个问题的最佳方法是什么?

一些代码如果有帮助:

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',
        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();

1 个答案:

答案 0 :(得分:0)

这不是一个真正的问题。 AJAX本质上是异步的(异步 Javascript和XML)。您必须等到服务器得到响应才能更新您的UI。

如果您必须立即更新UI,您可以创建一个带占位符ID的元素,然后在服务器响应后,您可以使用实际ID更新。

<强>更新

这是对你的评论的回应。 Web应用程序不仅仅是客户端应用程序。它们适合客户端 - 服务器范例。您可以尝试使用同步帖子,但这会产生副作用,即在服务器响应之前将浏览器占用(这是因为Javascript是单线程的)。

话虽这么说,服务器的响应应该非常快,除非您的网络速度很慢或者发送到服务器的任何帖子导致一些计算密集型操作。

通过占位符路线(如您所知)将导致您必须处理的各种新问题。你必须确保它们是独一无二的。现在如果他们在服务器响应id之前在客户端元素上执行某些操作呢?服务器将不知道占位符ID的含义。有很多方法(排队请求是一种方式),但它会使你的代码变得更加复杂。我不认为权衡它只是为了让UI更新更快。

一个选项是向用户提供应用程序“正常工作”的一些视觉反馈(即,当您等待服务器的响应时)。例如,旋转器。

就堆叠AJAX请求而言,这是您可以使用jQuery message-queuing插件采取的一种方法。