基于JavaScript封装的Ajax工具类

前段是件由于工作需要无奈编写了一个给予JavaScript封装的工具类,技术有限,误喷,感谢大家的支持。

1、以下是JavaScript 的 Ajax 工具类。

function createXMLHttpRequest(){
    var req;
    if(window.XMLHttpRequest){
        //兼容非IE  并且兼容 IE7以上的浏览器
        req = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        //在 Internet Explorer 5.5 及其后版本中可用
        try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            //在 Internet Explorer 6 中可用
            req = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    
    return req;
}

/*
参数介绍:
method:提交方式(get,post)
url:请求的路径
param:需要传递的参数
async:是否一步
type:返回值类型(xml,json,默认字符串)
fn200:是一个function 处理请求成功后的的事情
fn404:是一个function 处理请求失败报404错误
fn500:是一个function 处理请求失败报500错误
*/
function sendAjaxReq(method,url,param,async,type,fn200,fn404,fn500,loading){
    var req = createXMLHttpRequest();
    //2.定义处理响应
    req.onreadystatechange = function (){
        if(req.readyState == 4){
            if(req.status == 200){
                if(fn200){
                    var result;
                    if(null != type && 'xml' == type.toLowerCase()){
                        result = req.responseXML;
                    }else if(null != type && 'json' == type.toLowerCase()){
                        jsonStr = req.responseText;
                        if(document.all){
                            result = eval('(' + jsonStr + ')');
                        }else{
                            result = JSON.parse(jsonStr);
                        }
                    }else{
                        result = req.responseText;
                    }
                    fn200(result);
                    
                }
            }else if(req.status == 404){
                if(fn404){
                    fn404(); 
                }
            }else if(req.status == 500){
                if(fn500){
                    fn500();
                }
            }
        }else{
            if(loading){
                loading();
            }
        }
    };
    if('get' == method.toLowerCase()){
        req.open(method, url + (param == null ? '' : '?'+param), async);
        req.send(null);
    }else if('post' == method.toLowerCase()){
        //1.定义发送请求  请求的方式   请求的地址    是否异步;
        req.open(method, url, async);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        req.send(param);
    }
  
}

 

2.调用方式:

function test(){
     var url = "test?date=" + new Date();
     sendAjaxReq("get",url,null,true,'json',function(result){
         //此处是请求成功后回调方法,可做请求成功后的处理,result是后台返回的参数
     },function (){
     //此处可以跳转一个404页面
   },function (){
     //此处是处理500错误
   },function (){
     //处理其他问题
   });
}

 

posted @ 2017-09-13 20:30  Faith_zhang  阅读(663)  评论(0编辑  收藏  举报