發布一個簡單小巧的ajax操作類

來源:互聯網
上載者:User
看到自編一個精緻的Ajax架構(帶例子) ,也想發布一個自己整理的東東。不過,看了前一句裡提到的那篇文章下面的某些評論,還是有點害怕。所以,必須要申明的是,這是筆者參考網路資源整理出來的簡單有效ajax操作類(所謂“架構”這種嚇死人不償命的稱呼就免了),對於規模不是太大,不想引用第三方ajax庫,ajax操作要求不是太高太頻繁的小項目,下面這個東東足夠滿足需求了。Code
//封裝XMLHTTP的MyAjaxObj類的代碼
var MyAjaxObj = new Object();

MyAjaxObj.reqList = []; 

//建立一個XMLHTTP對象,相容不同的瀏覽器
function getXmlHttp() {
    var xmlHttp = false;
    var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
                         "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
                         "Microsoft.XMLHTTP"];
    for (var i = 0; i < arrSignatures.length; i++) {
        try {
            xmlHttp = new ActiveXObject(arrSignatures[i]);
            return xmlHttp;
        }
        catch (oError) {
            xmlHttp = false; //ignore
        }
    }
    // throw new Error("MSXML is not installed on your system."); 
    if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}

/*封裝XMLHTTP向伺服器發送請求的操作
url:向伺服器請求的路徑;method:請求的方法,即是get/post;***callback:當伺服器成功返回結果時,調用的函數(類似c#回呼函數)***
data:向伺服器請求時附帶的資料;urlencoded:url是否編碼;cached:是否使用緩衝; callBackError;當伺服器返回錯誤時調用的函數 
*/
MyAjaxObj.send = function(url, method, callback, data, urlencoded, cached, callBackError) {
    var req = getXmlHttp();  //得到一個XMLHTTP的執行個體

    //當XMLHTTP的請求狀態發生改變時調用 (核心處理函數)
    req.onreadystatechange = function() {
        // 當請求已經載入

        if (req.readyState == 4) {
            // 當請求返回成功
            if (req.status == 200) { //或者 req.status < 400
                // 當定義了成功回呼函數時,執行成功回呼函數
                if (callback)
                    callback(req, data);
            }
            // 當請求返回錯誤

            else {
                //當定義了失敗回呼函數時,執行失敗回呼函數
                if (callBackError)
                    callBackError(req, data);
            }

            //刪除XMLHTTP,釋放資源
            try {
                delete req;
                req = null;
            } catch (e) { }
        }
    }

    //如果以POST方式回傳伺服器
    if (method.toUpperCase() == "POST") {
        req.open("POST", url, true);
        //請求是否需要緩衝(只有在req.open之後才可以設定此項)
        if (cached)
            req.setRequestHeader("If-Modified-Since", "0");
        //請求需要編碼
        if (urlencoded)
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        req.send(data);
        MyAjaxObj.reqList.push(req);
    }
    //以GET方式請求
    else {
        req.open("GET", url, true);
        //請求是否需要緩衝
        if (cached)
            req.setRequestHeader("If-Modified-Since", "0");
        req.send(null);
        MyAjaxObj.reqList.push(req);
    }
    return req;
}

//全部清除XMLHTTP數組元素,釋放資源
MyAjaxObj.clearReqList = function() {
    var len = MyAjaxObj.reqList.length;
    for (var i = 0; i < len; i++) {
        var req = MyAjaxObj.reqList[i];
        if (req) {
            try {
                delete req;
            } catch (e) { }
        }
    }
    MyAjaxObj.reqList = [];
}

//進一步封裝XMLHTTP以POST方式發送請求時的代碼
//isClear:是否清除XMLHTTP數組的所有元素;其他參數的意義見 MyAjaxObj.send
MyAjaxObj.sendPost = function(url, data, callback, isClear, isCached, callBackError) {
    if (isClear) {
        MyAjaxObj.clearReqList();
    }
    MyAjaxObj.send(url, "POST", callback, data, true, isCached, callBackError); //post方法需要編碼
}
//進一步封裝XMLHTTP以GET方式發送請求時的代碼
MyAjaxObj.sendGet = function(url, args, callback, isClear, isCached, callBackError) {
    if (isClear)
        MyAjaxObj.clearReqList();
    return MyAjaxObj.send(url, "GET", callback, args, false, isCached, callBackError);
}

調用方式舉例:
我的一篇舊文“ajax:簡單搜尋實踐篇”裡實現了googlesuggest效果,可以把代碼改造成下面的調用方式,具體細節不再贅述了。/*調用方式舉例(GoogleSuggest效果):
        MyAjaxObj.sendPost("AjaxOperations.aspx", null, googleSuggestCallBack, true,true, googleSuggestCallBackError);
   或者 MyAjaxObj.sendGet("AjaxOperations.aspx", null, googleSuggestCallBack, false,true, googleSuggestCallBackError);
*/

注意:
post方式通常需要編碼,get不需要;
倒數第二個參數代表緩衝,設定為false,可以“解決ajax調用中ie的緩衝問題”;
網上有建立XmlHttpRequest池的改進方式,這裡沒有考慮一次建立多個XmlHttpRequest的情況(實際用的也不多);
對於熟練使用第三方ajax庫(如微軟內建的ajax框架組,jquery等)的讀者,還是推薦使用成熟的ajax庫。
再次重申,本人在部落格園的所有技術部落格除非已經標註“原創”二字,否則都是在參考他人的成果基礎上整理加工而成。可能你已經看過筆者的其他部落格,所以你覺得有gjm的嫌疑,千萬別懷疑你的感覺。很不hd地說,對於抄書和剽竊,一直以來我都是深以為恥的。從我寫技術部落格的那天起,我就在等待完全是自己的原創問世。但是技術能力實在有限,原諒我無奈地借鑒他人的成果,以後我一定會加上原文出處的,但是該借鑒的繼續借鑒,該學習的繼續學習,哪有空裝13搞什麼原創呢,莫裝13,原創真的很難啊。
最後,歡迎拍磚。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.