在傳統(tǒng)的Web開發(fā)中，當(dāng)用戶觸發(fā)某個事件（如點擊按鈕）時，需要向服務(wù)器發(fā)送一個請求，然后整個頁面會刷新并重新加載，最后顯示服務(wù)器返回的數(shù)據(jù)。舉個例子，假設(shè)我們正在一個社交媒體的網(wǎng)頁上，每當(dāng)我們想要查看最新的動態(tài)時，需要點擊"刷新"按鈕，整個頁面會重新加載，包括頂部導(dǎo)航欄、側(cè)邊欄和底部版權(quán)信息等。這種方式不僅影響用戶體驗，而且會消耗大量的網(wǎng)絡(luò)流量和服務(wù)器資源。
而有了AJAX技術(shù)，我們可以實現(xiàn)在不刷新整個頁面的情況下，只更新需要變動的部分內(nèi)容。舉個例子，假設(shè)我們現(xiàn)在只希望在社交媒體網(wǎng)頁中更新動態(tài)列表的內(nèi)容，而不需要刷新整個頁面。我們可以通過AJAX向服務(wù)器發(fā)送異步請求，獲取最新的動態(tài)數(shù)據(jù)，并使用JavaScript將這些數(shù)據(jù)插入到頁面的動態(tài)列表中。
// 使用AJAX發(fā)送GET請求
function getLatestPosts() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var posts = response.posts;
// 更新動態(tài)列表
posts.forEach(function(post) {
var li = document.createElement('li');
li.textContent = post.content;
document.getElementById('posts-list').appendChild(li);
});
}
};
xhr.send();
}上面的代碼演示了一個簡單的AJAX GET請求。當(dāng)我們調(diào)用getLatestPosts()函數(shù)時，它會創(chuàng)建一個XMLHttpRequest對象，并通過xhr.open()方法指定GET請求的URL和是否異步。然后，通過xhr.onreadystatechange事件監(jiān)聽器，我們可以在請求狀態(tài)改變時進(jìn)行相應(yīng)的處理。當(dāng)請求的狀態(tài)為4（即操作已完成）并且狀態(tài)碼為200（即請求成功）時，我們會解析服務(wù)器返回的JSON數(shù)據(jù)，并將動態(tài)列表中的每一項進(jìn)行替換。
AJAX并不僅僅限于處理GET請求，它同樣可以處理POST、PUT、DELETE等各種類型的HTTP請求。舉個例子，我們可以使用AJAX異步發(fā)送一個POST請求來創(chuàng)建一條新的動態(tài)。
// 使用AJAX發(fā)送POST請求
function createPost(content) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 201) {
var response = JSON.parse(xhr.responseText);
// 創(chuàng)建成功后的處理邏輯
}
};
xhr.send(JSON.stringify({ content: content }));
}上述代碼中，createPost()函數(shù)發(fā)送一個POST請求來創(chuàng)建一條新的動態(tài)。我們通過xhr.setRequestHeader()方法設(shè)置請求頭，將Content-Type設(shè)置為application/json，以便服務(wù)器知道我們發(fā)送的是JSON格式的數(shù)據(jù)。然后，我們將需要創(chuàng)建的動態(tài)內(nèi)容通過JSON.stringify()方法轉(zhuǎn)化為JSON字符串，并通過xhr.send()方法發(fā)送到服務(wù)器。
AJAX不僅在社交媒體網(wǎng)站中有廣泛應(yīng)用，它同樣可以用于各種類型的應(yīng)用場景，如在線購物網(wǎng)站上添加商品到購物車，通過AJAX異步獲取和更新購物車數(shù)量；或者在搜索引擎中輸入關(guān)鍵詞時，AJAX根據(jù)輸入的關(guān)鍵詞實時獲取相關(guān)的搜索建議。AJAX的出現(xiàn)大大提升了Web應(yīng)用的交互性和實時性，促進(jìn)了現(xiàn)代Web開發(fā)的發(fā)展。
綜上所述，AJAX（Asynchronous JavaScript and XML）是一種實現(xiàn)異步通信的技術(shù)，通過JavaScript、XML和HTTP請求的結(jié)合，實現(xiàn)了在不刷新整個頁面的情況下更新部分網(wǎng)頁內(nèi)容的能力。AJAX的應(yīng)用廣泛，可以改善用戶體驗，提升Web應(yīng)用的交互性和實時性。它對于現(xiàn)代Web開發(fā)至關(guān)重要。