在经历了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;
}())

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/7463