本文主要討論了使用Ajax加載新數據，并且請求成功的情況。Ajax是一種用于在不重新加載整個網頁的情況下更新網頁的技術，它可以向服務器發送請求并接收響應，然后使用JavaScript來修改網頁的內容。當我們需要在網頁上動態加載新的數據時，使用Ajax可以有效地減少用戶等待時間，并提供更好的用戶體驗。

舉一個例子來說明這個情況。假設我們有一個電商網站，當用戶在商品列表上滾動到底部時，我們希望自動加載更多的商品。在傳統的方式下，當用戶滾動到底部時，網頁會重新加載并顯示更多的商品，這會給用戶帶來不必要的等待時間。而使用Ajax，我們可以在用戶滾動到底部時向服務器發送請求，并在請求成功后使用JavaScript將新的商品添加到商品列表中，用戶可以立即看到新的商品，不需要等待整個頁面重新加載。

<script>
function loadMoreProducts() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/products?page=2', true);
xhr.onload = function() {
if (xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
for (var i = 0; i < products.length; i++) {
// 添加新的商品到商品列表
var product = document.createElement('div');
product.textContent = products[i].name;
document.getElementById('product-list').appendChild(product);
}
}
};
xhr.send();
}
</script>

在上面的例子中，我們定義了一個函數loadMoreProducts()用于加載更多的商品。當用戶滾動到底部時，我們可以通過調用loadMoreProducts()函數來觸發新的請求。函數內部我們使用了XMLHttpRequest對象來創建請求并發送給服務器。在請求完成后，我們檢查響應的狀態碼，如果狀態碼為200（表示請求成功），我們解析響應的JSON數據，然后通過JavaScript將新的商品添加到指定的元素中。這樣用戶就可以立即看到新的商品，而無需刷新整個頁面。

Ajax技術的另一個優勢是可以實現異步加載數據。以電商網站為例，當用戶添加商品到購物車時，我們希望能夠在不刷新整個頁面的情況下更新購物車的數量。這時，我們可以使用Ajax來發送請求并更新購物車的數量，而無需影響用戶當前瀏覽的頁面。

<script>
function addToCart(productId) {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'example.com/cart/add', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById('cart-count').textContent = response.count;
}
};
xhr.send('productId=' + encodeURIComponent(productId));
}
</script>

上面的代碼片段展示了如何使用Ajax來異步更新購物車的數量。當用戶點擊“添加到購物車”按鈕時，我們調用addToCart()函數并傳遞商品的ID作為參數。函數內部我們創建一個XMLHttpRequest對象并向服務器發送POST請求來添加商品到購物車。在請求成功后，我們解析響應的JSON數據，然后將購物車的數量更新到指定的元素中。這樣用戶就可以立即看到購物車的數量變化，而無需等待整個頁面的刷新。

通過使用Ajax加載新的數據并請求成功，我們可以大大提高網頁的響應速度和用戶體驗。無論是動態加載商品、實時更新數據還是異步請求服務器，Ajax都可以幫助我們更好地構建交互性更強的網頁。