工作了也两年了,因为认真研读过 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这种方式。