隨著網站越來越複雜並且需要更高的使用者體驗，AJAX（Asynchronous JavaScript and XML）技術已經成為網站前端開發必不可少的技能之一。它允許您透過JavaScript向伺服器發送請求，同時不會使整個頁面重新載入。這使得網站更快，更平滑，用戶不會感到任何中斷的感覺。本文將介紹如何在JavaScript中使用AJAX並保持頁面不刷新。
在Javascript中使用AJAX需要使用XMLHttpRequest對象，因為它是執行非同步請求的核心。 XMLHttpRequest對像是一個內建的JavaScript對象，通常簡稱為XHR。它提供了透過HTTP協定進行非同步請求的API，使得我們可以在不刷新整個頁面的情況下取得伺服器回應，處理請求和更新網頁。
下面是一個簡單的使用XHR進行請求的範例：
let request = new XMLHttpRequest();
request.open('GET', '/api/data', true);
request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200) {
let response = JSON.parse(request.responseText);
// 处理响应并更新页面
}
};
request.send();在上面的程式碼中，我們建立了一個XMLHttpRequest物件實例，並使用open()方法開啟了一個GET請求。開啟GET請求後，我們為onreadystatechange事件設定了一個處理函數，它會在XHR物件的readyState屬性改變時被調用，並檢查伺服器回應的狀態碼是否為200。如果一切順利，我們解析回應文字（通常是JSON格式）並在頁面上更新相關的資料。
如果您使用jQuery的話，那麼它會在底層抽像出更簡化的API來使用AJAX。下面是一個完整的jQuery AJAX的範例：
$.ajax({
url: '/api/data',
type: 'GET',
dataType: 'json',
success: function(data) {
// 成功后更新页面
}
});在上面的程式碼中，我們使用jQuery的$.ajax()方法發送了一個GET請求，並在成功時執行了一個處理函數。與使用XMLHttpRequest物件類似，我們可以在success函數中更新頁面內容。
一旦您的AJAX請求成功回傳回應，您可能想要使用JavaScript來更新頁面上的內容以反映新的資料。以下是一個簡單的範例：
function updatePage(response) {
let div = document.getElementById('data-display');
let html = '';
response.forEach(function(item) {
html += '<div>' + item.name + '</div>';
});
div.innerHTML = html;
}在上面的程式碼中，我們定義了一個updatePage()函數來更新頁面內容。它首先找到ID為「data-display」的div元素，並在內部建立一個HTML字串，然後將該字串設定為該元素的innerHTML。
由於AJAX是非同步執行的，使用者可能會不斷地啟動多個相同或不同的請求，這將使這些請求大量交錯，而導致並發問題和伺服器負載過大。因此，在發送AJAX請求時，我們應該注意避免重複請求。
一種避免重複請求的方法是使用標記（或標誌）變數來檢查先前的請求是否已完成。例如：
let requesting = false;
function makeRequest() {
if(requesting) {
return;
}
requesting = true;
$.ajax({
url: '/api/data',
type: 'GET',
dataType: 'json',
success: function(data) {
updatePage(data);
},
complete: function() {
requesting = false;
}
});
}在上述程式碼中，我們使用變數「requesting」來識別一個請求是否已經發出。為了避免多次請求，我們在開始發送請求之前首先檢查該變數的狀態。如果變數為true，則傳回並不再發送新的請求。如果請求成功或失敗，我們在complete回呼函數中將變數重新設定為false，以便允許新的請求。
AJAX最常用的場景之一是透過動態表單提交數據，並在不刷新整個頁面的情況下取得伺服器回應。以下是一個使用jQuery實作動態表單的範例：
<form id="my-form">
<input type="text" id="name" name="name" placeholder="Your name">
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script type="text/javascript">
$("#my-form").submit(function(e) {
e.preventDefault();
let $form = $(this);
let url = $form.attr('action');
let formData = $form.serialize();
$.ajax({
type: "POST",
url: url,
data: formData,
dataType: 'json',
success: function(response) {
$('#result').html("Thank you, " + response.name + "!");
}
});
});
</script>在上面的程式碼中，我們定義了一個表單，並為其綁定了一個submit事件。當使用者提交表單時，我們使用serialize()方法來收集表單數據，並將其作為AJAX請求的資料傳送到伺服器。如果伺服器成功處理並傳回JSON回應，則我們在頁面上使用response中的資料更新一個ID為「result」的div元素。
結論
如您所看到的，AJAX使得向伺服器發送和接收資料變得更容易並且更加自如。本文介紹如何在Javascript中使用AJAX來發送非同步請求，並在不刷新整個頁面的情況下更新內容。最後我們討論如何避免重複請求以及實作動態表單提交。 AJAX是非常有用的技術，它可以讓您的網站更快、更流暢，並且將大大提高用戶體驗。
以上是如何在JavaScript中使用AJAX並保持頁面不刷新的詳細內容。更多資訊請關注PHP中文網其他相關文章！
