zoukankan      html  css  js  c++  java
  • 封装一个自己的 Ajax小框架

    框架代码如下:

    // 使用封装方法的人只关心提供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>
  • 相关阅读:
    欢天喜地七仙女——Alpha冲刺(11.30)第六天
    欢天喜地七仙女——Alpha冲刺(11.29)第五天
    欢天喜地七仙女——Alpha冲刺(11.28)第四天
    欢天喜地七仙女——Alpha冲刺(11.27)第三天
    欢天喜地七仙女——Alpha冲刺(11.26)第二次
    欢天喜地七仙女——Alpha冲刺(11.25)第一天
    fist-总结随笔
    fist-第十天随笔
    fist-第九天冲刺随笔
    fist-第八天冲刺随笔
  • 原文地址:https://www.cnblogs.com/xgao/p/4156045.html
Copyright © 2011-2022 走看看