爲頁面上的所有AJAX請求添加一個「鉤子」

Question

我想知道是否有可能「鉤住」每一個AJAX請求（無論是因爲它將要發送，還是事件）並執行一個操作。在這一點上，我假設頁面上還有其他第三方腳本。其中一些可能會使用jQuery，而另一些則不會。這可能嗎？

Answer 1

受aviv's answer的啓發，我做了一些調查，這就是我想出來的。
根據腳本中的註釋，我不確定它是否有用，當然只適用於使用本機XMLHttpRequest對象的瀏覽器。
我認爲它會工作，如果JavaScript庫正在使用，因爲他們將盡可能使用本機對象。

function addXMLRequestCallback(callback){ 
    var oldSend, i; 
    if(XMLHttpRequest.callbacks) { 
     // we've already overridden send() so just add the callback 
     XMLHttpRequest.callbacks.push(callback); 
    } else { 
     // create a callback queue 
     XMLHttpRequest.callbacks = [callback]; 
     // store the native send() 
     oldSend = XMLHttpRequest.prototype.send; 
     // override the native send() 
     XMLHttpRequest.prototype.send = function(){ 
      // process the callback queue 
      // the xhr instance is passed into each callback but seems pretty useless 
      // you can't tell what its destination is or call abort() without an error 
      // so only really good for logging that a request has happened 
      // I could be wrong, I hope so... 
      // EDIT: I suppose you could override the onreadystatechange handler though 
      for(i = 0; i < XMLHttpRequest.callbacks.length; i++) { 
       XMLHttpRequest.callbacks[i](this); 
      } 
      // call the native send() 
      oldSend.apply(this, arguments); 
     } 
    } 
} 

// e.g. 
addXMLRequestCallback(function(xhr) { 
    console.log(xhr.responseText); // (an empty string) 
}); 
addXMLRequestCallback(function(xhr) { 
    console.dir(xhr); // have a look if there is anything useful here 
}); 

Answer 2

有一個技巧來做到這一點。

在所有腳本運行之前，取原始的XHMHttpReuqest對象並將其保存在不同的var中。然後覆蓋原始的XMLHttpRequest並通過您自己的對象將所有調用指向它。

的僞代碼：

var savd = XMLHttpRequest; 
XMLHttpRequest.prototype = function() { 
     this.init = function() { 
     }; // your code 
     etc' etc' 
}; 

Answer 3

既然你提到的jQuery，我知道jQuery提供一個.ajaxSetup()方法，設置全局AJAX選項，其中包括事件觸發像success，error，並beforeSend - 這是什麼聽起來像什麼你正在尋找。

$.ajaxSetup({ 
    beforeSend: function() { 
     //do stuff before request fires 
    } 
}); 

當然，您需要在任何嘗試使用此解決方案的頁面上驗證jQuery可用性。

Answer 4

除了meouw的回答，我不得不將代碼注入攔截XHR調用的iframe，並使用了上面的答案。但是，我不得不改變

XMLHttpRequest.prototype.send = function(){ 

要：

XMLHttpRequest.prototype.send = function(arguments) 

我不得不改變

oldSend.apply(this, arguments); 

要：

oldSend.call(this, arguments); 

這是必須得到它的工作在IE9中用IE8文件m ode。如果未進行此修改，則組件框架（Visual WebGUI）生成的一些回調無效。在這些鏈接更多信息：

• Function.prototype.call
• Function.prototype.apply

沒有進行這些修改AJAX回傳並沒有終止。

Answer 5

jquery ...

<script> 
    $(document).ajaxSuccess(
     function(event, xhr, settings){ 
      alert(xhr.responseText); 
     } 
    ); 
</script> 

Answer 6

使用的「meouw」的答案，我建議使用下面的解決方案，如果你想看到的要求

function addXMLRequestCallback(callback) { 
    var oldSend, i; 
    if(XMLHttpRequest.callbacks) { 
     // we've already overridden send() so just add the callback 
     XMLHttpRequest.callbacks.push(callback); 
    } else { 
     // create a callback queue 
     XMLHttpRequest.callbacks = [callback]; 
     // store the native send() 
     oldSend = XMLHttpRequest.prototype.send; 
     // override the native send() 
     XMLHttpRequest.prototype.send = function() { 
      // call the native send() 
      oldSend.apply(this, arguments); 

      this.onreadystatechange = function (progress) { 
       for(i = 0; i < XMLHttpRequest.callbacks.length; i++) { 
        XMLHttpRequest.callbacks[i](progress); 
       } 
      };  
     } 
    } 
} 

addXMLRequestCallback(function(progress) { 
    if (typeof progress.srcElement.responseText != 'undefined' &&      progress.srcElement.responseText != '') { 
     console.log(progress.srcElement.responseText.length); 
    } 
}); 

Answer 7

結果。如果你沒有支持< = IE8可以做這將全面攔截任何 AJAX，並且不會阻塞任何可能由任何第三方AJAX庫分配的回調等。接受的答案不會產生實際的回答，因爲它太早被調用。

(function() { 
    var origOpen = XMLHttpRequest.prototype.open; 
    XMLHttpRequest.prototype.open = function() { 
     console.log('request started!'); 
     this.addEventListener('load', function() { 
      console.log('request completed!'); 
      console.log(this.readyState); //will always be 4 (ajax is completed successfully) 
      console.log(this.responseText); //whatever the response was 
     }); 
     origOpen.apply(this, arguments); 
    }; 
})(); 

，你可以在這裏做與API的addEventListener這裏有些什麼更多的文檔：

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

Answer 8

我已經找到了一個好的圖書館在Github上，做的工作做好，你必須包括之前，任何其他js文件

https://github.com/jpillora/xhook

這裏要說的是增加了一個HTTP標頭的任何一個例子INCOM荷蘭國際集團響應

xhook.after(function(request, response) { 
    response.headers['Foo'] = 'Bar'; 
}); 

Answer 9

Ajax-hook是開源LIB鉤全球XMLHttpRequest對象，並更改默認Ajax請求和響應。 github上：https://github.com/wendux/Ajax-hook，例如：

hookAjax({ 

    //hook callbacks 
    onreadystatechange:function(xhr){ 
    console.log("onreadystatechange called: %O",xhr) 
    }, 

    onload:function(xhr){ 
    console.log("onload called: %O",xhr) 
    }, 

    //hook function 
    open:function(arg,xhr){ 
    console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2]) 
    } 

})