Ajax不是一種技術，而是一個編程概念。HTML 和 CSS 可以組合使用來標記和設置信息樣式。JavaScript 可以修改網頁以動態顯示，并允許用戶與新信息進行交互。內置的 XMLHttpRequest 對象用于在網頁上執行 Ajax，允許網站將內容加載到屏幕上而無需刷新頁面。Ajax不是一種新技術，也不是一種新語言。相反，它是以新方式使用的現有技術。
在創造“Ajax”一詞的文章中， 杰西·詹姆斯·加勒特解釋說，以下技術被整合在一起：
- 用于演示的HTML（或 XHTML）和 CSS
- 文檔對象模型（DOM），用于動態顯示數據并與之交互
- 用于數據交換的 JSON 或 XML，以及用于 XML 操作的 XSLT
- 用于異步通信的XMLHttpRequest對象
- 將這些技術結合在一起的JavaScript
下面為你介紹 AJAX 的基礎應用，我會通過原生 JavaScript 和 Fetch API 兩種方式來實現一個簡單的示例。
1.?原生 XMLHttpRequest 方式
步驟解析：
- 創建 XMLHttpRequest 對象。
- 打開與服務器的連接。
- 監聽請求狀態的變化。
- 發送請求。
- 處理響應數據。
示例代碼：
// 創建XMLHttpRequest對象
const xhr = new XMLHttpRequest();// 配置請求（以GET請求為例）
xhr.open('GET', 'https://api.example.com/data', true);// 監聽狀態變化
xhr.onreadystatechange = function() {if (xhr.readyState === 4) { // 請求已完成if (xhr.status === 200) { // 請求成功console.log('響應數據:', xhr.responseText);} else {console.error('請求失敗，狀態碼:', xhr.status);}}
};// 發送請求
xhr.send();2.?Fetch API 方式（現代方法）
步驟解析：
- 使用 fetch () 函數發起請求。
- 處理 Promise 對象。
- 將響應數據解析為 JSON 格式。
- 處理解析后的數據。
示例代碼：
// 發起GET請求
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('HTTP錯誤，狀態碼：' + response.status);}return response.json(); // 解析JSON數據}).then(data => {console.log('響應數據:', data);}).catch(error => {console.error('請求出錯:', error);});3.?實際應用示例
下面是一個結合 HTML 和 Fetch API 的完整示例，它能夠從 GitHub API 獲取用戶信息并展示出來：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>AJAX示例</title>
</head>
<body><button id="fetchData">獲取GitHub用戶信息</button><div id="result"></div><script>document.getElementById('fetchData').addEventListener('click', function() {// 使用Fetch API發送請求fetch('https://api.github.com/users/octocat').then(response => response.json()).then(data => {// 處理返回的數據const resultDiv = document.getElementById('result');resultDiv.innerHTML = `<h3>${data.login}</h3><img src="${data.avatar_url}" alt="Avatar" width="100"><p>關注者: ${data.followers}</p><p>倉庫數量: ${data.public_repos}</p>`;}).catch(error => {console.error('請求出錯:', error);document.getElementById('result').innerHTML = '獲取數據失敗';});});</script>
</body>
</html>
4.?關鍵要點提醒
- 跨域請求：由于瀏覽器的同源策略限制，AJAX 通常只能向同源的服務器發送請求。不過，可以通過 CORS（跨域資源共享）或者 JSONP 來解決跨域問題。
- 錯誤處理：在實際應用中，必須對網絡錯誤、超時等異常情況進行處理。
- 請求方法：支持 GET、POST、PUT、DELETE 等多種 HTTP 請求方法。
- 數據格式：常見的數據格式有 JSON、XML、純文本等。
通過上述示例，你可以實現簡單的 AJAX 請求。在實際的項目開發中，建議使用 axios 等第三方庫，它能提供更強大的功能和更友好的 API。
)
