js封裝 Ajax ——常用工具函式

Linda0821發表於2019-02-16

在前端開發中，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.使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>js測試</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta name="description" content="my fortune" />
    <style>        
        html {
            font-size: 24px!important;
            padding-bottom: 0;
        }        
    </style>
</head>
 <body>
    <div id="ajax">
        
    </div>
    <script src="./ajax.js"></script>    
    <script type="text/javascript">
        var country = "US";
        var lan = "en";
        var news_url = "https://contentapi.celltick.com/mediaApi/v1.0/notification";
        ajax({
            method: "GET",
            data: {
                publisherId: "ZTE-Push",
                key: "ZPaP5GSQzmg41tHF0h7Jv0u2SOuH4OM4",
                limit: 10,
                userId: "572776656",
                countryCode: country,
                lanuguage: lan

            },
            url: news_url,
            success: function(response) {
                //console.log(response);
                document.getElementById("ajax").innerHTML=response;
            },
            error: function(e) {
                console.log(e);
            }
        });

    </script>

    <script src="./ajax.fn.js"></script>
    <script type="text/javascript">
        umeAjax.ajax({
            method: "GET",
            data: {
                publisherId: "ZTE-Push",
                key: "ZPaP5GSQzmg41tHF0h7Jv0u2SOuH4OM4",
                limit: 10,
                userId: "572776656",
                countryCode: country,
                lanuguage: lan

            },
            url: news_url,
            success: function(response) {
                console.log("umeAjax: "+response.length);
            },
            error: function(e) {
                console.log(e);
            }
        });

        var getAdUrl = "http://browser.umeweb.com/cn_ume_api/ads/api/request"; //ajax引數

        umeAjax.ajax({
            method: `POST`,
            url: getAdUrl,
            contentType: "application/json;charset=utf-8",
            data:{
                "app": {
                    "sdk_channel": "",
                    "app_id": "",
                    "app_version": "",
                    "app_package": ""
                },
                "addes": [{
                    "ad_type": 2,
                    "impression_num": 3,
                    "ad_slot": 2,
                    "ad_width": 0,
                    "ad_height": 0
                }],
                "device": {
                    "screen_width": 1280,
                    "screen_height": 720,
                    "os_type": 2,
                    "imei": "864783024054476",
                    "device_type": 2,
                    "androidid": "f58d85c248c37836",
                    "model": "HLANOTE1-L",
                    "os_version": "",
                    "hardware": "mt6752",
                    "display": "HLANOTE1-L-V1.0",
                    "total_rom": "3047200",
                    "board": "techain6752_lt_kk",
                    "total_ram": "1961972",
                    "product": "HLANOTE1-L",
                    "manufacturer": "YUSUN",
                    "device": "HLANOTE1-L",
                    "brand": "YUSUN",
                    "mac": "e8:92:a4:99:6f:00"
                },
                "user": {
                    "ip": "115.239.210.20",
                    "uid": "",
                    "imsi": "460016131813183",
                    "networktype": 1,
                    "lang": "zh_CN"
                } 
            },
            dataType: `json`,
            success: function(data) {
                var obj = JSON.parse(data);
                if (obj.retcode == "0" && obj.ads.length > 0) {
                    console.info("廣告API請求成功："+ JSON.stringify(obj));
                } else {
                    console.info("請求成功，資料異常 ："+ JSON.stringify(obj));
                }
            },
            fail: function(e) {
                console.info("請求錯誤，錯誤資訊："+e);
            }
        });

    </script>
        
</body> 
</html>

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)
            }
        });
    });
}

常用js函式封裝
2018-02-28
JS函式封裝
原生ajax()函式封裝程式碼例項
2017-02-10
函式封裝
ajax原生js封裝
2020-07-19
JS封裝
原生js封裝Ajax
2020-10-03
JS封裝
JSONP 通用函式封裝
2019-01-25
JSON函式封裝
原生JS封裝AJAX請求
2017-12-14
JS封裝
那些年我封裝的 JS 函式
2019-02-16
封裝JS函式
JS開發常用工具函式
2019-06-27
JS函式
rxjs入門之ajax封裝
2019-05-08
JS封裝
ajax 封裝
2019-04-13
封裝
jq封裝函式
2018-01-21
封裝函式
php函式封裝
2017-08-11
PHP函式封裝
前端常用函式封裝
2022-05-05
前端函式封裝
【封裝小技巧】列表處理函式的封裝
2022-05-14
封裝函式
推薦一個js常用工具函式庫
2019-02-16
JS函式
jquery ajax 的封裝
2013-11-19
jQuery封裝
js封裝函式來解釋jQuery的執行原理
2019-04-09
JS封裝函式jQuery
用原生js封裝一個ajax請求方法
2018-11-21
JS封裝
【封裝小技巧】數字處理函式的封裝
2022-06-28
封裝函式
JavaScript常用工具方法封裝（1）
2019-03-06
JavaScript封裝
python怎麼封裝函式
2021-09-11
Python封裝函式
封裝帶引數的函式
2024-03-17
封裝函式
前端ajax介面配置封裝
2021-09-09
前端封裝
分享：用promise封裝ajax
2018-10-09
Promise封裝
jquery 封裝的ajax呼叫
2013-12-02
jQuery封裝
原生Ajax封裝隨筆
2013-10-19
封裝
h5替換 alert toast ajax 請求獨立函式封裝複製可用
2020-10-28
H5AST函式封裝
原生js—ajax的封裝外掛.js—（對get和post做了相容）
2018-11-14
JS封裝
JavaScript 和 CSS 常用工具方法封裝
2019-02-21
JavaScriptCSS封裝
Android常用工具類的封裝
2018-04-27
Android封裝
用promise封裝一個ajax
2018-08-21
Promise封裝
為何要再封裝 AJAX？
2018-11-12
封裝
封裝ajax、axios請求
2019-01-23
封裝iOS
使用ts封裝一個ajax
2024-03-12
封裝
CSS 和 JavaScript 常用工具方法封裝教程！
2019-05-27
CSSJavaScript封裝
關於緩動動畫函式的封裝
2019-01-11
動畫函式封裝
javascript封裝動畫函式（勻速、變速）
2020-11-15
JavaScript封裝動畫函式
封裝一個簡單的動畫函式
2020-09-28
封裝動畫函式

js封裝 Ajax ——常用工具函式

相關文章