擺脫jquery,用本身的JS庫實現ajax功能

能夠將下面的代碼保存在一個文件裏如:myAjax.js,之後在項目中若是以爲jquery那一套很重,就徹底能夠使用本身的ajax庫,不用擔憂性能和兼容性!jquery

/**
 * 建立ajax請求對象
 * @returns XMLHTTPREQUEST
 */
function createAjaxObj(){
    var req ;
    if(window.XMLHttpRequest){
        req=new XMLHttpRequest();
    }else{
        req=new ActiveXObject("Msxml2.XMLHTTP");
    }
    return req;
}


/**
 * 發送 ajax 請求
 * @param method  get/post
 * @param url     請求路徑
 * @param params  參數列表  格式a=?&&b=?
 * @param async   true 異步 false 同步
 * @param handle200  處理成功的函數
 * @param loading    處理加載中的函數
 * @param handle404  處理找不到地址的函數
 * @param handle500  處理服務器內部出錯的函數
 */
function sendAjaxReq(method,url,params,async,handle200,loading,handle404,handle500){
    var req = createAjaxObj();
    req.onreadystatechange = function(){
        if(4==req.readyState){
            if(200==req.status){
                if(handle200){
                    handle200(req.responseText);
                }
            }else if(404==req.status){
                if(handle404){
                    handle404();
                }
            }else if(500==req.status){
                if(handle500){
                    handle500();
                }
            }
        }else{
            if(loading){
                loading();
            }
        }
    };
    if("get"==method.toLowerCase()){
        req.open(method,url+(params==null?"":"?"+params),async);
        req.send(null);
    }else if("post" ==method.toLowerCase()){
        req.open(method,url,async);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        req.send(params);
    }
}



/** For Example
// 使用本身的ajax 類庫發送 請求    
        sendAjaxReq("post",
            "${base}/brandAjax/checkBrandId.do",
            "brandId="+brandId,true,
            function(req){
                eval(" var data="+ req.responseText);
                if(data.message==true){
                        alert("品牌ID:"+brandId+"已存在,不可重複添加!");
                        $("#hidBrandId")[0].innerHTML=""; 
                        $("#brandName").val("");                                
                    }else{
                        submitFlag=1;
                        $("#selBrand")[0].style.display = "none";                          
                    }
            });
*/
ajax

相關文章
相關標籤/搜索