在網頁開發中，我們經常需要實現上下題目的切換功能。傳統的方式是通過刷新頁面或者使用頁面鏈接來實現，但是這樣會導致頁面加載時間過長，用戶體驗不佳。而利用Ajax技術，我們可以實現無刷新切換題目的效果，提升用戶體驗。 舉個例子來說明，假設我們有一個在線考試系統，頁面上顯示當前題目和選項。傳統的方式是每次點擊下一題或者上一題按鈕時，都會加載一個新的頁面，這樣會導致頁面重新渲染，加載時間過長。而使用Ajax技術，我們可以在不刷新頁面的情況下，只改變題目和選項的內容，讓用戶可以快速切換題目。 首先，我們需要在頁面中添加一個用于顯示題目和選項的區域，比如一個div元素。然后，在頁面加載完成時，通過Ajax技術向后臺請求獲取第一題的數據，并將數據渲染到題目區域。 下面是一個簡單的示例代碼：

<div id="questionArea">
<p id="question"></p>
<ul id="options">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 頁面加載完成時，通過Ajax請求獲取第一題的數據，并渲染到題目區域
window.onload = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var questionData = JSON.parse(xhr.responseText);
renderQuestion(questionData);
}
};
xhr.open("GET", "/api/questions/1", true);
xhr.send();
};
// 渲染題目和選項的函數
function renderQuestion(questionData) {
var questionElem = document.getElementById("question");
questionElem.innerHTML = questionData.question;
var optionsElem = document.getElementById("options");
optionsElem.innerHTML = "";
questionData.options.forEach(function(option) {
var liElem = document.createElement("li");
liElem.innerHTML = option;
optionsElem.appendChild(liElem);
});
}
</script>

上述代碼中，我們通過使用XMLHttpRequest對象來發送Ajax請求，并通過onreadystatechange事件監聽請求的狀態。當請求狀態為4（完成）且請求狀態碼為200（成功）時，說明我們成功獲取到了題目的數據，通過解析JSON數據并調用renderQuestion函數來渲染題目和選項。 接下來，我們需要實現上一題和下一題的切換功能。通過監聽上一題和下一題按鈕的點擊事件，我們可以在按鈕點擊時向后臺發送Ajax請求，獲取上一題或者下一題的數據，并將數據渲染到題目區域。 下面是修改后的示例代碼：

<button id="prevBtn">上一題</button>
<button id="nextBtn">下一題</button>
<script>
var currentQuestionId = 1;
// 上一題按鈕點擊事件
document.getElementById("prevBtn").onclick = function() {
if (currentQuestionId >1) {
currentQuestionId--;
getQuestionData(currentQuestionId);
}
};
// 下一題按鈕點擊事件
document.getElementById("nextBtn").onclick = function() {
currentQuestionId++;
getQuestionData(currentQuestionId);
};
// 發送Ajax請求獲取題目數據
function getQuestionData(questionId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var questionData = JSON.parse(xhr.responseText);
renderQuestion(questionData);
}
};
xhr.open("GET", "/api/questions/" + questionId, true);
xhr.send();
}
// 渲染題目和選項的函數
function renderQuestion(questionData) {
var questionElem = document.getElementById("question");
questionElem.innerHTML = questionData.question;
var optionsElem = document.getElementById("options");
optionsElem.innerHTML = "";
questionData.options.forEach(function(option) {
var liElem = document.createElement("li");
liElem.innerHTML = option;
optionsElem.appendChild(liElem);
});
}
</script>

通過監聽上一題和下一題按鈕的點擊事件，我們可以獲取當前題目的id，然后向后臺發送Ajax請求，獲取上一題或者下一題的數據，并將數據渲染到題目區域。這樣用戶只需要點擊按鈕，就可以快速切換題目，無需頁面刷新，提升了用戶體驗。 通過上述示例，我們可以看到，利用Ajax技術可以實現無刷新切換題目的效果，加強了用戶與系統的互動體驗。在實際應用中，我們可以根據具體需求進行功能的擴展和優化，以適應不同場景的需求。