在現(xiàn)代Web開發(fā)中，使用Ajax技術(shù)獲取數(shù)據(jù)并實現(xiàn)無刷新加載已經(jīng)成為一種常見的方式。當(dāng)我們通過Ajax請求獲取到數(shù)據(jù)后，我們通常會想將這些數(shù)據(jù)展示在新打開的頁面中。本文將討論如何使用Ajax獲取數(shù)據(jù)，并將這些數(shù)據(jù)展示在一個新頁面中。
為了實現(xiàn)上述目標(biāo)，首先我們需要在源頁面中引入一個基本的HTML頁面，該頁面中包含一些基本的結(jié)構(gòu)和樣式。然后，在這個源頁面中我們會使用Ajax來獲取我們需要展示在新頁面中的數(shù)據(jù)。
我們可以通過以下這個例子來說明整個過程：
源頁面中有一個按鈕，當(dāng)用戶點擊該按鈕時，我們會使用Ajax獲取一些用戶數(shù)據(jù)，并將這些數(shù)據(jù)展示在新頁面中。

javascript
// 源頁面中的HTML代碼
<p>點擊下方按鈕查看用戶信息</p>
<button id="loadData">加載數(shù)據(jù)</button>
<script>
// 在源頁面中進行Ajax請求
document.getElementById('loadData').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getUserData.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var userData = JSON.parse(xhr.responseText);
// 創(chuàng)建一個新的窗口或標(biāo)簽頁來展示數(shù)據(jù)
var newWindow = window.open('about:blank', '_blank');
var newDocument = newWindow.document;
// 在新頁面中展示數(shù)據(jù)
newDocument.write('<p>用戶信息:</p>');
newDocument.write('<p>用戶名: ' + userData.name + '</p>');
newDocument.write('<p>年齡: ' + userData.age + '</p>');
}
};
xhr.send();
});
</script>

在上述代碼中，我們使用了XMLHttpRequest對象進行Ajax請求。當(dāng)用戶點擊按鈕時，我們發(fā)送一個GET請求到"getUserData.php"頁面，該頁面返回一些用戶數(shù)據(jù)。
在請求完成后，我們通過使用window.open('about:blank', '_blank')方法創(chuàng)建一個新的窗口或標(biāo)簽頁。然后，我們可以使用newWindow.document訪問到這個新頁面的DOM，并且可以在其中插入HTML來展示我們獲取到的數(shù)據(jù)。
在這個例子中，我們向新頁面中寫入了用于展示用戶信息的HTML代碼。我們將name和age展示為兩個段落。用戶信息將會在新頁面中以一種清晰明了的格式呈現(xiàn)。
總之，通過使用Ajax技術(shù)獲取數(shù)據(jù)，并將這些數(shù)據(jù)展示在新頁面中，我們可以實現(xiàn)一種無刷新加載數(shù)據(jù)的效果。這種方式給用戶提供了一種更好的用戶體驗，同時也為我們賦予了更多的控制權(quán)，以便我們可以在新頁面中展示數(shù)據(jù)的方式上做更多的自定義。