原生js ajax

最新推荐文章于 2024-09-11 15:33:18 发布

vinvin1022

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量308

点赞数

分类专栏： javascript 文章标签： js xmlhttprequest javascript ajax

本文链接：https://blog.csdn.net/vinifoxmailcom/article/details/49998073

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

var ajax = {
    // 使用原生js 封装ajax
    // 兼容xhr对象
    createXHR: function () {
        if (typeof XMLHttpRequest != "undefined") { // 非IE6浏览器
            return new XMLHttpRequest();
        } else if (typeof ActiveXObject != "undefined") {   // IE6浏览器
            var version = [
                "MSXML2.XMLHttp.6.0",
                "MSXML2.XMLHttp.3.0",
                "MSXML2.XMLHttp"
            ];
            for (var i = 0; i < version.length; i++) {
                try {
                    return new ActiveXObject(version[i]);
                } catch (e) {
                    //跳过
                }
            }
        } else {
            throw new Error("您的系统或浏览器不支持XHR对象！");
        }
    },
    // 转义字符
    params: function (data) {
        var arr = [];
        for (var i in data) {
            arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
            //arr.push(i + "=" + (data[i]));
        }
        return arr.join("&");
    },
    // 封装ajax
    sendAjax: function (obj) {
        var xhr = this.createXHR();
        obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
        //obj.data = this.params(obj.data);      // 转义字符串
        if (obj.method === "get") {      // 判断使用的是否是get方式发送
            obj.url += obj.url.indexOf("?") == "-1" ? "?" + this.params(obj.data) : "&" + this.params(obj.data);  //以字符串的方式发送参数
        }
        // 异步
        if (obj.async === true) {
            // 异步的时候需要触发onreadystatechange事件
            xhr.onreadystatechange = function () {
                // 执行完成
                if (xhr.readyState == 4) {
                    callBack();
                }
            }
        }
        xhr.open(obj.method, obj.url, obj.async);  // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
        if (obj.method === "post") {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(JSON.stringify(obj.data));  //以json字符串的方式发送参数
        } else {
            xhr.send(null);
        }
        // xhr.abort(); // 取消异步请求
        // 同步
        if (obj.async === false) {
            callBack();
        }
        // 返回数据
        function callBack() {
            // 判断是否返回正确
            if (xhr.status == 200) {
                obj.success(xhr.responseText);
            } else {
                obj.Error("获取数据失败，错误代号为：" + xhr.status + "错误信息为：" + xhr.statusText);
            }
        }
    }
};