js封裝 Ajax ——常用工具函數(shù)

wuyangchun 發(fā)布于2019-08-23 14:56 / 1949人閱讀

摘要：在前端開(kāi)發(fā)中，的重要性不言而喻，所以我開(kāi)始試著封裝自己專(zhuān)屬常規(guī)封裝封裝函數(shù)連接的方式，包括和兩種方式發(fā)送請(qǐng)求的是否為異步請(qǐng)求，為異步的，為同步的發(fā)送的參數(shù)，格式為對(duì)象類(lèi)型發(fā)送并接收成功調(diào)用的回調(diào)函數(shù)常規(guī)封裝用方式發(fā)送數(shù)據(jù)只能用方式發(fā)送數(shù)據(jù)可

在前端開(kāi)發(fā)中，ajax的重要性不言而喻，所以我開(kāi)始試著封裝自己專(zhuān)屬ajax
1.常規(guī)封裝

/* 封裝ajax函數(shù)
 * @param {string}opt.method http連接的方式，包括POST和GET兩種方式
 * @param {string}opt.url 發(fā)送請(qǐng)求的url
 * @param {boolean}opt.async 是否為異步請(qǐng)求，true為異步的，false為同步的
 * @param {object}opt.data 發(fā)送的參數(shù)，格式為對(duì)象類(lèi)型
 * @param {function}opt.success ajax發(fā)送并接收成功調(diào)用的回調(diào)函數(shù)
 */
/*1常規(guī)封裝*/
function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式發(fā)送數(shù)據(jù),只能256KB;POST：用"POST"方式發(fā)送數(shù)據(jù),可以大到4MB
    opt.url = opt.url || "";
    opt.async = opt.async || true; //同步異步
    opt.dataType = opt.dataType || "text"; //所傳的數(shù)的數(shù)據(jù)類(lèi)型
    opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默認(rèn)表單格式 opt.dataType="json"
    opt.data = opt.data || null;


    var xmlHttp = getXmlHttp(); //獲取XML 對(duì)象

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

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

    if (opt.method === "POST") {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader("Content-Type", opt.contentType); //而POST請(qǐng)求需要設(shè)置請(qǐng)求頭，用來(lái)傳遞參數(shù)

    } else if (opt.method === "GET") {
        postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET請(qǐng)求，參數(shù)是拼接到url上面；
        xmlHttp.open(opt.method, opt.url + postData, opt.async);
        postData = null; //重置參數(shù)
    }
    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瀏覽器創(chuàng)建XmlHttpRequest對(duì)象
        if (window.XMLHttpRequest) obj = new XMLHttpRequest();

        //IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象
        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函數(shù)]
 * @Author   Linada
 * @DateTime 2017-12-19T16:16:32+0800
 * @param {string}  opt.method [http連接的方式，包括POST和GET兩種方式]
 * @param {string}  opt.url [發(fā)送請(qǐng)求的url]
 * @param {boolean} opt.async [是否為異步請(qǐng)求，true為異步的，false為同步的]
 * @param {object}  opt.data [發(fā)送的參數(shù)，格式為對(duì)象類(lèi)型]
 * @param {function}  opt.success [ajax發(fā)送并接收成功調(diào)用的回調(diào)函數(shù)]
 */

