在現代的網頁應用程序中，動態加載HTML內容是非常常見的需求。使用AJAX來實現頁面內容的異步加載已經成為一種標準的做法。AJAX（Asynchronous JavaScript and XML）是一種基于現有的Web技術的方法，可以實現在不重新加載整個網頁的情況下，通過與服務器進行異步通信來更新頁面的部分內容。

使用AJAX加載HTML的基本原理是通過JavaScript代碼向服務端發送HTTP請求，請求服務器返回指定的HTML內容。然后通過JavaScript將返回的HTML內容插入到網頁的指定位置。這樣可以實現頁面的動態更新，提供更加流暢的用戶體驗。

舉個例子來說明，假設我們有一個網頁上包含一個按鈕，當用戶點擊該按鈕時，需要通過AJAX加載并顯示一個新的HTML頁面。我們可以通過以下代碼來實現：

<button id="load-button">點擊加載新頁面</button>
<div id="content-container"></div>
<script>
var loadButton = document.getElementById('load-button');
var contentContainer = document.getElementById('content-container');
loadButton.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'new-page.html', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
contentContainer.innerHTML = xhr.responseText;
}
};
xhr.send();
});
</script>

上述代碼中，當用戶點擊按鈕時，JavaScript監聽到按鈕的點擊事件并執行相應的邏輯。首先，它創建了一個XMLHttpRequest對象xhr，并使用open方法指定了一個GET請求，請求的URL為'new-page.html'，最后一個參數設置為true表示使用異步方式。之后，通過onreadystatechange回調函數來處理服務器返回的響應。當readyState為4（請求已完成）并且status為200（請求成功）時，將服務器返回的HTML內容賦值給contentContainer的innerHTML屬性，這樣新頁面將被插入到contentContainer中。

使用AJAX加載HTML還有一些常見的應用場景。例如，在一個博客網站上，我們可以使用AJAX來加載文章的評論部分。當用戶瀏覽文章時，默認只顯示部分評論，而當用戶點擊“加載更多評論”的按鈕時，通過AJAX加載剩余的評論內容，實現頁面的無刷新更新。這樣可以提升網站的性能，讓用戶可以更快地瀏覽到自己感興趣的內容。

在使用AJAX加載HTML時，還需要注意一些潛在的問題。首先，需要確保服務器返回的HTML內容是合法的，并且符合網頁的結構。否則，插入到網頁中的內容可能會破壞整個頁面的布局。其次，對于一些有時效性的內容，可能需要在客戶端緩存中保存一些數據，以提高下一次加載的速度。而且，還需要處理一些錯誤情況，例如服務器返回錯誤的狀態碼或者請求超時等。

總之，使用AJAX加載HTML可以實現頁面內容的動態更新，并提供更好的用戶體驗。通過發送HTTP請求并將返回的HTML內容插入到指定位置，我們可以實現無刷新頁面加載，提升網站性能，同時也需要處理一些潛在的問題。