模仿jquery的ajax请求

╰+攻爆jí腚メ 2022-09-14 00:08 225阅读 0赞

### 模仿jquery的ajax请求 ###

*  核心js
 *  调用例子

# 核心js #

// XMLHttpRequest这个对象的属性
    // 　　onreadystatechange 每次状态改变所触发事件的事件处理程序。
    // 　　responseText 从服务器进程返回数据的字符串形式。
    // 　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。
    // 　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
    // 　　status Text 伴随状态码的字符串信息
    // 　　readyState 对象状态值
    // 　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法
    // 　　　　1 (初始化) 对象已建立，尚未调用send方法
    // 　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知
    // 　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
    // 　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
    
    function ajax(options) { 
        var that  = this;
        that.url = options.url;
        that.data = options.data;
        that.responseText = null;
        that.readyState = null;
        that.status = null;
        
        // 是否处理数据 JSON.stringify
        that.processData = options.processData || true,
        that.contentType = options.contentType || true,
    
        that.method = options.method || 'GET';
        // 异步
        that.async = options.async || true;
        // 请求头
        that.headers = options.headers;
        // 回调函数
        that.callback = options.callback
        // 成功回调
        that.success = options.success;
        // 失败回调
        that.error = options.error;
        // 请求前执行
        that.beforeSend = options.beforeSend;
        // 请求完成执行
        that.complete = options.complete;
    
        that.xmlHttp = new XMLHttpRequest();
        that.xmlHttp.onreadystatechange = function() { 
            var xmlHttp = that.xmlHttp
            if(xmlHttp.readyState == 4) { 
                //console.log(that)
                that.readyState = xmlHttp.readyState;
                that.responseText = xmlHttp.responseText;
                that.status  = xmlHttp.status ;
    
                if(that.status == 200) { 
                    if(typeof that.success == "function") { 
                        that.success(that.responseText);
                    }
                } else { 
                    if(typeof that.error == "function") { 
                        that.error(that.responseText);
                    }
                }
                if(typeof that.callback == "function") { 
                    that.callback(that.responseText);
                }
                if(typeof that.complete == "function") { 
                    that.complete();
                }
            }
        }
    
        that.send = function() { 
            if(typeof that.beforeSend == "function") { 
                that.beforeSend();
            }
            var xmlHttp = that.xmlHttp
            xmlHttp.open(that.method, that.url, that.async);
            if(that.headers) { 
                for(var key in that.headers) { 
                    xmlHttp.setRequestHeader(key, that.headers[key])
                }
            }
            if(that.processData) { 
                xmlHttp.send(JSON.stringify(that.data));
            } else { 
                xmlHttp.send(that.data);
            }
            return that;
        }
        that.send();
        return that;
    }

# 调用例子 #

<html>
        <head>
            <meta charset="utf-8"/>
            <title>调用例子</title>
        </head>
        <body>
            <textarea id="testArea" rows="5" cols="80"></textarea>
            <br>
            <input type="button" onclick="send()" value="POST请求"/>
            <br>
            <br>
            <form id="form1">
                <input type="file" name="uploadfile">
                <input type="button" onclick="sendFile()" value="发送文件"/>
            </form>
    
        </body>
        <script src="jquery-3.6.0.js"></script>
        <script src="ajax.js"></script>
    <script > // 上传附件 function sendFile() { var url = "/ly/sac/clue/importcluefromexcel.do" new ajax({ url : url, method:"POST", headers: { "Authorization":"50c40f8a81ed497695710b62ca92c798" }, processData: false, contentType: false, data: new FormData($("#form1")[0]), beforeSend() { $("#testArea").html("开始提交"); }, success: function(o) { console.log(o) $("#testArea").html(o); } }); } // 后台需要json数据，校验请求头 function send() { var url = "/ly/sac/clue/cluebypage.do" new ajax({ url : url, method:"POST", headers: { "Authorization":"50c40f8a81ed497695710b62ca92c798", "Content-Type":"application/json" }, data: { pageIndex: 1, pageSize: 30, param:{ pageIndex: 1, pageSize: 30 } }, beforeSend() { $("#testArea").html("开始提交"); }, success: function(o) { console.log(o) $("#testArea").html(o); } }); } </script>
    </html>