ajax封裝

;(function ($) {
    AJAX = {
        _default_option: {
            url: "",
            data: "",
            async:true,
            dataType: "json",
            cache: false,
            success: null,//function(){}
            error: null,//function(){}
            send: null,//function(){}
            complete: null//function(){}
        },
        ajaxDefaultSuccess:function(){

        },
        ajaxDefaultError:function(){
        },
        ajaxByUrl: function (option) {
            var options = $.extend({},this._default_option, option);
            this._ajaxSend(options);
            $.ajax({
                url: options.url,
                type:options.type,
                async:options.async,
                dataType: "json",
                data: options.data,
                cache: false,
            })
            .done(function(data) {
                if(data.code == 'noLogin'){
                    layer.open({
                        type: 2,
                        title: false,
                        area: ['399px', '530px'],
                        shadeClose: true,
                        content: [eval(data.url), 'no']
                    });
                    return;
                }
                if ($.isFunction(options.success)) {
                    options.success(data);
                } else {
                    LXD_AJAX.ajaxDefaultSuccess();
                }
            })
            .fail(function() {
                LXD_AJAX.ajaxDefaultError();
            })
            this._ajaxComplete(options);
            return false;
        },

        _ajaxSend: function(option){
            $(document).ajaxSend(function(){
                if ($.isFunction(option.send)) {
                    option.send();
                }
            });
        },

        _ajaxComplete: function(option){
            $(document).ajaxComplete(function(){
                if ($.isFunction(option.complete)) {
                    option.complete();
                }
            });
        },

        postByUrl: function (option) {
            var options = $.extend({},{type: "POST"}, this._default_option, option);
            this._ajaxSend(options);
            $.post(options.url, options.data, function (data) {
                if(data.code == -2){
                    $('#login-wrap').show();
                    $('#login-prompt').show();
                    return;
                }
                if ($.isFunction(options.success)) {
                    options.success(data);
                } else {
                    LXD_AJAX.ajaxDefaultSuccess();
                }
            }, options.dataType);

            this._ajaxComplete(options);
        },
        getByUrl: function (option) {
            var options = $.extend({},{type: "GET"}, this._default_option, option);
            this._ajaxSend(options);
            $.get(options.url, options.data, function (data) {
                if(data.code == -2){
                    //window.location.href = data.url;
                    $('#login-wrap').show();
                    $('#login-prompt').show();
                    return;
                }
                if ($.isFunction(options.success)) {
                    options.success(data);
                } else {
                    LXD_AJAX.ajaxDefaultSuccess();
                }
            }, options.dataType);

            this._ajaxComplete(options);
        },
        delByUrl: function (option) {
            var options = $.extend({},{type: "DELETE"}, this._default_option, option);
            this._ajaxSend(options);
            $.ajax({
                url: options.url,
                type: 'DELETE',
                dataType: 'json',
                data:options.data,
            })
            .done(function(data) {
                if(data.code == -2){
                    $('#login-wrap').show();
                    $('#login-prompt').show();
                    return;
                }
                if ($.isFunction(options.success)) {
                    options.success(data);
                } else {
                    LXD_AJAX.ajaxDefaultSuccess();
                }
            })
            .fail(function() {
                LXD_AJAX.ajaxDefaultError();
            })
            this._ajaxComplete(options);
        },
        putByUrl: function (option) {
            var options = $.extend({},{type: "PUT"}, this._default_option, option);
            this._ajaxSend(options);
             $.ajax({
                url: options.url,
                type: 'PUT',
                dataType: 'json',
                data:options.data,
            })
            .done(function(data) {
                if(data.code == -2){
                    $('#login-wrap').show();
                    $('#login-prompt').show();
                    return;
                }
                if ($.isFunction(options.success)) {
                    options.success(data);
                } else {
                    LXD_AJAX.ajaxDefaultSuccess();
                }
            })
            .fail(function() {
                LXD_AJAX.ajaxDefaultError();
            })
            this._ajaxComplete(options);
        },

        ajaxByForm: function (form, callback) {
            var $form = $(form);
            // if (!($form.valid())) {
            //     return false;
            // }
            $.ajax({
               type: $form.method || "POST",
                url: $form.attr("action"),
                data: $form.serialize(),
                dataType: "json",
                cache: false,
            })
            .done(function(response) {
                // var json = $.LXD.jsonEval(response);
                if(response.code == -2){
                    //window.location.href = json.url;
                    $('#login-wrap').show();
                    $('#login-prompt').show();
                    return;
                }
                if ($.isFunction(callback)) {
                    callback(response);
                } else {
                    LXD_AJAX.ajaxDefaultSuccess();
                }
            })
            .fail(function() {
                 LXD_AJAX.ajaxDefaultError();
            })
            
        }
    }
})(jQuery);

原生ajax封裝

/*
 * ajax({   
 * url: 'test.php',    // 請(qǐng)求地址
 * jsonp: 'jsonpCallback',  // 采用jsonp請(qǐng)求画恰,且回調(diào)函數(shù)名為"jsonpCallbak"允扇,可以設(shè)置為合法的字符串
 * data: {'b': '異步請(qǐng)求'},   // 傳輸數(shù)據(jù)
 * success:function(res){   // 請(qǐng)求成功的回調(diào)函數(shù)
 *   console.log(res);   
 * },
 * error: function(error) {}   // 請(qǐng)求失敗的回調(diào)函數(shù)
 * });
 * 
 */

