Monitorar qualquer evento ajax

[willwalker 2]

Alguém pode me ajudar a criar um script que verifica as chamadas ajax de qualquer framework como JQuery?

 

Estou tentando monitorar as chamadas javascript para que eu identifique a chamada em um certo elemento, e assim chame uma função.

 

Estou pesquisando na internet, mas eu não sei o que pode estar de errado. Segue um exemplo que tentei usar:

var s_ajaxListener = new Object();

// Added for IE support
if(typeof XMLHttpRequest === "undefined") {
	XMLHttpRequest = function () {
		try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
		catch (e) {}
		try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
		catch (e) {}
		try { return new ActiveXObject("Microsoft.XMLHTTP"); }
		catch (e) {}
		throw new Error("This browser does not support XMLHttpRequest.");
	};
}

s_ajaxListener.tempOpen = XMLHttpRequest.prototype.open;
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.open = function(a,b) {
	if(!a) var a = '';
	if(!b) var b = '';
	
	s_ajaxListener.tempOpen.apply(this, arguments);
	s_ajaxListener.method = a;
	s_ajaxListener.url = b;

	if(a.toLowerCase() == 'get') {
		s_ajaxListener.data = b.split('?');
		s_ajaxListener.data = s_ajaxListener.data[1];
	}
}

XMLHttpRequest.prototype.send = function(a,b) {
	if(!a) var a = '';
	if(!b) var b = '';
	
	s_ajaxListener.tempSend.apply(this, arguments);
	
	if(s_ajaxListener.method.toLowerCase() == 'post') s_ajaxListener.data = a;
	
	s_ajaxListener.callback();
}

s_ajaxListener.callback = function () {
	//Aqui é a chamada
}

[FreitasMT 29]

Se o que você quer é realmente escutar todas as chamadas ajax que estão acontecendo na página até onde eu sei isso só é possivel por meio de uma extensão no browser e muda de navegador para navegador.

[willwalker 2]

Eu consegui solucionar esse problema, de outra maneira, verificando mudanças no HTML, segue:

(function (window) {
	var last = +new Date();
	var delay = 100; // default delay

	// Manage event queue
	var stack = [];

	function callback() {
		var now = +new Date();
		if (now - last > delay) {
			for (var i = 0; i < stack.length; i++) {
				stack[i]();
			}
			last = now;
		}
	}

	// Public interface
	var onDomChange = function (fn, newdelay) {
		if (newdelay) delay = newdelay;
		stack.push(fn);
	};

	// Naive approach for compatibility
	function naive() {

		var last = document.getElementsByTagName('*');
		var lastlen = last.length;
		var timer = setTimeout(function check() {

			// get current state of the document
			var current = document.getElementsByTagName('*');
			var len = current.length;

			// if the length is different
			// it's fairly obvious
			if (len != lastlen) {
				// just make sure the loop finishes early
				last = [];
			}

			// go check every element in order
			for (var i = 0; i < len; i++) {
				if (current[i] !== last[i]) {
					callback();
					last = current;
					lastlen = len;
					break;
				}
			}

			// over, and over, and over again
			setTimeout(check, delay);

		}, delay);
	}

	//
	//  Check for mutation events support
	//

	var support = {};

	var el = document.documentElement;
	var remain = 3;

	// callback for the tests
	function decide() {
		if (support.DOMNodeInserted) {
			window.addEventListener("DOMContentLoaded", function () {
				if (support.DOMSubtreeModified) { // for FF 3+, Chrome
					el.addEventListener('DOMSubtreeModified', callback, false);
				} else { // for FF 2, Safari, Opera 9.6+
					el.addEventListener('DOMNodeInserted', callback, false);
					el.addEventListener('DOMNodeRemoved', callback, false);
				}
			}, false);
		} else if (document.onpropertychange) { // for IE 5.5+
			document.onpropertychange = callback;
		} else { // fallback
			naive();
		}
	}

	// checks a particular event
	function test(event) {
		el.addEventListener(event, function fn() {
			support[event] = true;
			el.removeEventListener(event, fn, false);
			if (--remain === 0) decide();
		}, false);
	}

	// attach test events
	if (window.addEventListener) {
		test('DOMSubtreeModified');
		test('DOMNodeInserted');
		test('DOMNodeRemoved');
	} else {
		decide();
	}

	// do the dummy test
	var dummy = document.createElement("div");
	el.appendChild(dummy);
	el.removeChild(dummy);

	// expose
	window.onDomChange = onDomChange;
})(window);

E para executar somente usar:

onDomChange(function() { 
	console.log("Evento ajax chamado.");
});

[ExtremsX 58]

Eu já fiz isso com jquery assim:

                $(document).ajaxComplete(function(event, xhr, settings) {
                    if (xhr.status == 200) {
                        console.log('ok');
                    }
                });

[willwalker 2]

Então, mas o Jquery só monitora ações Jquery, eu também tinha tentado. Então esse em Javascript monitora as mudanças no dom, que era o que eu precisava.

[ExtremsX 58]

Eu já tinha visto isso, só toma cuidado pois isso não funciona em todos os navegadores que eu me lembre

[willwalker 2]

Ah sim, obrigado! Mas era um plugin para Chrome que estava desenvolvendo, então só precisaria que funcionasse no Chrome mesmo =D