;(function (undefined) {
    "use strict"
    var _global;
    var umeAjax = {
        ajax: function (opt) {
            opt = opt || {};
            opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式發(fā)送數(shù)據(jù),只能256KB;POST：用"POST"方式發(fā)送數(shù)據(jù),可以大到4MB
            opt.url = opt.url || "";
            opt.async = opt.async || true; //同步異步
            opt.dataType = opt.dataType || "text"; //所傳的數(shù)的數(shù)據(jù)類(lèi)型
            opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默認(rèn)表單格式 opt.dataType="json"
            opt.data = opt.data || null;


            var xmlHttp = getXmlHttp(); //獲取XML 對(duì)象

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

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

            if (opt.method === "POST") {
                xmlHttp.open(opt.method, opt.url, opt.async);
                xmlHttp.setRequestHeader("Content-Type", opt.contentType); //而POST請(qǐng)求需要設(shè)置請(qǐng)求頭，用來(lái)傳遞參數(shù)

            } else if (opt.method === "GET") {
                postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET請(qǐng)求，參數(shù)是拼接到url上面；
                xmlHttp.open(opt.method, opt.url + postData, opt.async);
                postData = null; //重置參數(shù)
            }
            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瀏覽器創(chuàng)建XmlHttpRequest對(duì)象
        if (window.XMLHttpRequest) obj = new XMLHttpRequest();

        //IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象
        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("&"); //添加&字符串

    }

    // 最后將插件對(duì)象暴露給全局對(duì)象
    _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測(cè)試

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

/*
*promise
* 用Promise封裝一個(gè)post請(qǐng)求的方法
*/
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封裝一個(gè)get請(qǐng)求的方法,基于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)
            }
        });
    });
}

云服務(wù)器 GPU云服務(wù)器工具函數(shù)封裝原生js封裝ajax js ajax 請(qǐng)求數(shù)據(jù)封裝 js封裝工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101376.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wuyangchun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

云服務(wù)器發(fā)現(xiàn)安全漏洞怎么辦？云服務(wù)器安全防護(hù)措施

閱讀 2243·2021-11-15 11:36
創(chuàng)新賦能，筑基未來(lái) ——“2021中國(guó)IPv6創(chuàng)新發(fā)展大會(huì)”在京召開(kāi)

閱讀 1408·2021-10-14 09:42
織夢(mèng)DEDECMS開(kāi)啟版權(quán)收費(fèi)，除個(gè)人非盈利網(wǎng)站外授權(quán)費(fèi)5800元/年

閱讀 4239·2021-09-30 09:52
真實(shí)體驗(yàn)迅捷PDF轉(zhuǎn)換器 PDF Word Excel PPT等格式轉(zhuǎn)換工具

閱讀 1764·2021-09-24 10:24
80VPS：日本/香港CN2服務(wù)器600元/月,E5/16G/1TB/20M帶寬

閱讀 993·2021-09-02 09:56
[譯]關(guān)于vertical-align:你需要知道的一切

閱讀 2715·2019-08-30 13:11
CSS基礎(chǔ)知識(shí)之float

閱讀 3079·2019-08-30 13:06
IE下兼容性

閱讀 968·2019-08-30 12:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

js封裝 Ajax ——常用工具函數(shù)

相關(guān)文章

大前端2018現(xiàn)在上車(chē)還還得及么

大前端2018現(xiàn)在上車(chē)還還得及么

JavaWEB開(kāi)發(fā)14——ajax

**JS事件 - 監(jiān)聽(tīng)、冒泡、ajax 、跨域與存儲(chǔ)**

發(fā)表評(píng)論

0條評(píng)論

wuyangchun

男|高級(jí)講師

TA的文章

云服務(wù)器發(fā)現(xiàn)安全漏洞怎么辦？云服務(wù)器安全防護(hù)措施

創(chuàng)新賦能，筑基未來(lái) ——“2021中國(guó)IPv6創(chuàng)新發(fā)展大會(huì)”在京召開(kāi)

織夢(mèng)DEDECMS開(kāi)啟版權(quán)收費(fèi)，除個(gè)人非盈利網(wǎng)站外授權(quán)費(fèi)5800元/年

真實(shí)體驗(yàn)迅捷PDF轉(zhuǎn)換器 PDF Word Excel PPT等格式轉(zhuǎn)換工具

80VPS：日本/香港CN2服務(wù)器600元/月,E5/16G/1TB/20M帶寬

[譯]關(guān)于vertical-align:你需要知道的一切

CSS基礎(chǔ)知識(shí)之float

IE下兼容性

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

js封裝 Ajax ——常用工具函數(shù)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！