Ajax 兩種實現方式：原生 JS 與 jQuery 完整對比

Ajax 兩種實現方式：原生 JS 與 jQuery 完整對比

Ajax（Asynchronous JavaScript and XML）通過異步數據交換實現頁面局部刷新。本文詳細講解原生 XMLHttpRequest 與 jQuery $.ajax 兩種實現的完整流程、參數詳解與代碼示例。

核心流程

1. 創建請求對象；
2. 配置請求方法、URL、異步標誌；
3. 發送請求；
4. 監聽響應狀態，處理返回數據；
5. 更新頁面 DOM。

方式一：原生 XMLHttpRequest

<script>
function showHint(val) {
    var xhr = new XMLHttpRequest();
    var url = "ajax.jsp?q=" + encodeURIComponent(val) + "&sid=" + Math.random();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("sun").innerHTML = xhr.responseText;
        }
    };
    xhr.send(null);
}
</script>

<input type="text" id="tname" />
<input type="button" value="提交" onclick="showHint(document.getElementById('tname').value)" />
<span id="sun"></span>

後端 ajax.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<% out.print(request.getParameter("q")); %>

關鍵參數

• open(method, url, async)：async=true 異步，需監聽 onreadystatechange；
• readyState=4 且 status=200 表示成功；
• responseText 文本響應，responseXML XML 文檔響應；
• GET 簡單快速，POST 適合大數據、非幂等操作。

方式二：jQuery $.ajax

<script src="jquery-1.11.1.js"></script>
<script>
function sayHi() {
    $.ajax({
        url: "ajax.jsp",
        type: "POST",
        data: $("#frm").serialize(),
        async: true,
        success: function(data) { $("#d").html(data); },
        error: function() { alert("請求失敗！"); }
    });
}
</script>

<form id="frm">
    <input type="text" name="tname" />
    <input type="button" value="提交" onclick="sayHi()" />
    <div id="d"></div>
</form>

後端

<%@ page contentType="text/html;charset=UTF-8" %>
<% out.print(request.getParameter("tname") + "你好！"); %>

對比總結

現代項目推薦使用 fetch API 或 axios，但理解原生機制有助於排查底層問題。