在現代的Web開發中，Ajax（Asynchronous JavaScript and XML）已經成為一個非常重要的技術。它可以實現與服務器進行異步通信，從而提高用戶體驗。本文將介紹如何使用Ajax接收text數據，并通過舉例來說明其實際應用。
在很多Web應用中，動態加載內容是非常常見的需求。比如，在一個社交媒體應用中，當用戶滾動到頁面底部的時候，我們希望自動加載更多的帖子。這時，我們可以使用Ajax來實現這個功能。
function loadMorePosts() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
// 處理響應數據
// ...
}
};
xhttp.open("GET", "get-posts.php", true);
xhttp.send();
}在上面的代碼中，我們創建了一個XMLHttpRequest對象，并設置了其onreadystatechange事件處理函數。當readyState的值變為4（請求已完成）且status的值為200（成功）時，我們可以通過responseText屬性獲取服務器返回的文本數據。
接下來，我們可以根據實際需求處理這個響應數據。比如，我們可以將新加載的帖子添加到頁面中：
function loadMorePosts() {
// ...
xhttp.onreadystatechange = function() {
// ...
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
var posts = JSON.parse(response);
for (var i = 0; i < posts.length; i++) {
var post = posts[i];
var postElement = document.createElement("div");
postElement.innerHTML = post.title;
document.getElementById("posts-container").appendChild(postElement);
}
}
};
// ...
}在上面的代碼中，我們將響應數據解析為一個JavaScript對象，并遍歷它的每一個元素。對于每一個帖子，我們創建一個新的
元素，并將帖子的標題設置為其innerHTML。最后，我們將這個
元素添加到頁面中的某個容器中（例如id為"posts-container"的元素）。
除了動態加載內容，Ajax還可以用于許多其他的場景。例如，我們可能需要向服務器發送一些數據，并根據服務器的響應來更新頁面狀態。假設我們正在開發一個在線購物應用，當用戶點擊“添加到購物車”按鈕時，我們需要將商品添加到購物車，并顯示當前購物車的總價。
function addToCart(productId) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = this.responseText;
var totalPrice = parseFloat(response);
document.getElementById("total-price").innerText = totalPrice.toFixed(2);
}
};
xhttp.open("POST", "add-to-cart.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("product_id=" + encodeURIComponent(productId));
}在上面的代碼中，我們通過POST方法向服務器發送了一個請求，數據為"product_id={productId}"（其中{productId}為實際商品的ID）。當請求完成時，我們將服務器返回的總價更新到頁面上的元素中（例如id為"total-price"的元素）。
總之，Ajax能夠方便地實現與服務器的異步通信。通過接收text數據，并對其進行適當的處理，我們可以實現更多豐富的Web應用功能，提升用戶體驗。