JS中ajax的封装

最新推荐文章于 2024-06-19 11:25:09 发布

渣渣前端

最新推荐文章于 2024-06-19 11:25:09 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： JavaScript ajax

本文链接：https://blog.csdn.net/dtbk123/article/details/86669028

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

今天复习了ajax封装，所谓ajax就是通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用js来操作DOM而达到无刷新更新页面

function ajax(obj) {
            var method = obj.method || false,//发送方式
                timeout = (typeof obj.timeout === "number" ? obj.timeout : false),//过期时间
                url = obj.url,//地址
                success = obj.success,//成功函数
                error = obj.error,//失败函数
                data = obj.data//要发送的数据
            async = obj.async || false;//异步或同步

            var str = "";
            if (data) {
                for (var key in data) {
                    str += key + "=" + data[key] + "&";
                }
            }
            if (method.indexof("GET") != -1) {
                url += "?" + str;
            }

            var Xhr = new XMLHttpRequest();
            Xhr.open(method, url, async);
            Xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")//设置请求头
            if (timeout != false) {
                setTimeout(function () {
                    Xhr.abort();
                }, timeout);
            }
            Xhr.send(str);
            Xhr.onreadystatechange = function () {
                if (this.readyState !==4) {
                    return;
                    if (this.status > 200 && this.status < 400) {
                        success();//成功时调用
                    }else{
                        error();//失败时调用
                    }
                }
            }
        }