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

wuyangchun 發布于2019-08-23 14:56 / 1922人閱讀

摘要：在前端開發中，的重要性不言而喻，所以我開始試著封裝自己專屬常規封裝封裝函數連接的方式，包括和兩種方式發送請求的是否為異步請求，為異步的，為同步的發送的參數，格式為對象類型發送并接收成功調用的回調函數常規封裝用方式發送數據只能用方式發送數據可

在前端開發中，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封裝工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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