自己封装的一个Ajax小框架

春雨的雕刻时光 2020-02-13

在经历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:

/**
* frameAjax 
* 
* 参数:
* paramsObj: Json
* required params:
* type:请求参数类型(String)
* url:请求地址(String)
* data:请求参数(Json),data可为空值。
* success:请求回调(Function)
* async:表示请求是否异步处理。默认为true,表示异步,可省略不写。
* 
*/

(function () {
    function frameAjax(paramsObj) {
        //处理请求参数
        var arr = [];
        for (var pro in paramsObj.data) {
            arr.push(pro + ‘=‘ + paramsObj.data[pro]);
        }
        var data = arr.join("&");  //用“&”拼接请求参数
        var async = true; //默认异步
        if (paramsObj.async) {  //判断是否异步处理
            async = paramsObj.async;
        }

        //创建Ajax引擎对象
        var ajax = getAjax();
        //复写onreadystatement函数
        ajax.onreadystatechange = function () {
            //判断Ajax状态码
            if (ajax.readyState == 4) {
                //判断响应状态码
                if (ajax.status == 200) {
                    if (paramsObj.success) {
                        paramsObj.success(ajax);
                    }
                } else if (ajax.status == 404) {
                    console.error("请求资源不存在");
                } else if (ajax.status == 500) {
                    console.error("服务器繁忙");
                }
            }
        }

        //发送请求
        if (paramsObj.type.toLowerCase() == "get") {
            ajax.open("get", paramsObj.url + (data == null ? "" : "?" + data), async);
            ajax.send(null);
        } else if (paramsObj.type.toLowerCase() == "post") {
            ajax.open("post", paramsObj.url, async);
            ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            ajax.send(data);
        } else {
            console.log("请求类型错误");
        }
    }

    //获取请求对象
    function getAjax() {
        var ajax;
        if (window.XMLHttpRequest) { //火狐
            ajax = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        return ajax;
    }
    //将框架封装于window对象中
    window.frameAjax = frameAjax;
}())

相关推荐

mmywcoco / 0评论 2020-06-06