本文主要講解關于Ajax基礎和案例教程第4講的內容。在這一講中，我們將學習如何使用Ajax來實現動態更新頁面的功能。通過Ajax，我們可以在不刷新整個頁面的情況下，向服務器發送請求，并獲取返回的數據進行頁面的局部更新。下面我們將通過一些具體的案例來說明Ajax的基本用法和使用場景。
首先，讓我們來看一個簡單的例子。假設我們有一個網頁上有一個按鈕，點擊該按鈕可以向服務器發送一個請求，并將獲取到的數據顯示在頁面上。使用傳統的方式，當我們點擊按鈕時，會觸發頁面的刷新，整個頁面都會重新加載一次。但是，使用Ajax就可以避免這種情況發生。下面是相關的代碼示例：
```
// HTML代碼// JavaScript代碼
document.getElementById('btn').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'https://example.com/data', true);
xhr.send();
});
```在這個例子中，當按鈕被點擊時，JavaScript代碼會創建一個XMLHttpRequest對象，并設置它的readyStateChange事件的處理函數。該函數會在請求的狀態變化時被調用，我們通過判斷readyState是否為4（即請求已完成）和status是否為200（即請求成功）來確定請求是否完成。如果請求成功，我們將從服務器返回的數據通過innerHTML方法添加到頁面上的
除了基本的GET請求，Ajax還支持POST請求，可以用于向服務器提交數據。下面是一個POST請求的例子：
``` // HTML代碼// JavaScript代碼 document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表單的默認提交行為 var name = document.getElementById('name').value; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('result').innerHTML = xhr.responseText; } }; xhr.open('POST', 'https://example.com/submit', true); xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send('name=' + encodeURIComponent(name)); }); ```
在這個例子中，我們使用了一個表單來提交數據。當表單被提交時，我們阻止了默認的提交行為，并獲取了輸入框中的值。然后，我們創建了一個XMLHttpRequest對象，并設置了處理函數。在發送POST請求時，我們需要通過setRequestHeader方法設置請求頭，用來告訴服務器請求體的類型是表單數據。最后，我們通過send方法將數據發送給服務器。
通過以上的例子，我們可以看到Ajax的基本用法。它使得我們可以在不刷新整個頁面的情況下，與服務器進行交互，獲取到數據，并進行局部更新。這為我們的網頁帶來了更好的用戶體驗。在實際應用中，Ajax廣泛應用于各種場景，比如頁面的無刷新加載、表單提交、實時搜索等等。希望通過本文的介紹，你對Ajax的基礎知識已經有了一定的了解，并能夠在實踐中靈活運用。