js封装 Ajax ——常用工具函数

wuyangchun 发布于2019-08-23 14:56 / 1904人阅读

摘要：在前端开发中，的重要性不言而喻，所以我开始试着封装自己专属常规封装封装函数连接的方式，包括和两种方式发送请求的是否为异步请求，为异步的，为同步的发送的参数，格式为对象类型发送并接收成功调用的回调函数常规封装用方式发送数据只能用方式发送数据可

在前端开发中，ajax的重要性不言而喻，所以我开始试着封装自己专属ajax
1.常规封装

/* 封装ajax函数
 * @param {string}opt.method http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
/*1常规封装*/
function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB
    opt.url = opt.url || "";
    opt.async = opt.async || true; //同步异步
    opt.dataType = opt.dataType || "text"; //所传的数的数据类型
    opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType="json"
    opt.data = opt.data || null;


    var xmlHttp = getXmlHttp(); //获取XML 对象

    var postData = getAjaxParama(opt.data); //data

    if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") {
        postData = JSON.stringify(opt.data); //转化为字符串
    }

    if (opt.method === "POST") {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader("Content-Type", opt.contentType); //而POST请求需要设置请求头，用来传递参数

    } else if (opt.method === "GET") {
        postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面；
        xmlHttp.open(opt.method, opt.url + postData, opt.async);
        postData = null; //重置参数
    }
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            var status = xmlHttp.status;
            if (status >= 200 && status < 300) {
                opt.success && opt.success(xmlHttp.responseText);
            } else {
                opt.error && opt.error(status);
            }
        }
    };

    xmlHttp.send(postData);

    function getXmlHttp() {
        var obj = null;
        //非IE浏览器创建XmlHttpRequest对象
        if (window.XMLHttpRequest) obj = new XMLHttpRequest();

        //IE浏览器创建XmlHttpRequest对象
        if (window.ActiveXObject) {
            try {
                obj = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    obj = new ActiveXObject("msxml2.XMLHTTP");
                } catch (ex) {}
            }
        }
        return obj;

    }

    function getAjaxParama(data) {
        var params = [];

        for (var key in data) {
            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
        }
        return params.join("&"); //添加&字符串

    }

}

2.自定义封装

/**
 * [ajax封装ajax函数]
 * @Author   Linada
 * @DateTime 2017-12-19T16:16:32+0800
 * @param {string}  opt.method [http连接的方式，包括POST和GET两种方式]
 * @param {string}  opt.url [发送请求的url]
 * @param {boolean} opt.async [是否为异步请求，true为异步的，false为同步的]
 * @param {object}  opt.data [发送的参数，格式为对象类型]
 * @param {function}  opt.success [ajax发送并接收成功调用的回调函数]
 */

;(function (undefined) {
    "use strict"
    var _global;
    var umeAjax = {
        ajax: function (opt) {
            opt = opt || {};
            opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB
            opt.url = opt.url || "";
            opt.async = opt.async || true; //同步异步
            opt.dataType = opt.dataType || "text"; //所传的数的数据类型
            opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType="json"
            opt.data = opt.data || null;


            var xmlHttp = getXmlHttp(); //获取XML 对象

            var postData = getAjaxParama(opt.data); //data

            if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") {
                postData = JSON.stringify(opt.data); //转化为字符串
            }

            if (opt.method === "POST") {
                xmlHttp.open(opt.method, opt.url, opt.async);
                xmlHttp.setRequestHeader("Content-Type", opt.contentType); //而POST请求需要设置请求头，用来传递参数

            } else if (opt.method === "GET") {
                postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面；
                xmlHttp.open(opt.method, opt.url + postData, opt.async);
                postData = null; //重置参数
            }
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4) {
                    var status = xmlHttp.status;
                    if (status >= 200 && status < 300) {
                        opt.success && opt.success(xmlHttp.responseText);
                    } else {
                        opt.error && opt.error(status);
                    }
                }
            };

            xmlHttp.send(postData);
        },


    }

    function getXmlHttp() {
        var obj = null;
        //非IE浏览器创建XmlHttpRequest对象
        if (window.XMLHttpRequest) obj = new XMLHttpRequest();

        //IE浏览器创建XmlHttpRequest对象
        if (window.ActiveXObject) {
            try {
                obj = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                try {
                    obj = new ActiveXObject("msxml2.XMLHTTP");
                } catch (ex) {
                }
            }
        }
        return obj;

    }


    function getAjaxParama(data) {
        var params = [];

        for (var key in data) {
            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
        }
        return params.join("&"); //添加&字符串

    }

    // 最后将插件对象暴露给全局对象
    _global = (function () {
        return this || (0, eval)("this");
    }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = umeAjax;
    } else if (typeof define === "function" && define.amd) {
        define(function () {
            return umeAjax;
        });
    } else {
        !("umeAjax" in _global) && (_global.umeAjax = umeAjax);
    }
}());

3.使用




    
    
        js测试

4.拓展
封装post方式的promise的ajax插件

/*
*promise
* 用Promise封装一个post请求的方法
*/
function postJSON(url, data) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");

        xhr.onreadystatechange = function() {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(JSON.parse(this.responseText), this);
                    //debug_print("ajaxPromise(param) success: " +this.responseText);
                } else {
                    var resJson = {
                        code: this.status,
                        response: this.response
                    };
                    reject(resJson, this);
                }
            }
        };
        xhr.send(JSON.stringify(data));
    });
}

// 用Promise封装一个get请求的方法,基于ajax
function ajaxPromise(param) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: param.url,
            type: "get",
            data: param.data || "",
            success: function (data) {
                //console.info(data);
                debug_print("ajaxPromise(param) success: " + JSON.stringify(data));
                resolve(data);
            },
            error: function (error) {
                //console.info(error);
                debug_print("ajaxPromise(param) error: " + JSON.stringify(error));
                reject(error)
            }
        });
    });
}

云服务器 GPU云服务器工具函数封装原生js封装ajax js ajax 请求数据封装 js封装工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101376.html

大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

mylxsw 2019-08-22 13:49 评论0 收藏0
JavaWEB开发14——ajax

摘要：一概述什么是同步，什么是异步同步现象客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死的运行原理页面发起请求，会将请求发送一、Ajax概述1．什么是同步，什么是异步同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态异步现象：客户...

yearsj 2019-08-16 13:52 评论0 收藏0
JS事件 - 监听、冒泡、ajax 、跨域与存储

摘要：事件绑定方法直接绑定方法封装函数调用绑定事件阻止默认行为例标签点击跳转低版本绑定事件兼容问题不识别方法，改用绑定事件，和标准不一样事件冒泡部分激活取消取消取消部分阻止往上冒泡激活取消事件冒泡机制顺着数据结构底层叶子结点一个点击事件，会一 1.事件绑定方法1 - 直接绑定 var btn = document.getElementById(btn1) btn.addEventListe...

stefanieliang 2019-08-22 17:23 评论0 收藏0