AJAX，即"Asynchronous JavaScript and XML"，是一種用于在網頁上異步加載數據的技術。它通過在后臺無需刷新整個網頁的情況下更新部分內容，極大地提高了用戶體驗和網頁性能。在AJAX中，我們經常使用三種不同的顯示方式：iframe、none和ajax。本文將介紹這三種方式，并給出一些示例，以幫助讀者更好地理解。

首先，讓我們來看一下iframe。在使用iframe時，不同的網頁會被嵌入到主頁面的某個特定區域，用戶可以通過點擊鏈接或執行操作來切換不同的網頁。這種方式最常見的應用場景之一是在一個頁面中顯示多個廣告。假設有一個網頁包含了多個廣告位，我們可以使用iframe將不同的廣告網頁加載到每個廣告位中，實現同時顯示多個不同的廣告內容。

<div id="ad1">
<iframe src="http://www.ad1.com"></iframe>
</div>
<div id="ad2">
<iframe src="http://www.ad2.com"></iframe>
</div>

接下來，讓我們轉向none方式。none是一種隱藏元素的方式，當使用none方式時，元素的內容將不會在頁面中顯示。這種方式可以用于在用戶進行某些操作之前隱藏一些內容，并在操作完成后顯示出來。例如，在一個博客頁面中，我們可能只顯示一部分內容，用戶需要點擊"展開"按鈕才能看到完整的文章。在點擊"展開"按鈕之前，文章的內容可以被設置為none，用戶點擊按鈕后，使用AJAX加載剩余的內容并將其顯示出來。

<button id="expand">展開</button>
<div id="content" style="display: none;">
<p>這是博客的部分內容...</p>
<p>這是博客的部分內容...</p>
<p>這是博客的部分內容...</p>
...
</div>
<script>
document.getElementById("expand").addEventListener("click", function() {
document.getElementById("content").style.display = "block";
});
</script>

最后，我們來看看ajax方式。使用ajax方式時，可以通過發送HTTP請求從服務器端獲取數據，并將數據動態地更新到網頁中的某個特定區域。這種方式常用于實現無刷新提交表單、加載評論等功能。例如，在一個購物網站中，當用戶點擊"加入購物車"按鈕時，可以使用ajax方式將商品添加到購物車中，而無需整個頁面刷新。

<button id="addToCart">加入購物車</button>
<script>
document.getElementById("addToCart").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/add-to-cart");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 更新購物車數量等內容
} else {
console.error("添加到購物車失敗");
}
}
};
xhr.send(JSON.stringify({productId: 123, quantity: 1}));
});
</script>

綜上所述，通過我們的介紹和示例，我們了解了三種常見的AJAX顯示方式：iframe、none和ajax。這些方式在不同的場景下具有不同的用途。無論使用哪種方式，AJAX的優勢在于它能夠提高網頁性能，并為用戶提供更好的體驗。