封裝的ajax請求

在做登錄注冊這類提交表單數據時，我們經常需要局部刷新網頁來驗證用戶輸入的信息，這就需要用到ajax請求，我們通常需要獲取表單中的數據，發起ajax請求,通過服務程序，與數據庫的數據進行比對，判斷信息的正確與否。這兒也將ajax請求進行了封裝，當我們在項目中需要多次ajax請求時，就可以用封裝的函數了，不用每次都寫ajax請求，提高了代碼的利用率和工作效率。當然封裝得不一定很完美，網上也有很多優秀的封裝好的ajax請求。也是通過閉包思想，具體的封裝思路，在代碼注釋中也寫得很詳細了

這是封裝的ajax請求

var dajax=function(){
        function createAjax(){
            //創建XHR對象
           var xhr;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }
            else if(window.ActiveXObject){
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
        //ajax請求
        function ajaxRequest(obj){
            /*
             * success:成功時的處理
             * asyn:同步還是異步
             * method:get還是post方式
             * url:地址(路徑)
             * */
            //XHR請求
//            var xhr=createAjax();//執行創建XHR對象
            //xhttpr=xhr;
            var xhr=obj.xhr;//用xhr接收傳入的變量名,此xhr與createAjax()中的xhr不同
            xhr.onreadystatechange=obj.success;
            if(obj.asyn=="undefined"){
                obj.asyn=true;//異步
            }
            var ddParam=[];//定義一個數組,用來存放ajax請求傳遞的參數
            for(key in obj.param){
                ddParam.push(key+"="+obj.param[key]);
            }
            var dataParam=ddParam.join("&");//多個參數之間用&分割
            //console.log(dataParam);
            if(obj.method=="get"){
                //obj.url=obj.url+"?username="+obj.param[0];//param[0]+&param[1]
                obj.url=obj.url+"?"+dataParam;
                xhr.open(obj.method,obj.url,obj.asyn);
                xhr.send(null);
            }
            if(obj.method=="post"){
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.open(obj.method,obj.url,obj.asyn);
                xhr.send(dataParam);
            }
        }
        //返回ajaxRequest()方法
        return myAjax={
            ajaxRequest:ajaxRequest,
            createAjax:createAjax
        };
    }

在我們需要發起ajax請求時，則只需要寫(這里以登錄時，判斷用戶名或密碼是否正確，發起ajax請求為例)

var getAjax=dajax();//封裝的ajax方法
    var xhttpr=getAjax.createAjax();//得到創建XHR對象(createAjax())中的xhr，並賦給用自定義的變量，eg:xhttpr
    user.onblur= function () {//例如當登錄時,填寫用戶名,失去焦點時,發送ajax請求,判斷是否存在該用戶，實現局部刷新
        getAjax.ajaxRequest({
            success:function(){
                //請求成功，用戶定義的操作
                if(xhttpr.readyState==4&&xhttpr.status==200){
                if(xhttpr.responseText=='1'){
                    user.nextElementSibling.innerHTML='';
                }
                else{
                    user.nextElementSibling.innerHTML='用戶名不存在';
                }
            }
            },
            method:"get",
            url:"checkuser.do",
            param:{
                name1:user.value,
                name2:"pwd"
            },
            xhr:xhttpr   //把用戶定義的這個變量名(xhttpr),傳到封裝的ajax中
        })
    }

至於發起請求后，服務處理，dao層如何處理，這兒就不過多闡釋了