删繁就简之Ajax代码封装

来源：互联网发布：杭州数据资源管理局编辑：程序博客网时间：2024/06/07 05:36

使用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, url, 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", "", callback, 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的宗旨一样：写的更少，做的更多。

0 0