发布一个简单小巧的ajax操作类

本文介绍了一个简单的Ajax操作类,适用于小型项目。它封装了XMLHTTP请求,支持GET和POST方法,并提供错误处理机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

看到 自编一个精致的Ajax框架(带例子) ,也想发布一个自己整理的东东。不过,看了前一句里提到的那篇文章下面的某些评论,还是有点害怕。所以,必须要申明的是,这是笔者参考网络资源整理出来的简单有效的ajax操作类(所谓“框架”这种吓死人不偿命的称呼就免了),对于规模不是太大,不想引用第三方ajax库,ajax操作要求不是太高太频繁的小项目,下面这个东东足够满足需求了。
ContractedBlock.gif ExpandedBlockStart.gif Code
//封装XMLHTTP的MyAjaxObj类的代码
var MyAjaxObj = new Object();

MyAjaxObj.reqList = []; 

//创建一个XMLHTTP对象,兼容不同的浏览器
function getXmlHttp() {
    
var xmlHttp = false;
    
var arrSignatures = ["MSXML2.XMLHTTP.5.0""MSXML2.XMLHTTP.4.0",
                         
"MSXML2.XMLHTTP.3.0""MSXML2.XMLHTTP",
                         
"Microsoft.XMLHTTP"];
    
for (var i = 0; i < arrSignatures.length; i++) {
        
try {
            xmlHttp 
= new ActiveXObject(arrSignatures[i]);
            
return xmlHttp;
        }
        
catch (oError) {
            xmlHttp 
= false//ignore
        }
    }
    
// throw new Error("MSXML is not installed on your system."); 
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp 
= new XMLHttpRequest();
    }
    
return xmlHttp;
}

/*封装XMLHTTP向服务器发送请求的操作
url:向服务器请求的路径;method:请求的方法,即是get/post;***callback:当服务器成功返回结果时,调用的函数(类似c#回调函数)***
data:向服务器请求时附带的数据;urlencoded:url是否编码;cached:是否使用缓存; callBackError;当服务器返回错误时调用的函数 
*/
MyAjaxObj.send 
= function(url, method, callback, data, urlencoded, cached, callBackError) {
    
var req = getXmlHttp();  //得到一个XMLHTTP的实例

    
//当XMLHTTP的请求状态发生改变时调用 (核心处理函数)
    req.onreadystatechange = function() {
        
// 当请求已经加载

        
if (req.readyState == 4) {
            
// 当请求返回成功
            if (req.status == 200) { //或者 req.status < 400
                // 当定义了成功回调函数时,执行成功回调函数
                if (callback)
                    callback(req, data);
            }
            
// 当请求返回错误

            
else {
                
//当定义了失败回调函数时,执行失败回调函数
                if (callBackError)
                    callBackError(req, data);
            }

            
//删除XMLHTTP,释放资源
            try {
                
delete req;
                req 
= null;
            } 
catch (e) { }
        }
    }

    
//如果以POST方式回发服务器
    if (method.toUpperCase() == "POST") {
        req.open(
"POST", url, true);
        
//请求是否需要缓存(只有在req.open之后才可以设置此项)
        if (cached)
            req.setRequestHeader(
"If-Modified-Since""0");
        
//请求需要编码
        if (urlencoded)
            req.setRequestHeader(
'Content-Type''application/x-www-form-urlencoded');
        req.send(data);
        MyAjaxObj.reqList.push(req);
    }
    
//以GET方式请求
    else {
        req.open(
"GET", url, true);
        
//请求是否需要缓存
        if (cached)
            req.setRequestHeader(
"If-Modified-Since""0");
        req.send(
null);
        MyAjaxObj.reqList.push(req);
    }
    
return req;
}

//全部清除XMLHTTP数组元素,释放资源
MyAjaxObj.clearReqList = function() {
    
var len = MyAjaxObj.reqList.length;
    
for (var i = 0; i < len; i++) {
        
var req = MyAjaxObj.reqList[i];
        
if (req) {
            
try {
                
delete req;
            } 
catch (e) { }
        }
    }
    MyAjaxObj.reqList 
= [];
}

//进一步封装XMLHTTP以POST方式发送请求时的代码
//
isClear:是否清除XMLHTTP数组的所有元素;其他参数的意义见 MyAjaxObj.send
MyAjaxObj.sendPost = function(url, data, callback, isClear, isCached, callBackError) {
    
if (isClear) {
        MyAjaxObj.clearReqList();
    }
    MyAjaxObj.send(url, 
"POST", callback, data, true, isCached, callBackError); //post方法需要编码
}
//进一步封装XMLHTTP以GET方式发送请求时的代码
MyAjaxObj.sendGet = function(url, args, callback, isClear, isCached, callBackError) {
    
if (isClear)
        MyAjaxObj.clearReqList();
    
return MyAjaxObj.send(url, "GET", callback, args, false, isCached, callBackError);
}
调用方式举例:
我的一篇旧文“ ajax:简单搜索实践篇”里实现了googlesuggest效果,可以把代码改造成下面的调用方式,具体细节不再赘述了。
/*调用方式举例(GoogleSuggest效果):
        MyAjaxObj.sendPost("AjaxOperations.aspx", null, googleSuggestCallBack, true,true, googleSuggestCallBackError);
   或者 MyAjaxObj.sendGet("AjaxOperations.aspx", null, googleSuggestCallBack, false,true, googleSuggestCallBackError);
*/
注意:
post方式通常需要编码,get不需要;
倒数第二个参数代表缓存,设置为false,可以“ 解决ajax调用中ie的缓存问题”;
网上有创建XmlHttpRequest池的改进方式,这里没有考虑一次创建多个XmlHttpRequest的情况(实际用的也不多);
对于熟练使用第三方ajax库(如微软自带的ajax框架集,jquery等)的读者,还是推荐使用成熟的ajax库。
再次重申,本人在博客园的所有技术博客除非已经标注“原创”二字,否则都是在参考他人的成果基础上整理加工而成。可能你已经看过笔者的其他博客,所以你觉得有gjm的嫌疑,千万别怀疑你的感觉。很不hd地说,对于抄书和剽窃,一直以来我都是深以为耻的。从我写技术博客的那天起,我就在等待完全是自己的原创问世。但是技术能力实在有限,原谅我无奈地借鉴他人的成果,以后我一定会加上原文出处的,但是该借鉴的继续借鉴,该学习的继续学习,哪有空装13搞什么原创呢, 莫装13,原创真的很难啊。
最后,欢迎拍砖。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值