AJAX是一種用于在不刷新整個(gè)頁面的情況下，通過異步請求從服務(wù)器獲取數(shù)據(jù)的技術(shù)。在實(shí)際開發(fā)中，有時(shí)候我們需要同時(shí)執(zhí)行多個(gè)AJAX GET請求。本文將探討如何使用AJAX同時(shí)執(zhí)行兩個(gè)GET請求，并提供實(shí)際的代碼示例。

在某些情況下，同時(shí)執(zhí)行多個(gè)AJAX GET請求是非常有用的。例如，假設(shè)我們正在開發(fā)一個(gè)電子商務(wù)網(wǎng)站，我們需要從服務(wù)器獲取商品列表和用戶購物車的信息。為了提高用戶體驗(yàn)，我們可以同時(shí)發(fā)送兩個(gè)GET請求，以便在等待服務(wù)器響應(yīng)的同時(shí)顯示商品列表和購物車信息。

要實(shí)現(xiàn)同時(shí)執(zhí)行兩個(gè)AJAX GET請求，我們可以使用JavaScript的Promise對象。Promise對象是在ES6中引入的一種非常強(qiáng)大的處理異步操作的方式。我們可以使用Promise.all()方法來同時(shí)執(zhí)行多個(gè)異步操作，并等待它們?nèi)客瓿伞?/p>

<script>
function getProductList() {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/product/list', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.responseText);
} else if (xhr.readyState === 4 && xhr.status !== 200) {
reject(xhr.statusText);
}
};
xhr.send();
});
}
function getShoppingCart() {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/cart', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.responseText);
} else if (xhr.readyState === 4 && xhr.status !== 200) {
reject(xhr.statusText);
}
};
xhr.send();
});
}
Promise.all([getProductList(), getShoppingCart()])
.then(function(results) {
var productList = results[0];
var shoppingCart = results[1];
// 處理商品列表和購物車信息
document.getElementById('product-list').innerHTML = productList;
document.getElementById('shopping-cart').innerHTML = shoppingCart;
})
.catch(function(error) {
// 處理錯(cuò)誤
console.error(error);
});
</script>

在上面的代碼中，我們定義了兩個(gè)輔助函數(shù)getProductList()和getShoppingCart()，分別用于發(fā)送獲取商品列表和購物車信息的AJAX GET請求，并返回一個(gè)Promise對象。在Promise.all()方法中，我們同時(shí)執(zhí)行這兩個(gè)異步操作，并使用.then()方法來處理它們的結(jié)果。

執(zhí)行這段代碼后，我們將同時(shí)發(fā)送兩個(gè)GET請求，等待它們都完成后，.then()方法將被調(diào)用并傳入這兩個(gè)異步操作的結(jié)果。然后，我們可以在.then()方法中處理商品列表和購物車信息，將它們渲染到網(wǎng)頁上。

當(dāng)然，如果其中一個(gè)請求失敗，.catch()方法將被調(diào)用，并傳入錯(cuò)誤信息。我們可以在.catch()方法中進(jìn)行錯(cuò)誤處理，比如打印錯(cuò)誤日志。

綜上所述，同時(shí)執(zhí)行多個(gè)AJAX GET請求是非常有用的，可以提高網(wǎng)頁的加載速度和用戶體驗(yàn)。通過使用Promise對象，我們可以輕松地實(shí)現(xiàn)同時(shí)執(zhí)行多個(gè)異步操作，并等待它們?nèi)客瓿桑缓筇幚硭鼈兊慕Y(jié)果。希望本文能幫助您更深入地了解如何同時(shí)執(zhí)行多個(gè)AJAX GET請求。