XMLHttpRequest 標準 API
方法
| 方法 | 描述 |
|---|
abort() | 終止當前請求 |
getAllResponseHeaders() | 返回所有響應頭的鍵值對字串 |
getResponseHeader(header) | 返回指定響應頭的值 |
open(method, url, async, user, password) | 初始化請求。method: GET/POST/PUT；url: 相對/絕對路徑；async: 是否異步（預設 true）；user/password: 認證憑證 |
send(body) | 發送請求。body 可為字串、Document、FormData、Blob 等 |
setRequestHeader(header, value) | 設置請求頭。必須在 open() 之後、send() 之前調用 |
屬性
| 屬性 | 描述 |
|---|
onreadystatechange | 就緒狀態改變事件處理器，通常綁定回調函數 |
readyState | 請求狀態：0=未初始化、1=載入中、2=已載入、3=交互中、4=完成 |
responseText | 響應體文本內容 |
responseXML | 響應體解析為 XML Document 物件 |
status | HTTP 狀態碼（200, 404, 500 等） |
statusText | HTTP 狀態文本（OK, Not Found 等） |
典型使用範例
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
XML DOM 節點遍歷屬性
| 屬性 | 描述 |
|---|
childNodes | 返回所有子節點的 NodeList（即時集合） |
firstChild | 第一個子節點 |
lastChild | 最後一個子節點 |
nextSibling | 下一個同級節點 |
nodeValue | 節點的文本值（可讀寫） |
parentNode | 父節點 |
previousSibling | 上一個同級節點 |
XML DOM 節點操作方法
| 方法 | 描述 |
|---|
document.getElementById(id) | 根據 ID 獲取元素（僅 Document） |
element.getElementsByTagName(name) | 獲取指定標籤名的後代元素集合 |
element.hasChildNodes() | 是否有子節點，返回 Boolean |
element.getAttribute(name) | 獲取屬性值 |
element.setAttribute(name, value) | 設置屬性值 |
element.removeAttribute(name) | 移除屬性 |
動態建立內容：W3C DOM 建構 API
| 方法/屬性 | 描述 |
|---|
document.createElement(tagName) | 創建元素節點 |
document.createTextNode(text) | 創建文本節點 |
parent.appendChild(child) | 將子節點加入父節點末尾 |
parent.insertBefore(newNode, refNode) | 在參考節點前插入新節點 |
parent.replaceChild(newNode, oldNode) | 替換子節點 |
parent.removeChild(child) | 移除子節點 |
element.setAttribute(name, value) | 設置元素屬性 |
element.removeAttribute(name) | 移除元素屬性 |
動態建立表單選項範例
var select = document.getElementById('mySelect');
var option = document.createElement('option');
option.value = 'val1';
option.textContent = '選項一';
select.appendChild(option);
實用提示
responseXML 需響應 Content-Type: text/xml 或 application/xml 才會自動解析- 跨域請求需伺服器支援 CORS（
Access-Control-Allow-Origin）
- 現代開發建議使用
fetch() 或 axios 等 Promise 基礎的封裝
- DOM 操作頻繁時，使用
DocumentFragment 批次掛載減少回流