function ajax(params) {
    params = params || {};
    params.data = params.data || {};
    var json = params.jsonp ? jsonp(params) : json(params);
    // ajax請(qǐng)求
    function json(params) {
        params.type = (params.type || 'GET').toUpperCase();
        params.data = formatParams(params.data);
        var xhr = null;

        // 實(shí)例化XMLHttpRequest對(duì)象
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            // IE6及其以下版本
            xhr = new ActiveXObjcet('Microsoft.XMLHTTP');
        };

        // 監(jiān)聽事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                var status = xhr.status;
                if(status >= 200 && status < 300) {
                    var response = '';
                    var type = xhr.getResponseHeader('Content-type');
                    if(type.indexOf('xml') !== -1 && xhr.responseXML) {
                        response = xhr.responseXML; //Document對(duì)象響應(yīng)
                    } else if(type === 'application/json') {
                        response = JSON.parse(xhr.responseText); //JSON響應(yīng)
                    } else {
                        response = xhr.responseText; //字符串響應(yīng)
                    };
                    params.success && params.success(response);
                } else {
                    params.error && params.error(status);
                }
            }
        };

        // 連接和傳輸數(shù)據(jù)
        if(params.type == 'GET') {
            xhr.open(params.type, params.url + '?' + params.data, true);
            xhr.send(null);
        } else {
            xhr.open(params.type, params.url, true);
            //設(shè)置提交時(shí)的內(nèi)容類型
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
            xhr.send(params.data);
        }
    }

    // jsonp請(qǐng)求
    function jsonp(params) {
        //創(chuàng)建script標(biāo)簽并加入到頁面中
        var callbackName = params.jsonp;
        var head = document.getElementsByTagName('head')[0];
        // 設(shè)置傳遞給后臺(tái)的回調(diào)參數(shù)名
        params.data['callback'] = callbackName;
        var data = formatParams(params.data);
        var script = document.createElement('script');
        head.appendChild(script);

        //創(chuàng)建jsonp回調(diào)函數(shù)
        window[callbackName] = function(json) {
            head.removeChild(script);
            clearTimeout(script.timer);
            window[callbackName] = null;
            params.success && params.success(json);
        };

        //發(fā)送請(qǐng)求
        script.src = params.url + '?' + data;

        //超時(shí)處理
        if(params.time) {
            script.timer = setTimeout(function() {
                window[callbackName] = null;
                head.removeChild(script);
                params.error && params.error({
                    message: '超時(shí)'
                });
            }, time);
        }
    };
    //格式化參數(shù)
    function formatParams(data) {
        var arr = [];
        for(var name in data) {
            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
        };
        // 添加一個(gè)隨機(jī)數(shù)读处,防止緩存
        arr.push('v=' + random());
        return arr.join('&');
    }
    // 獲取隨機(jī)數(shù)
    function random() {
        return Math.floor(Math.random() * 10000 + 500);
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末罚舱,一起剝皮案震驚了整個(gè)濱河市绎谦,隨后出現(xiàn)的幾起案子燥滑,更是在濱河造成了極大的恐慌,老刑警劉巖铭拧,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件搀菩,死亡現(xiàn)場(chǎng)離奇詭異肪跋,居然都是意外死亡州既,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來序臂,“玉大人奥秆,你說我怎么就攤上這事」苟” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵囊榜,是天一觀的道長。 經(jīng)常有香客問我歹嘹,道長孔庭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任怎抛,我火速辦了婚禮马绝,結(jié)果婚禮上挣菲,老公的妹妹穿的比我還像新娘白胀。我一直安慰自己,他們只是感情好哪怔,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開白布认境。 她就那樣靜靜地躺著挟鸠,像睡著了一般兄猩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鸠姨,一...
    開封第一講書人閱讀 52,457評(píng)論 1 311
  • 那天讶迁,我揣著相機(jī)與錄音核蘸,去河邊找鬼啸驯。 笑死祟峦,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的针姿。 我是一名探鬼主播厌衙,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼婶希,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼喻杈!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起堂污,我...
    開封第一講書人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎换棚,沒想到半個(gè)月后反镇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡夕玩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了尸昧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡爆侣,死狀恐怖兔仰,靈堂內(nèi)的尸體忽然破棺而出乎赴,到底是詐尸還是另有隱情,我是刑警寧澤无虚,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布嗤堰,位于F島的核電站,受9級(jí)特大地震影響踢匣,放射性物質(zhì)發(fā)生泄漏离唬。R本人自食惡果不足惜划鸽,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望裸诽。 院中可真熱鬧丈冬,春花似錦、人聲如沸埂蕊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至露氮,卻和暖如春畔规,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背恨统。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來泰國打工叁扫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人畜埋。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓莫绣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親悠鞍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子对室,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容

  • 原生Ajax封裝 http://www.reibang.com/p/ff9e1139ea51 jQuery-Aja...
    charlotte2018閱讀 245評(píng)論 0 0
  • (1) ajax數(shù)據(jù)請(qǐng)求在項(xiàng)目中用到的頻率會(huì)很高,所以對(duì)這些高頻率組件進(jìn)行封裝咖祭,以便使用 r.detail的de...
    啥啥啥娜娜閱讀 486評(píng)論 0 1
  • 函數(shù)封裝的是代碼掩宜,采用面向?qū)ο蟮男问椒庋b 暴露出ajax接口 增加1個(gè)方法: get方法 參數(shù)obj 是1個(gè)對(duì)象,...
    風(fēng)之傷_3eed閱讀 177評(píng)論 0 0
  • /** * Created by Computer on 2016/6/20. */ function creat...
    194181740bd6閱讀 196評(píng)論 0 0
  • 當(dāng)我拿起刀的時(shí)候么翰,我就要放下烈酒牺汤;當(dāng)我舉起酒杯的時(shí)候,卻要把我的長刀埋在地下锅减。當(dāng)我放下烈酒,失去縱橫天下的氣魄...
    開心的開閱讀 143評(píng)論 0 1