一個AJAX串連池封裝

1、原始碼

 

這個AJAX串連池害我我弄了很久，終於，讓它相容IE6/7/8、FireFox、Opera、Google Chrome這四類瀏覽器了。

 

/**<br /> * AJAX 串連池<br /> * AJAXConnectionPool Build in 2009.7.10<br /> * @author CodingMouse<br /> * @version 1.0<br /> */<br />var AJAXConnectionPool = function() {</p><p>// 任務隊列<br />var taskQueue = [];<br />// 請求緩衝池<br />var requestBufferPool = [];<br />// 最大串連數<br />var maxThreadNumber = 2;</p><p>return {<br />/**<br /> * 擷取空閑請求<br /> * @return {空閑請求對象}<br /> */<br />getIdleRequest : function() {<br />var request = null;<br />for (var i = 0; i < maxThreadNumber; i++) {<br />if (requestBufferPool[i].readyState == 0) {<br />request = requestBufferPool[i];<br />break;<br />}<br />}<br />return request;<br />},<br />/**<br /> * 初始化<br /> * @param {最大串連數} max<br /> */<br />init : function(max) {<br />if (max != null)<br />maxThreadNumber = max;<br />for (var k = 0; k < maxThreadNumber; k++) {<br />var request = null;<br />if (window.XMLHttpRequest) { // 如果是 Google Chrome、 Mozilla Firefox、Netscape、Opera 8.0+、Safari、IE7+ 等瀏覽器<br />request = new XMLHttpRequest();<br />if (request.overrideMimeType) { // 設定 MiME 類別<br /> /*<br /> * 有些版本的瀏覽器在處理伺服器返回的未包含XML mime-type頭部<br /> * 資訊的內容時會報錯，因此，要確保返回的內容包含text/xml資訊。<br /> */<br /> request.overrideMimeType("text/xml");<br /> }<br />} else if (window.ActiveXObject) { // 如果是 Internet Explorer 6.0- 瀏覽器<br />var msXml = [<br /> "Msxml2.XMLHTTP.6.0",<br />"Msxml2.XMLHTTP.5.0",<br />"Msxml2.XMLHTTP.4.0",<br />"Msxml2.XMLHTTP.3.0",<br />"Msxml2.XMLHTTP",<br />"Microsoft.XMLHTTP"];<br />for(var i = 0; i < msXml.length; i++) {<br />try{<br />request = new ActiveXObject(msXml[i]);<br />break;<br />}catch(e) {<br />request = null;<br />}<br />}<br />if (request == null) {<br />alert("Sorry! Because you are using a browser that does not support AJAX, the server can not process a request submitted!");<br />return;<br />}<br />}<br />requestBufferPool.push(request);<br />}<br />},<br />/**<br /> * 擷取瀏覽器類型<br /> * @return {瀏覽器類型字串}<br /> */<br />getBrowserType : function() {</p><p>if (navigator.userAgent.indexOf("MSIE") > 0) {<br />return "MSIE"; // IE瀏覽器<br />} else if (navigator.userAgent.indexOf("Firefox") > 0) {<br />return "Firefox"; // Firefox瀏覽器<br />} else if (navigator.userAgent.indexOf("Safari") > 0) {<br />return "Safari"; // Safan瀏覽器<br />} else if (navigator.userAgent.indexOf("Camino") > 0) {<br />return "Camino"; // Camino瀏覽器<br />} else if (navigator.userAgent.indexOf("Gecko/") > 0) {<br />return "Gecko"; // Gecko瀏覽器<br />} else {<br />return "Unknown"; // 未知瀏覽器<br />}</p><p>},<br />/**<br /> * 發送請求<br /> *<br /> * @param {要求方法 post|get} method<br /> * @param {請求URL地址} url<br /> * @param {資料} data<br /> * @param {回呼函數} callback<br /> * @param {範圍} scope<br /> * @param {是否發送非同步請求，注意：Firefox瀏覽器的同步請求時不能執行回調方法 true|false} isAsync<br /> */<br />send : function(method, url, data, callback, scope, isAsync) {</p><p>// XML 回調控制代碼<br />var xmlCallbackHandler = function() {<br />if (request.readyState < 4) {<br />window.status = "Loading...";<br />} else if (request.readyState == 4) {<br />if (request.status == 200) {<br />window.status = "Finished.";<br />if (handler.func != null) {<br />handler.func.call(handler.scope != null<br />? handler.scope<br />: window, request.responseText,<br />request.responseXML, request.status);<br />}<br />request.abort();<br />if (taskQueue.length > 0) {<br />// 這裡有多個任務處於隊列中等待串連，首先執行第一個任務<br />var task = taskQueue.shift();<br />AJAXConnectionPool.send(task.method, task.url, task.data,<br />task.callback, task.scope, isAsync);<br />}<br />} else if (request.status == 404) {<br />window.status = "Requested URL is not found.";<br />alert ("Requested URL is not found.");<br />} else if (request.status == 403) {<br />window.status = "Access denied.";<br /> alert("Access denied.");<br />} else {<br />window.status = "Requested status is " + request.status;<br />alert("Requested status is " + request.status);<br />}<br />} else {<br />(function() {<br />throw request.status;<br />}).call(handler.scope != null ? handler.scope : window);<br />}<br />};</p><p>// 擷取空閑請求<br />var request = AJAXConnectionPool.getIdleRequest();<br />// 這是一個空閑請求<br />if (request != null) {<br />var handler = {<br />func : callback,<br />scope : scope<br />};<br />if (method.toLowerCase() == "get") {<br />// 新增時間戳記以防止瀏覽器快取頁面面資料<br />url += ((url.indexOf("?") > 0 ? "&" : "?")<br />+ "timestamp="<br />+ new Date().getTime());<br />}<br />// 發送請求<br />request.open(method, url, isAsync);<br />request.setRequestHeader(<br />"Content-type",<br />(method.toLowerCase() == "post"<br />? "application/x-www-form-urlencoded;"<br />: "text/xml")<br />);<br />if (AJAXConnectionPool.getBrowserType() != "Firefox") {<br />request.onreadystatechange = xmlCallbackHandler;<br />}<br />request.send(data);<br />if (AJAXConnectionPool.getBrowserType() == "Firefox") {<br />// Early call mode：request.onreadystatechange = xmlCallbackHandler();<br />request.onreadystatechange = xmlCallbackHandler;<br />}<br />} else {<br />// 所有請求都繁忙的時候，則將任務納入等待隊列中<br />var task = {<br />method : method,<br />url : url,<br />data : data,<br />callback : callback,<br />scope : scope<br />};<br />taskQueue.push(task);<br />}<br />}<br />};<br />}();

 

2、使用方法

 

// 擷取空閑請求對象<br />var request = AJAXConnectionPool.getIdleRequest();</p><p>// 發送資料並通過非同步回調處理函數<br />AJAXConnectionPool.send(method, url, null, function() {<br />// 回呼函數處理邏輯<br />}, window, true);

 

By CodingMouse

2010.4.13