工作了也两年了,因为认真研读过 professional javascript for web developers 一书的翻译版,一直自以为自己js水平可以,因此工作中对于很多的js框架很不感冒,尽管也研究过这些框架,也认为确实很强大。自己工作中的遇到的就弄个自己的简单的实现,这个ajax的封装也主要代码是来自 professional javascript for web developers ,只是做了一些处理,对于应付自己工作的需求已是足够了。
首先,先展示一下怎样调用
//定义回调函数 function handleresponse(XMLHTTP) { if (XMLHTTP.readyState == 4) { var response = XMLHTTP.responseText; // 这里写自己的处理程序 } } } function checktext(obj) { var url = "../Ashx/test.ashx"; customAjax("get",url,["title"],[obj.value],handleresponse); }
说明一下,customAjax就是封装的对外提供的调用方法,第一参数是提交数据的方式,get或者post;第二个是提交的地址;第三个和第四个是数组,是要提交数据,第一个数组装键,后一个装值,必须相对应;最后一个就是回调函数了,自己定义。
调用还不算太麻烦,可能看来不太面向对象而已,不太习惯。
下面上代码:
// 创建xmlhttp对象 function CreateXMLHTTP() { var XMLHTTP; if(window.ActiveXObject) { var arrSignature = ["MSXML2.XMLHTTP.6.0",“MSXML2.XMLHTTP.5.0",”MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsot.XMLHTTP"]; for(var i=0;i<arrSignature.length;i++) { try { XMLHTTP = new ActiveXObject(arrSignature[i]); return XMLHTTP; } catch(oException) { } } throw new Error("MSXML is not installed on your IE."); } else if(window.XMLHttpRequest) { XMLHTTP = new XMLHttpRequest(); return XMLHTTP; } } function addGETParam(sUrl,sParamName,sParamValue) { sUrl += ( sUrl.indexOf("?") == -1 ? "?" : "&"); sUrl += escape(sParamName) + "=" + escape(sParamValue); return sUrl; } function addPOSTParam(sParams,sParamName,sParamValue) { sParams += ( sParams.length > 0 ? "&" : "" ); sParams += escape(sParamName) + "=" + escape(sParamValue); return sParams; } // 主要的方法 function customAjax(sType,sUrl,arrParamName,arrParamValue,funStateChange) { var XMLHTTP = CreateXMLHTTP(); var sParams = ""; if( arrParamName instanceof Array && arrParamValue instanceof Array) { if(arrParamName.length == arrParamValue.length) { if(sType.toLowerCase() == "get") { sParams = null; for(var i=0;i<arrParamName.length;i++) sUrl = addGETParam(sUrl,arrParamName[i],arrParamValue[i]); } else if(sType.toLowerCase() == "post") { for(var i=0;i<arrParamName.length;i++) sParams = addPOSTParam(sParams,arrParamName[i],arrParamValue[i]); } } else { throw new Error("Two parma Array's length is not same."); } } else { throw new Error("The third and fourth param must be Array."); } XMLHTTP.open(sType.toUpperCase(),sUrl,true); if(funStateChange instanceof Function) { XMLHTTP.onreadystatechange = function(){funStateChange(XMLHTTP);} } else { throw new Error("the last param must be Function."); } XMLHTTP.send(sParams); }
就是这么多,还不少,有一点要说是
["MSXML2.XMLHTTP.6.0",“MSXML2.XMLHTTP.5.0",”MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsot.XMLHTTP"]
在支持ie标准的浏览器上,有的电脑有可能会弹出让你加载MSXML2.XMLHTTP.6.0的提示,因为你的浏览器可能没有加载这个控件;如果你对自己的网站在用户电脑上这个提示不能容忍,那就把这个版本的检测从这个数组中删除,一般情况下,删除到4.0时,IE浏览器就不会有加载的提示了。如果你还不放心,仍可以继续删除到只剩下Microsot.XMLHTTP,其中jquery-1.3.2就是这样,以下是这个版本的jquery代码:
xhr:function(){ return window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); },
当然你如果嫌上面的创建过程太烦琐,也可以采用jquery这种方式。