您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 程式設計入門

AJAX 輕量級實戰：一個通用函數滿足 90% 業務場景

編輯：Java 程式設計入門

前言：拒絕過度設計，回歸本質

AJAX 技術本身並不複雜，但市面上框架層出不窮、文檔天花亂墜，反而讓開發者無從下手。本文主張：AJAX 只是頁面優化的配角，核心是如何優化用戶體驗。一個精心封裝的 startAjaxRequest 函數，配合 jQuery，足以覆蓋絕大多數業務場景。

三步走：後端介面 → 通用客戶端 → 回調處理

步驟一：後端提供 HTTP 介面（語言無關）

只要能返回符合 XML 規則的 HTML 片段即可。以 WebWork 為例：

public String hotWeek() throws Exception {
    HttpServletResponse response = ServletActionContext.getResponse();
    response.setContentType("text/xml; charset=gb2312");
    PrintWriter out = response.getWriter();

    StringBuffer html = new StringBuffer();
    html.append("...");
    html.append("...");
    html.append("熱門數據行");

    out.print(html.toString()); // 直接輸出 HTML 片段
    return null; // WebWork 不需視圖解析
}

關鍵點：非 Java 開發者只需記住——返回一個 HTTP 響應，內容為可直接插入 DOM 的 HTML 片段。甚至靜態 HTML 檔案也可作為介面。

步驟二：通用 AJAX 請求函數（跨瀏覽器、鏈式調用）

var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE6-
    else if (window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); // 標準瀏覽器
}

function startAjaxRequest(method, async, actionUrl, data, invokeMethod) {
    createXMLHttpRequest();
    xmlHttp.open(method, actionUrl, async);
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.send(data);

    function handleStateChange() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            var nodeId = xmlHttp.responseText;

            // 統一錯誤碼約定
            if (nodeId == 'noPermission') alert('無權限訪問！');
            else if (nodeId.indexOf("false||") != -1) alert('失敗原因：' + nodeId.substring(7));
            else if (nodeId == 'false') alert('操作失敗，請聯繫管理員！');
            else {
                // 成功：調用指定回調或預設 getResult
                if (invokeMethod == undefined) getResult(nodeId);
                else invokeMethod(nodeId);
            }
        }
    }
}

參數說明

參數	說明	典型值
`method`	HTTP 方法	"GET" / "POST"
`async`	是否異步	true（建議）
`actionUrl`	後端介面地址	"./provider!hotWeek.action"
`data`	發送數據	查詢字串或 FormData
`invokeMethod`	自定義成功回調	函數引用，省略則用 `getResult`

步驟三：頁面初始化與回調定義（jQuery 風格）

$(document).ready(function() {
    var actionUrl = "./provider!hotWeek.action";
    $('body').html("頁面加載中...");
    startAjaxRequest("GET", true, actionUrl, ''); // 使用預設 getResult 回調
});

// 預設回調：直接替換 body 內容
function getResult(nodeId) {
    $('body').html(nodeId);
}

// 進階用法：自定義回調處理 JSON、局部更新
function customHandler(htmlFragment) {
    $('#hotList').html(htmlFragment).slideDown();
    // 可進一步解析 JSON、綁定事件等
}

// 調用時指定回調
startAjaxRequest("POST", true, "./provider!search.action", "kw=java", customHandler);