AJAX(Asynchronous JavaScript and XML)是一種用于創建異步網絡請求的技術。在傳統的 Web 頁面中,當我們點擊或提交表單時,頁面會刷新并重新加載所有內容。相比之下,使用 AJAX 技術可以在不刷新整個頁面的情況下,向服務器發送請求并獲取響應,從而提供更好的用戶體驗。在 AJAX 中,默認情況下異步操作是啟用的,也就是說,請求被發送出去后,JavaScript 會繼續執行,而不會等待服務器返回結果。本文將探討 AJAX 異步請求的默認行為并通過示例說明。
假設我們正在開發一個電子商務網站,并希望在用戶點擊“添加到購物車”按鈕時,將商品添加到購物車中,并在頁面上展示出來。此時,我們可以通過 AJAX 發送異步請求來實現這個功能。
const addToCart = async (item) =>{ try { const response = await fetch('/api/addToCart', { method: 'POST', body: JSON.stringify(item), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); // 更新購物車數量 document.getElementById('cart-count').textContent = data.cartCount; // 顯示成功提示 document.getElementById('success-message').textContent = '商品已成功添加到購物車!'; } catch (error) { // 處理錯誤 console.error(error); } }; document.getElementById('add-to-cart-button').addEventListener('click', () =>{ const item = { id: 1, name: '商品A', price: 100 }; addToCart(item); });
在上面的代碼中,我們定義了一個名為 addToCart 的異步函數,它接受一個商品對象作為參數。當用戶點擊“添加到購物車”按鈕時,我們創建一個包含商品信息的 JSON 對象,并使用 fetch 函數發送 POST 請求到服務器上的 /api/addToCart 路徑。由于該請求是異步的,默認情況下,JavaScript 不會等待服務器響應完成就會繼續執行下面的代碼。
然后,我們使用 await 關鍵字等待服務器響應返回,并將響應轉換為 JSON 格式的數據。接下來,我們利用獲取到的數據更新購物車數量以及在頁面上顯示成功的提示信息。如果在異步請求過程中出現錯誤,我們可以通過 catch 語句捕獲錯誤并進行處理。
使用 AJAX 技術的異步請求默認是非阻塞的,這意味著當一個請求被發送出去后,JavaScript 不會停止執行,而是繼續執行后面的代碼。這樣可以避免在等待服務器響應時阻塞頁面,從而提高用戶體驗。
總結來說,AJAX 中異步請求的默認行為是啟用的。這意味著當我們發送一個異步請求時,JavaScript 會繼續執行后面的代碼,而不會等待服務器返回響應。這樣可以提高頁面的響應速度和用戶體驗。然而,在某些情況下,我們可能需要等待服務器響應完成后再執行特定的操作,這時可以使用 await 關鍵字以及異步函數來實現。