What is it?
XML(XMLHttpRequest) 是瀏覽器提供的一種用于前端頁面和后端服務器進行異步通信的編程接口。它允許在不重新加載整個頁面的情況下，與服務器交換數據并更新部分頁面內容，是 AJAX 技術的核心。
What is it used for?
- 異步請求：在不阻塞頁面渲染的情況下，向服務器發送請求并接收響應。
- 局部更新：獲取數據后，通過 JavaScript 更新頁面部分內容。
- 數據交互：支持多種數據格式（XML、JSON、表單數據等）的發送和接收。
How to use it?
<!DOCTYPE html>
<html>
<head><meta charset="uft-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>XHR 實踐案例</title><style>body {font-family: Arial, Helvetica, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;}.container {text-align: center;padding: 20px;}button {padding: 10px 20px;font-size: 16px;cursor: pointer;background-color: green;color: white;border: none;border-radius: 5px;}button:hover {background-color: aquamarine;}.user-data {margin-top: 20px;padding: 20px;border: 1px solid red;border-radius: 5px;display: none;}.error {color: red;margin-top: 20px;display: none;}.loading {margin-top: 20px;display: none;}</style>
</head>
<body><div class="container"><h1>用戶數據查詢</h1><button id="fetchUserBtn">獲取用戶信息</button><div class="loading" id="loading">加載中...</div><div class="user-data" id="userData"></div><div class="error" id="errorMsg"></div></div><script>// 獲取 DOM 元素const fetchBtn = document.getElementById('fetchUserBtn');const userDataDiv = document.getElementById('userData');const errorMsgDiv = document.getElementById('errorMsg');const loadingDiv = document.getElementById('loading');// 綁定按鈕點擊事件fetchBtn.addEventListener('click', fetchUserData);// 使用 XMLHttpRequest 對象獲取用戶數據function fetchUserData() {// 重置狀態userDataDiv.style.display = 'none';errorMsgDiv.style.display = 'none';loadingDiv.style.display = 'block';// 1. 創建 XMLHttpRequest 對象const xhr = new XMLHttpRequest();// 2. 配置一個 get 請求xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');// 3. 設置請求頭 （可選，get 請求通常不需要）xhr.setRequestHeader('Content-Type', 'application/json');// 4. 監聽請求狀態的變化xhr.onreadystatechange = function() {// readyState 的值為4表示請求完成if (xhr.readyState === 4) {// 隱藏 loading 元素loadingDiv.style.display = 'none';// 判斷請求是否成功if (xhr.status === 200) {// 顯示用戶數據const user = JSON.parse(xhr.responseText);displayUserData(user);} else {// 顯示錯誤信息showErrorMsg('獲取用戶信息失敗，請檢查網絡連接');}}};// 監聽網絡錯誤xhr.onerror = function() {loadingDiv.style.display = 'none';showErrorMsg('網絡錯誤，請檢查網絡連接');};// 設置超時時間xhr.timeout = 5000;xhr.ontimeout = function() {loadingDiv.style.display = 'none';showErrorMsg('請求超時，請檢查網絡連接');}// 5. 發送請求,get 請求不需要請求體xhr.send(null);}// 顯示用戶數據function displayUserData(user) {userDataDiv.innerHTML = `<h2>用戶信息</h2><p>ID: ${user.id}</p><p>名字: ${user.name}</p><p>郵箱: ${user.email}</p><p>電話: ${user.phone}</p><p>地址: ${user.address.street}, ${user.address.suite}, ${user.address.city}, ${user.address.zipcode}</p><p>公司: ${user.company.name}, ${user.company.catchPhrase}, ${user.company.bs}</p>`;userDataDiv.style.display = 'block';}// 顯示錯誤信息function showErrorMsg(msg) {errorMsgDiv.innerHTML = msg;errorMsgDiv.style.display = 'block';}</script>
</body></html>
)
![【線性代數基礎 | 那忘算9】基爾霍夫（拉普拉斯）矩陣 矩陣—樹定理證明 [詳細推導]](http://pic.xiahunao.cn/【線性代數基礎 | 那忘算9】基爾霍夫（拉普拉斯）矩陣 矩陣—樹定理證明 [詳細推導])
