AJAX編程 教學課程

上門編程教學課程內容

課程簡介

本課程專為希望快速掌握 AJAX（Asynchronous JavaScript and XML） 技術的學員設計，三小時內帶你理解 AJAX 的運作原理、前後端資料傳遞流程，並實作即時資料更新的互動式網頁應用。

AJAX 是現代 Web 開發的核心技術之一，可在不重新載入整個網頁的情況下與伺服器交換資料，廣泛應用於 表單驗證、即時查詢、自動更新內容、SPA 架構 等各類網站。
課程將以理論與實作結合方式，帶領學員從基礎語法、非同步通訊流程到實際與伺服器 API 整合，建立能動態顯示與更新資料的前端互動頁面。

 

適合對象：

• 初學前端程式設計（HTML / CSS / JavaScript）者

• 想從靜態頁面進階到互動型應用的開發者

• 想了解 API 資料串接與 Web 非同步運作機制者

• 全端入門學員，希望理解前後端資料交換概念

學習成果：

• 理解 AJAX 非同步通訊流程與技術原理

• 能以原生 JavaScript 與 XMLHttpRequest 建立 AJAX 請求

• 熟悉 JSON 資料格式與伺服器回應處理

• 掌握 Fetch API 使用與 async/await 寫法

• 能整合 AJAX 與 API 建立即時更新網頁介面

---

 

課程時長

3 小時（180 分鐘）
理論講解與實作練習比例約 3 : 7

---

 

課程大綱

第一部份：AJAX 概論與原理基礎（30 分鐘）

• 傳統頁面載入 vs AJAX 非同步更新原理

• AJAX 的組成技術（JavaScript、XMLHttpRequest、DOM、JSON）

• 與同步請求的比較：效能與使用者體驗

• 後端 API 與 REST 架構的簡介

• 實作：使用 XMLHttpRequest 建立第一個 AJAX 請求

---

第二部份：XMLHttpRequest 實作與流程（40 分鐘）

• 建立請求物件（new XMLHttpRequest()）

• readyState、status、responseText 詳解

• 處理伺服器回應與狀態監控

• GET 與 POST 請求差異與應用

• 實作練習：建立「即時查詢使用者資料」功能

---

第三部份：JSON 與 AJAX 資料解析（40 分鐘）

• 認識 JSON 格式與語法結構

• 伺服器回傳 JSON 的解析 (JSON.parse / JSON.stringify)

• 整合 AJAX 與資料呈現（DOM 動態更新）

• 使用錯誤處理（try / catch）與狀態提示

• 實作範例：AJAX 抓取即時天氣或產品清單

---

第四部份：現代化 AJAX — Fetch API 與非同步處理（40 分鐘）

• Fetch API 語法與概念：fetch(url).then()

• Promise 機制與鏈式非同步處理

• async / await 語法簡化非同步請求

• 錯誤捕捉（.catch()）與狀態控制（loading, error）

• 實作練習：使用 Fetch API 建立「即時留言牆」

---

第五部份：綜合應用與延伸整合（30 分鐘）

• AJAX + 後端 API 整合流程（Node.js / PHP 範例介紹）

• 跨域（CORS）問題與安全性原理

• AJAX 在框架中的應用（React / Vue / jQuery AJAX 比較）

• 延伸學習方向：WebSocket、GraphQL、SPA 架構

• 綜合實作：製作「即時商品搜尋系統」

---

 

課程特色

• 三小時快速掌握 AJAX 基礎邏輯與非同步程式設計概念。

• 理論搭配多項實作，課堂即可完成動態前端應用。

• 涵蓋原生 API 與現代 Fetch / Async 應用，兼顧新舊環境。

• 為學習 React、Vue、Node.js 或 WebSocket 打下堅實基礎。