最近碰到一個很糾結的技術問題。

我們自己是個Grails，集成了另外一個web程式，我們把那個web程式放在我們提供的iframe裡。那個web程式只有在第一次初始化的時候是一個普通的HTTP請求，之後在頁面上的操作，都是通過ajax來操作的。現在我們有個需求，我們需要知道iframe裡面做了什麼操作。

沒法改別人的程式碼，那我們只能監測裡面的事件了，所以總歸來說，要找到一種方法來檢測到iframe裡面的所有ajax請求。

Javascript框架熟悉的就只有JQuery，所以第一個想到的是用JQuery，看看有沒有提供什麼方法。找到了，JQuery確實提供了監聽ajax的工具方法，如：

$("#msg").ajaxComplete(function(event,request, settings){
   $(this).append("<li>請求完成.</li>");
 });
 

再深入找資料，想知道這個方法的原理，發現，原來JQuery提供的監聽ajax的方法，只對本身就是用JQuery發出去的請求才有效。原理上也就簡單了，在JQuery自己的程式碼裡插入一些控制就實現了。

繼續查資料，終於在stackoverflow找到了答案：用來發送ajax的物件XMLHttpRequest本身自己就是一個javascript物件（IE6除外），javascript物件就一定有prototype屬性，有這個屬性，那我就可以改這個屬性的內容。

prototype屬性是什麼東西，我們這裡沒法詳細描述，簡單描述一下就是：我們可以用這個熟悉來修改物件，給物件新增/修改屬性或者方法

接下來就和javascript實現繼承一樣了，我們要做的就是合理的修改XMLHttpRequest的open，send子類的方法，嵌入我們自己的callback程式碼，即可實現對所有ajax請求的監聽。 

封裝stackoverflow上的程式碼，寫了一個工具類，程式碼如下：

function ajaxSend(objectOfXMLHttpRequest, callback) {
	// http://stackoverflow.com/questions/3596583/javascript-detect-an-ajax-event
	if(!callback){
		return;
	}
	
	var s_ajaxListener = new Object();
	s_ajaxListener.tempOpen = objectOfXMLHttpRequest.prototype.open;
	s_ajaxListener.tempSend = objectOfXMLHttpRequest.prototype.send;
	s_ajaxListener.callback = function () {
		// this.method :the ajax method used
		// this.url :the url of the requested script (including query string, if any) (urlencoded)
		// this.data :the data sent, if any ex: foo=bar&a=b (urlencoded)
		callback(this.method, this.url, this.data);
	}
	
	objectOfXMLHttpRequest.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];
		}
	}
	
	objectOfXMLHttpRequest.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();
	}
}
 

第一個引數是要監聽的頁面裡的XMLHttpRequest物件

第二個引數是一個回撥function，回撥funtion接收三個引數，分別是

        method :ajax請求的方法，Get，Post，Put之類
        url :請求的URL
        data :請求的資料

看回工具方法的實現，實現原理就是也簡單：

第一步：把XMLHttpRequest自身的open，send方法儲存起來，存在臨時變數裡

第二步：修改open方法，新的open方法先呼叫第一步存起來的XMLHttpRequest自身的open方法，然後把請求時的引數儲存到一些變數裡以備後面用

第三步：修改send方法，新的send方法先呼叫第一步存起來的XMLHttpRequest自身的send方法，然後呼叫callback方法，callback的引數就是在第二步存起來的那些open時候的引數

最後，對於我們自己來說，就是把上面的程式碼加到iframe上了，

第一步：寫一個callback，類似這樣：

function onAjaxSend(method, url, data) {
}

完工，不足的地方是不支援IE6，好在我們本身就不要對IE6提供支援，也就這樣過了

參考資料：http://stackoverflow.com/questions/3596583/javascript-detect-an-ajax-event

關鍵字：Javascript，ajax，監聽請求