當任何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/