Ajax 學習總結（一）：核心原理、XMLHttpRequest 與完整實作範例

Ajax 學習總結（一）：核心原理、XMLHttpRequest 與完整實作範例

1. Ajax 簡介

傳統 Web 交互：瀏覽器直接請求 → 伺服器處理 → 回送響應 → 頁面整頁刷新。用戶需等待響應才能發起下一請求，體驗差。

Ajax（Asynchronous JavaScript and XML）引入瀏覽器端 Ajax 引擎預處理請求、異步通信、接收響應並處理回送。用戶無需等待即可發送多請求，實現「無延遲」體驗。核心技術組合：

• CSS + XHTML：版面與樣式
• DOM 模型：動態交互與顯示
• XMLHttpRequest：異步通信核心
• JavaScript：綁定調用、操作 DOM 更新頁面

2. XMLHttpRequest 物件屬性與方法

關鍵屬性

主要方法

• open(method, url, async)：初始化請求類型、URL、是否異步
• send(data)：發送 HTTP 請求

3. Ajax 開發五步驟

1. 建立 XMLHttpRequest 物件
2. 註冊回調函數（onreadystatechange）
3. 呼叫 open() 設定請求方式與 URL
4. 呼叫 send() 發送請求
5. 回調函數中處理響應數據（readyState==4 && status==200）

4. 完整實作範例

前端 ajax.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>Ajax 案例</title>
<script type="text/javascript">
var xmlhttp = null;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();  // IE7+, Firefox, Chrome
} else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE5, IE6
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        alert(xmlhttp.responseText);
    }
};

// POST 方式
xmlhttp.open("POST", "${pageContext.request.contextPath}/ajax1");
xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=lzhp");
</script>
</head>
<body></body>
</html>

後端 Ajax1Servlet

public class Ajax1Servlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String name = request.getParameter("name");
        PrintWriter out = response.getWriter();
        out.write("Hello " + name);
        out.flush(); out.close();
        System.out.println(name);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }
}

web.xml 配置

<servlet>
    <servlet-name>Ajax1Servlet</servlet-name>
    <servlet-class>com.swu.ajax.Ajax1Servlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Ajax1Servlet</servlet-name>
    <url-pattern>/ajax1</url-pattern>
</servlet-mapping>

5. 測試驗證

部署至 Tomcat，瀏覽器訪問 https://localhost:8080/ajax/ajax1.jsp，點擊觸發 Ajax，彈窗顯示 Hello lzhp，控制台輸出 lzhp，實現無刷新交互。