在Web開發中，經常需要使用Ajax來實現異步加載數據和更新頁面的功能。然而在某些情況下，我們希望在Ajax請求完成后返回原來的頁面，并保持頁面的狀態和用戶的交互。本文將介紹如何利用Ajax返回原來的頁面，并通過舉例說明它的應用場景與實現方法。

舉個例子，假設我們有一個購物網站，用戶可以在商品詳情頁添加商品到購物車。當用戶點擊“添加到購物車”按鈕時，我們使用Ajax將商品加入購物車，并在頁面上顯示購物車中的商品數量。然而，我們希望用戶能夠在購物車頁面中查看更多的商品詳情，而不是添加完商品后跳轉到購物車頁面，因此我們需要在Ajax請求完成后返回原來的商品詳情頁。

// HTML
<button onclick="addToCart()">添加到購物車</button>
// JavaScript
function addToCart() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
alert("商品已成功添加到購物車！");
// 返回原來的頁面
history.go(-1);
}
};
xhttp.open("GET", "addToCart.php", true);
xhttp.send();
}

在上面的例子中，我們使用了XMLHttpRequest對象來發送Ajax請求。當請求成功完成時（readyState為4，status為200），我們彈出一個提示框告訴用戶商品已成功添加到購物車，并使用JavaScript的history對象返回上一個頁面（商品詳情頁）。

除了在購物網站中添加商品到購物車后返回原來的頁面，還有一些其他應用場景可以使用Ajax返回原來的頁面。例如，在一個社交分享網站中，用戶可以發表評論并查看其他用戶的評論。當用戶發表評論成功后，我們希望返回原來的頁面并保持用戶當前所在的位置。這時，我們可以使用Ajax將評論提交到服務器，然后更新評論列表，而不用刷新整個頁面。

// HTML
<form onsubmit="submitComment(event)">
<textarea name="comment"></textarea>
<button type="submit">發表評論</button>
</form>
<div id="comment-list">
<!-- 這里顯示評論列表 -->
</div>
// JavaScript
function submitComment(e) {
e.preventDefault();
let comment = document.querySelector("textarea[name='comment']").value;
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
alert("評論已成功發表！");
// 返回原來的頁面
history.go(-1);
}
};
xhttp.open("POST", "submitComment.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("comment=" + comment);
}

在上面的例子中，我們使用了XMLHttpRequest對象來發送帶有評論內容的Ajax請求。當請求成功完成時（readyState為4，status為200），我們彈出一個提示框告訴用戶評論已成功發表，并使用JavaScript的history對象返回上一個頁面（評論詳情頁）。

通過以上的例子我們可以看到，使用Ajax返回原來的頁面需要考慮以下幾個方面：

1. 需要確定在Ajax請求完成后要返回的頁面是哪個，可以使用JavaScript的history對象來實現頁面的返回。

2. 需要在Ajax請求發生之前處理用戶的交互，例如獲取表單的數據、驗證數據的有效性等。

3. 需要在Ajax請求成功后執行一些額外的操作，例如彈出提示框、更新頁面等。

綜上所述，通過使用Ajax返回原來的頁面，我們可以實現在不刷新整個頁面的情況下，更新頁面內容并保持用戶當前的交互狀態。這在一些需要實時響應并更新頁面的應用中非常有用，例如購物網站、社交分享網站等。