当任何Ajax请求完成时触发一个事件

Question

我期待从各个请求本身之外的所有ajax请求中收听onComplete事件。

我想在任何/所有ajax请求完成时触发一个事件。

这可能吗？

在此先感谢，蒂姆

编辑：要求mootools的仅LIB（V1.4）

Answer 1

这可能会非常棘手：

$(document).ajaxComplete(function() { 
    $(this).text('Triggered ajaxComplete handler.'); 
}); 

看看。代码很简单。我对单个请求原变化选择是从mootools的，更Class.refactor，如果有的话：

// enable log func... 
Class.refactor(Request, { 
    success: function(text, xml){ 
     this.previous(text, xml); 
     Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);    
    }, 
    failure: function(){ 
     this.previous(); 
     Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);    
    } 
}); 

和公共位 - 这是一样的，你去哪个方式。

// assign a logger function 
Request.monitor = function() { 
    console.log("onComplete", this.response.text); 
}; 

// call a simple request object. 
new Request({ 
    url: "/echo/html/", 
    method: "post", 
    data: { 
     html: "hello" 
    } 
}).send(); 

原因是：它将独立于mootools核心变化而工作。它不关心的功能代码功能是什么，它将原有的运行后我们并不会打破，除非有在未来

您也可以通过implement改变类，而不是一个巨大 API的变化，尽管这亿韩元” t说明了mootools-core的变化，但可能是这样。在实践中，这意味着，复制和粘贴方法目前FUNC并添加到它 - 幸运的是，我们要短方法国防部：

Request.implement({ 
    success: function(text, xml){ 
     this.onSuccess(this.processScripts(text), xml); 
     Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);    
    }, 
    failure: function(){ 
     this.onFailure(); 
     Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);    
    } 
}); 

最后，你甚至可以保存旧的低水平var oldsuccess = Request.prototype.success，做你的事它和oldsuccess.apply(this, arguments)它。

困难在于Request的子类如HTML和JSON - 如果已经定义好了，它们将复制旧的原型，并且您的记录器将会执行此操作。您可以改为将其作为一个小对象并将其实施到所有Request类中。

像这样优雅可以工作，但只有在成功的方法是在代码相同，否则 - 它会在子类中打破的东西：

(function() { 
    var changes = { 
     success: function(text, xml){ 
      this.onSuccess(this.processScripts(text), xml); 
      Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);    
     }, 
     failure: function(){ 
      this.onFailure(); 
      Request.monitor && typeof Request.monitor == "function" && Request.monitor.apply(this, arguments);    
     } 
    }; 

    [Request, Request.HTML, Request.JSON].invoke('implement', changes); 
})(); 

最后一个方法+原稿原的组合是什么你真的需要成功funcs不同所有3 ...

编辑这是越来越荒谬。像我说的，不是最简单的任务...

这可能是我在生产，测试和使用所有3个类的最终版本/重构。请记住所做的方法是在JSON或HTML进行额外解析之前完成的。它是低级别的日志记录。否则，请重构onSuccess和onFailure。

(function() { 
    // what we will extend 
    var classes = [Request, Request.HTML, Request.JSON], 
     // map to a text name 
     mapper = ["Request", "Request.HTML", "Request.JSON"], 
     // store reference to original methods 
     orig = { 
      onSuccess: Request.prototype.onSuccess, 
      onFailure: Request.prototype.onFailure 
     }, 
     // changes to protos to implement 
     changes = { 
      onSuccess: function(){ 
       Request.Spy && typeof Request.Spy == "function" && Request.Spy.apply(this, arguments); 
       orig.onSuccess.apply(this, arguments); 
      }, 
      onFailure: function(){ 
       Request.Spy && typeof Request.Spy == "function" && Request.Spy.apply(this, arguments); 
       orig.onFailure.apply(this, arguments); 
      } 
     }; 

    classes.invoke('implement', changes); 

    // allow us to tell which Class prototype has called the ajax 
    Request.implement({ 
     getClass: function() { 
      var ret; 
      Array.each(classes, function(klass, index) { 
       if (instanceOf(this, klass)) { 
        ret = mapper[index]; 
       } 
      }, this); 
      return ret; 
     } 
    }); 
})(); 

// to enable spying, just define Request.Spy as a function: 
Request.Spy = function() { 
    console.log(this.getClass(), arguments); 
}; 

// test it via normal Request 
new Request({ 
    url: "/echo/html/", 
    data: { 
     html: "normal data"  
    } 
}).send(); 


// test via HTML 
new Request.HTML({ 
    url: "/echo/html/", 
    data: { 
     html: "<p>normal data</p>"  
    } 
}).send(); 

// test via JSON 
new Request.JSON({ 
    url: "/echo/json/", 
    data: { 
     json: JSON.encode({'normal':'data'})  
    } 
}).send(); 

的jsfiddle：http://jsfiddle.net/dimitar/3rnKe/

Answer 2

编辑：解决方案适用于jQuery的。不是MooTools。如果你想只观察和拦截http://api.jquery.com/ajaxComplete/