一個簡單的ajax對象

function ajax(options) {
    //請求參數
    options = {
        //類型
        type: options.type || "Post",
        //地址
        url: options.url || "",
        //超時時間
        timeout: options.timeout || 5000,
        //完成函數
        onComplete: options.onComplete || function () { },
        //錯誤函數
        onError: options.onError || function () { },
        //執行成功
        onSuccess: options.onSuccess || function () { },
        //傳遞數據
        data: options.data || "",
        //返回的數據類型
        datatype: options.datatype || "string",
    };
    //建立請求對象
    var xml = new XMLHttpRequest();
    //初始化異步請求
    xml.open(options.type, options.url, true);
    //請求超時時間
    var timeoutLength = options.timeout;
    //請求是否成功
    var requestDone = false;
    //初始化一個超時執行回調函數,用於取消請求
    setTimeout(function () {
        requestDone = true;
    }, timeoutLength);

    //監聽文檔狀態的更新
    xml.onreadystatechange = function () {
        //保持等待,直到數據徹底加載,並保證請求並未超時
        if (xml.readyState == 4 && !requestDone) {
            //檢查請求是否成功
            if (httpSuccess(xml)) {
                //以服務器返回的數據做爲參數調用成功回調函數
                options.onSuccess(httpData(xml, options.datatype));
            } else {
                //發生錯誤時執行錯誤回調函數
                options.onError();
            }
            //執行完成回調函數
            options.onComplete();
            //清理文檔,避免內存泄露
            xml = null;
        }
    };
    //創建與服務器的鏈接
    xml.send();

    //判斷http是否響應成功
    function httpSuccess(r) {
        try {
            //若是得不到服務器狀態且咱們正在請求本地文件,認爲成功
            return !r.status && location.protocol == "file:" ||
                //全部的200~300狀態碼錶示成功
                (r.status >= 200 && r.status < 300) ||
                //文檔未修改也表示成功
                r.status == 304 ||
                //Safari在文檔未修改時返回空狀態
                navigator.userAgent.indexOf("Safari") >= 0
                    && typeof r.status == "undefined";
        } catch (e) {
            //若檢查狀態失敗,則假定請求是失敗的
            return false
        }
    }

    //從http響應中解析正確的數據
    function httpData(r, type) {
        //獲取content-type的首部
        var ct = r.getResponseHeader("content-type");
        //若沒有提供類型,判斷服務器返回的是不是xml形式
        var data = !type && ct && ct.indexOf("xml") >= 0;
        //如果,得到xml文檔對象,不然返回文本內容
        data = type == "xml" || data ? r.responseXml : r.responseText;
        //若指定類型是 script ,則以Javascript形式返回文本
        if (type == "script") {
            eval.call(window, data);
        } else if (type == "json") {
            data = eval(data);
        }
        //返回響應數據
        return data;
    }
}

  使用javascript

ajax({
            url: "/Home/GetTestData",
            type: "get",
            datatype: "json",
            onSuccess: function (result) {
                 alert(result);
            },
            onError: function (xhr) {
                var x = xhr;
            }
        });
相關文章
相關標籤/搜索