封装一个自己的 Ajax小框架

Posted 2020-09-17 叶祖辉

框架代码如下：

// 使用封装方法的人只关心提供http的请求方法,url地址,数据,成功和失败的回调方法

// 类的构造定义,主要职责就是新建出 XMLHttpRequest 对象
var MyXMLHttpRequest = function () {
    var xmlhttprequest;
    if (window.XMLHttpRequest) {
        xmlhttprequest = new XMLHttpRequest();
        if (xmlhttprequest.overrideMimeType) {
            xmlhttprequest.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
        var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for (var i = 0; i < activeName.length; i++) {
            try {
                xmlhttprequest = new ActiveXObject(activeName[i]);
                break;
            } catch (e) {

            }
        }
    }
    if (xmlhttprequest == undefined || xmlhttprequest == null) {
        alert("XMLHttpRequest对象创建失败！");
    } else {
        this.xmlhttp = xmlhttprequest;
    }
}

//用户发送请求的方法
MyXMLHttpRequest.prototype.send = function (method, url, data, callback, failback) {

    if (this.xmlhttp != undefined && this.xmlhttp != null) {
        method = method.toUpperCase();
        if (method != "GET" && method != "POST") {
            alert("HTTP的请求方法必须是GET或POST");
            return;
        }
        if (url == null || url == undefined) {
            alert("HTTP的请求地址必须设置！");
            return;
        }
        var tempxmlhttp = this.xmlhttp;

        this.xmlhttp.onreadystatechange = function () {
            if (tempxmlhttp.readyState == 4) {
                if (tempxmlhttp.status == 200) {
                    var responseText = tempxmlhttp.responseText;
                    var responseXML = tempxmlhttp.responseXML;

                    if (callback == undefined || callback == null) {
                        alert("没有设置处理数据正确返回方法！");
                        alert("返回的数据:" + responseText)
                    } else {
                        callback(responseText, responseXML);
                    }
                } else {
                    if (failback == undefined || failback == null) {
                        alert("没有设置处理数据正确返回的方法！");
                    } else {
                        failback(tempxmlhttp.status, tempxmlhttp.statusText);
                    }
                }
            }
        }

        //解决缓存的转换
        if (url.indexOf("?") >= 0) {
            url = url + "&t=" + (new Date()).valueOf();
        } else {
            url = url + "?t=" + (new Date()).valueOf();
        }

        //解决跨域的问题
        if (url.indexOf("http://") >= 0) {
            url.replace("?", "&");
            url = "Proxy?url=" + url;
        }

        this.xmlhttp.open(method, url, true);

        //如果是POST方式,需要设置请求头
        if (method == "POST") {
            this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }

        //提交请求
        this.xmlhttp.send(data);
    } else {
        alert("XMLHttpRequest对象创建失败,无法发送数据！");
    }
}

//放弃AJAX请求
MyXMLHttpRequest.prototype.abort = function () {
    this.xmlhttp.abort();
}

调用方式如下：

1. 引用js
2. new 一个自定义的 XMLHttpRequest 对象
3. 使用里面的 send 方法进行数据提交
4. 构造 callback 回调处理函数,与 failback 失败的 回调函数

<script src="ajax.js" type="text/javascript"></script>
<script type="text/javascript">
        function ValidUser() {
            //获取客户端内容
            var userName = document.getElementById("UserName").value;
            //进行编码解决 中文乱码
            userName = encodeURI(encodeURI(userName));

            var xmlhttp = new MyXMLHttpRequest();
           
            xmlhttp.send("POST", "AjaxRequst.ashx", "name="+userName, callback, failback);
          //xmlhttp.send("GET", "AjaxRequst.ashx?name="+userName, "", callback, failback);
        }
        function callback(responseText, responseXML) {
            //纯文件数据的接受方法
            var message = responseText;

            //将返回的内容添加到DIV层里
            var div = document.getElementById(‘message‘);
            div.innerhtml = message;
        }
        function failback(status, statusText) {
            alert(status +"---"+ statusText);
        }
</script>