AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下，發(fā)送異步請求和更新頁面的技術(shù)。通過AJAX，網(wǎng)頁可以實(shí)現(xiàn)實(shí)時更新數(shù)據(jù)、交互性強(qiáng)的功能，提升用戶體驗(yàn)。在本文中，我們將探討如何使用AJAX發(fā)送請求到本身頁面，并展示一些實(shí)際的應(yīng)用示例。

首先，讓我們來看一個簡單的例子：一個包含一個按鈕的頁面。當(dāng)用戶點(diǎn)擊該按鈕時，通過AJAX發(fā)送請求到本身頁面，獲取一條隨機(jī)的名言警句并在頁面上展示。

點(diǎn)擊獲取名言警句

// JavaScript代碼
const quoteButton = document.getElementById('quoteButton');
const quoteDiv = document.getElementById('quote');
quoteButton.addEventListener('click', () =>{
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
quoteDiv.innerText = xhr.responseText;
}
};
xhr.open('GET', '本頁面URL', true);
xhr.send();
});

在上面的例子中，我們使用JavaScript監(jiān)聽按鈕的點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時，創(chuàng)建一個XMLHttpRequest對象，然后通過AJAX發(fā)送一個GET請求到本頁面的URL。當(dāng)請求成功返回時，我們通過修改名言警句的div元素的innerText屬性，將返回的數(shù)據(jù)顯示在頁面上。

除了獲取數(shù)據(jù)外，我們還可以通過AJAX發(fā)送數(shù)據(jù)到本頁面進(jìn)行處理。比如，一個頁面中有一個待辦事項(xiàng)列表，用戶可以點(diǎn)擊其中一項(xiàng)事項(xiàng)標(biāo)記為已完成，然后通過AJAX將這個狀態(tài)更新到服務(wù)器。下面是一個示例：

任務(wù)1
任務(wù)2
任務(wù)3

// JavaScript代碼
const todoList = document.getElementById('todoList');
todoList.addEventListener('click', (event) =>{
if (event.target.tagName === 'LI') {
const completedTask = event.target;
completedTask.classList.toggle('completed'); // 標(biāo)記為已完成
const xhr = new XMLHttpRequest();
xhr.open('POST', '本頁面URL', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(`task=${completedTask.innerText}&completed=true`);
}
});

在上述例子中，我們通過監(jiān)聽待辦事項(xiàng)列表的點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊某一項(xiàng)時，我們修改該項(xiàng)的class，將其標(biāo)記為已完成（通過添加一個名為"completed"的class）。然后，我們創(chuàng)建一個XMLHttpRequest對象，設(shè)置請求方法為POST，將待辦事項(xiàng)的任務(wù)名稱和狀態(tài)發(fā)送至本頁面。通過設(shè)置請求頭的Content-type為"application/x-www-form-urlencoded"，我們可以在服務(wù)器端方便地獲取這些數(shù)據(jù)并進(jìn)行相應(yīng)的處理。

總的來說，AJAX可以讓我們實(shí)現(xiàn)更加交互性的頁面效果和功能，而無需刷新整個頁面。通過發(fā)送請求到本頁面，我們可以獲取和處理數(shù)據(jù)，使頁面內(nèi)容更加實(shí)時和動態(tài)。希望本文對你理解AJAX發(fā)送請求到本身頁面有所幫助。