基于JavaScript封装的Ajax工具类

Posted 2020-10-06

前段是件由于工作需要无奈编写了一个给予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 (){
　　　　　//处理其他问题
　　　});
}