欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生Javascript封裝的一個AJAX函數(shù)分享

 更新時間:2014年10月11日 10:42:39   作者:十年燈  
這篇文章主要介紹了原生Javascript封裝的一個AJAX函數(shù)分享,本文是實際項目中提取出來的,簡單易用,需要的朋友可以參考下

最近的工作中涉及到大量的ajax操作,本來該后臺做的事也要我來做了.而現(xiàn)在使用的ajax函數(shù)是一個后臺人員封裝的—-但他又是基于jquery的ajax,所以離開了jquery這個函數(shù)就毫無作用了.而且我覺得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一個能在沒有jquery的情況下使用的ajax方法.

所以我也花一天時間寫了一個,參數(shù)與調(diào)用方法類似于jquery的ajax.就叫xhr吧,因為xhr=XMLHttpRequest.

復(fù)制代碼 代碼如下:

/*
* Name: xhr,AJAX封裝函數(shù)
* Description: 一個ajax調(diào)用封裝類,仿jquery的ajax調(diào)用方式
* Author:十年燈
*/
var xhr = function () {
    var
    ajax = function  () {
        return ('XMLHttpRequest' in window) ? function  () {
                return new XMLHttpRequest();
            } : function  () {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }(),
    formatData= function (fd) {
        var res = '';
        for(var f in fd) {
            res += f+'='+fd[f]+'&';
        }
        return res.slice(0,-1);
    },
    AJAX = function(ops) {
        var    
        root = this,
        req = ajax();

        root.url = ops.url;
        root.type = ops.type || 'responseText';
        root.method = ops.method || 'GET';
        root.async = ops.async || true;    
        root.data = ops.data || {};
        root.complete = ops.complete || function  () {};
        root.success = ops.success || function(){};
        root.error =  ops.error || function (s) { alert(root.url+'->status:'+s+'error!')};
        root.abort = req.abort;
        root.setData = function  (data) {
            for(var d in data) {
                root.data[d] = data[d];
            }
        }
        root.send = function  () {
            var datastring = formatData(root.data),
            sendstring,get = false,
            async = root.async,
            complete = root.complete,
            method = root.method,
            type=root.type;
            if(method === 'GET') {
                root.url+='?'+datastring;
                get = true;
            }
            req.open(method,root.url,async);
            if(!get) {
                req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                sendstring = datastring;
            }      

            //在send之前重置onreadystatechange方法,否則會出現(xiàn)新的同步請求會執(zhí)行兩次成功回調(diào)(chrome等在同步請求時也會執(zhí)行onreadystatechange)
            req.onreadystatechange = async ? function  () {
                // console.log('async true');
                if (req.readyState ==4){
                    complete();
                    if(req.status == 200) {
                        root.success(req[type]);
                    } else {
                        root.error(req.status);
                    }                  
                }
            } : null;
            req.send(sendstring);
            if(!async) {
                //console.log('async false');
                complete();
                root.success(req[type]);
            }
        }
        root.url && root.send();       
    };
    return function(ops) {return new AJAX(ops);}   
}();

參數(shù)說明:

1.url:請求地址.可以不填,請求就不會發(fā)起,但如果不填又強行send,出了錯不怪我
2.method: ‘GET'或'POST',全大寫,默認GET
3.data: 要附帶發(fā)送的數(shù)據(jù),格式是一個object
4.async: 是否異步,默認true
5.type: 返回的數(shù)據(jù)類型,只有responseText或responseXML,默認responseText
6.complete: 請求完成時執(zhí)行的函數(shù)
7.success: 請求成功時執(zhí)行的函數(shù)
8.error: 請求失敗時執(zhí)行的函數(shù)

注:其中的type參數(shù),并沒有jquery的dataType那么豐富,只有原生AJAX有的responseText或responseXML.要是返回的是json數(shù)據(jù),你需要在success函數(shù)中自己處理一下把text轉(zhuǎn)成json.

函數(shù)說明:

一個實例化的xhr對象有兩個函數(shù)可使用,一個是send,調(diào)用方法是:xhr.send(),無參數(shù),其作用是發(fā)起請求過程.如果初始化時沒有url,則不會執(zhí)行send方法,這樣你就可以在后面再加入url,并手動發(fā)起send—-如果send的時候沒有url,那么請求會失敗并且我沒有處理這個錯誤,出了錯只有你自己找了.

另一個方法是setData,調(diào)用方法是xhr.setData(data_obj),其參數(shù)是一個object. setData方法的作用是局部替換xhr的data屬性里的值,比如xhr.data中已有一個page:1,你可以用xhr.setData({page:2})來更新他的值,而不影響data中已存在的其他屬性值.

調(diào)用方法:

復(fù)制代碼 代碼如下:

var a1 = xhr({
        url:'2.php',
        data:{
            'username':'lix',
            'password':'123456',
            'gender':'male',
            'interset':'play'
        },
        async:false,
        method:'GET',
        success: function  (data) {
            var obj = JSON.parse(data);
            //....
        }
    });

注:不用寫new

特色介紹:

經(jīng)過這段時間的項目經(jīng)驗,我發(fā)現(xiàn)一個ajax類應(yīng)該具有一個很常見的特色:便于重復(fù)發(fā)起請求.比如項目中我寫分頁ajax的時候,每次翻頁都要發(fā)送請求,但發(fā)送的數(shù)據(jù)中除了當(dāng)前頁碼和每頁條數(shù),其他的都是不會改變的.如果多次這樣的請求,都要重復(fù)定義那些不變的參數(shù),無疑是種資源浪費.

所以這個xhr函數(shù),就已經(jīng)考慮了這個功能.還是拿分頁的例子來說,我們可以在頁面加載完成的時候就初始化一個xhr對象,保存為變量a1,當(dāng)發(fā)起翻頁請求時,其他的什么參數(shù)都沒變,但pageNumber變了,此時就可以調(diào)用xhr的setData方法,把pageNumber改掉.

復(fù)制代碼 代碼如下:

a1.setData({pageNumber:2});

注:setData的參數(shù)也是一個object.

當(dāng)然,你也可以把data全盤替換:

a1.data = {…};

不只是data,你可以對a1這個已經(jīng)實例化的xhr對象進行更多的更改,比如換掉url,換掉success函數(shù),GET換成POST,同步換成異步…換完之后,再調(diào)用a1.send()方法,他就會按你的設(shè)置再次發(fā)起請求了.

當(dāng)然,如果是完全不相關(guān)的另一個ajax請求,就沒有必要硬要用這個現(xiàn)成的a1了.我們可以再實例化一個xhr,叫a2什么的.

如果你對xhr這個名字不滿意,那就只有自己改掉了.

另外提供壓縮加密版.未壓縮版去掉注釋大概2kb,壓縮版1.00kb.

復(fù)制代碼 代碼如下:

var xhr=function(){var e=function(){return"XMLHttpRequest"in window?function(){return new XMLHttpRequest}:function(){return new ActiveXObject("Microsoft.XMLHTTP")}}(),t=function(e){var t="";for(var n in e){t+=n+"="+e[n]+"&"}return t.slice(0,-1)},n=function(n){var r=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r.async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){};r.error=n.error||function(e){alert(r.url+"->status:"+e+"error!")};r.abort=i.abort;r.setData=function(e){for(var t in e){r.data[t]=e[t]}};r.send=function(){var e=t(r.data),n,s=false,o=r.async,u=r.complete,a=r.method,f=r.type;if(a==="GET"){r.url+="?"+e;s=true}i.open(a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function(){if(i.readyState==4){u();if(i.status==200){r.success(i[f])}else{r.error(i.status)}}}:null;i.send(n);if(!o){u();r.success(i[f])}};r.url&&r.send()};return function(e){return new n(e)}}()

xhr肯定有不完善的地方,以后使用中如果發(fā)現(xiàn)了,我會及時修正的.如果你用得不爽或發(fā)現(xiàn)不足,也請不吝提出改進意見.

相關(guān)文章

最新評論