保留JQuery ajax函数的上下文

时间:2012-09-18 14:42:40

标签: ajax jquery xmlhttprequest closures

我有一个旧代码依赖于使用以下ajax调用的JQuery 1.3.2

function ChangeContent(url, somepageobject) {
   var xhrobj = $.ajax({
       url: url,
       context: somepageobject,
       callback: doFurtherStuff,
       success: function(data) {
                somepageobject.html($(data));
                this.callback.call(this.context[0], data, "ok"); // >> Code breaks here
           }
  });
  return xhrobj;
 }

上面的代码问题是当我升级到JQuery 1.8.1时this.callback为null,最重要的是ChangeContent函数在不同的地方使用并且在我的控制之外(它用作外部用户的API) ...等等)。以上用法的一个例子如下:

xhr_object = ChangeContent("/someurl, $("#resultContainer"));

function doFurtherStuff(responseText, statusText, XMLHttpRequest) 
{
   var identifier = '#' + this.id;
   ...
}

请注意,doFurtherStuff必须具有正确的“this”对象值,该值是ChangeContent函数中指定的上下文。当我尝试使用不同的延迟then()...等。在升级后,JQuery 1.8.1中的函数解决了上面的this.callback.call(this.context[0], data);问题,回调函数中的“this”对象具有不同的值,因为我猜新的JQuery库处理的方式不同。

是否有任何方法修复上述错误,同时限制对ChangeContent函数的更改只是因为我试图避免要求所有用户改变他们调用的方式并处理来自该函数的回调?

1 个答案:

答案 0 :(得分:1)

当您添加上下文选项时,您告诉jQuery成功回调中应该包含this。这意味着您无法访问传递给ajax请求的选项。要么不提供context,要么手动传递回调。

function ChangeContent(url, somepageobject) {
   var callback = doFurtherStuff;
   var xhrobj = $.ajax({
       url: url,
       context: somepageobject,
       success: function(data) {
                somepageobject.html($(data));
                callback.call(this[0], data, "ok"); // >> Code breaks here
           }
  });
  return xhrobj;
}

更新: 如果您想继续按原样继续使用代码,只需重命名上下文属性。

function ChangeContent(url, somepageobject) {
   var xhrobj = $.ajax({
       url: url,
       thecontext: somepageobject,
       callback: doFurtherStuff,
       success: function(data) {
                somepageobject.html($(data));
                this.callback.call(this.thecontext[0], data, "ok"); // >> Code breaks here
           }
  });
  return xhrobj;
}