删繁就简之Ajax代码封装

使用ajax每次和服务器端进行异步操作时都要创建一个XmlHttpRequest对象实例，考虑跨域问题的处理等等。这样重复性的操作不但会加大工作量还会造成代码冗余，影响系统运行速度。基于面向对象的思想，我们可以将公共性的部分提取出来进行封装，在需要的地方直接调用即可，这样一来不但减少了工作量还提高了系统的性能。

下面是关于ajax中公共方法封装的AJAX.js文件

<span style="font-size:18px;">//创建XMLHttpRequest对象实例
var myXmlhttp = function () {
    //初始化xmlhttp
    xmlhttp = null;
    //创建XMLHttpRequest对象
    if (window.XMLHttpRequest) {
        //IE7，IE8，FireFox,Mozilla,Opera...
        xmlhttp = new XMLHttpRequest();
        //alert(xmlhttp);
    }
    else if (window.ActiveXObject) {
        //IE6,IE5...
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        //alert(xmlhttp);
    }
    if (xmlhttp == undefined || xmlhttp == null) {
        alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
    }
}

//用户发送请求的方法封装
//定义方法send,对传入的method，url和回调函数callback的参数进行判断
myXmlhttp.prototype.send = function (method,url,data,callback,failback) {
    //浏览器支持XMLHttpRequest对象
    if (this.xmlhttp != undefined && this.xmlhttp != null) {
        //将传入的方法名称转换为大写格式
        method = method.toUperCase();
        if (method != "GET" && method != "POST") {
            alert("HTTP的请求方法必须是GET或POST");
            return;
        }
        if (url == null || url == undefined) {
            alert("HTTP的请求地址必须设置");
            return;
        }
        var tempxmlhttp = this.xmlhttp;
        tempxmlhttp.onreadystatechange = function () {
            if (tempxmlhttp.readyState == 4) {//接收数据完成
                if (tempxmlhttp.status == 200) {//正确返回数据
                    //服务器响应的文本内容
                    var responseText = tempxmlhttp.responseText;
                    //服务器响应的XML内容对应的DOM对象
                    var responseXML = tempxmlhttp.responseXML;
                    if (callback == undefined || callback == null) {
                        alert("没有设置处理数据正确返回后的方法");
                        alert("返回的数据：" + responseText);
                    }
                    else {
                        callback(responseText,responseXML);
                    }
                } else {
                    if (failback == undefined || failback == null) {
                        alert("没有设置处理数据返回失败的处理方法！");
                        alert("HTTP的响应码：" + tempxmlhttp.status + "响应码的文本信息：" + tempxmlhttp.statusText);
                    } 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,true);
        //如果是POST方法，需要设置请求头
        if (method == "POST") {
            this.xmlhttp.setRequestHeader("Content-Type","application/x-www.form-urlencoded");
        }
        this.xmlhttp.send(data);
    } else {
        alert("XMLHttpRequest对象创建失败，无法发送数据！");
    }
}
//HTTP放弃请求方法的封装
myXmlhttp.prototype.abort = function () {
    this.xmlhttp.abort();
}</span>

对封装方法的调用

<span style="font-size:18px;">@{
    ViewBag.Title = "panel";
}
<script src="../../Scripts/mytest/AJAX.js"></script>
<!document html>
<script>
    function test() {
        //利用XMLHttpRequest对象和服务器端进行交互
        //调用封装好的方法
        var xmlhttptest = new myXmlhttp();
        xmlhttptest.send("GET","TEST","",failback);
    }
    function callback(responseText,responseXML) {
        //对回调函数的定义
    }
    function failback(status,statusText) {
        //对返回数据失败后的处理
    }
</script>
<html>
    <head>
        <link href="../../Css/easyui.css" rel="stylesheet" />
        <link href="../../Css/icon.css" rel="stylesheet" />
    </head>
</html></span>

这种抽象的思想我们每天都在用，一劳永逸。就像JQuery的宗旨一样：写的更少，做的更多。

原文链接：https://www.f2er.com/ajax/163736.html

删繁就简之Ajax代码封装

猜你在找的Ajax相关文章