AJAX（Asynchronous JavaScript And XML）是一種用于創建交互式、動態網頁應用程序的技術。它使得網頁能夠在不重新加載整個頁面的情況下，通過與服務器進行異步通信，動態更新和顯示數據。DOM（Document Object Model）則是一種表示文檔結構和內容的標準方式，可以通過JavaScript來訪問和操作HTML和XML文檔中的元素。

在講解AJAX和DOM之前，我們先來看一個實例。假設我們有一個簡單的網頁，其中包含一個按鈕和一個DIV元素。當用戶點擊按鈕時，我們希望能夠通過AJAX請求獲取一段文本，并將其添加到DIV元素中顯示。在傳統的網頁開發中，這個過程需要通過重新加載整個頁面來實現，而使用AJAX則可以在不刷新頁面的情況下更新內容。

<button id="btn">點擊我
在上面的代碼中，我們使用了AJAX技術進行異步請求數據。當按鈕被點擊時，JavaScript會創建一個XMLHttpRequest對象，然后配置該對象以便發送GET請求到服務器上的"example.txt"文件。一旦收到服務器的響應，JavaScript會調用回調函數進行處理。如果狀態為完成（readyState為4）并且響應狀態碼為200，那么我們可以通過responseText屬性獲取響應文本，并使用DOM操作將其添加到DIV元素中。
DOM可以讓我們輕松地訪問和操作HTML和XML文檔中的元素。在上面的例子中，我們通過使用document.getElementById方法獲取了按鈕和DIV元素，并使用addEventListener方法注冊了按鈕的點擊事件。一旦按鈕被點擊，我們可以使用innerHTML屬性將響應文本添加到DIV元素中。除此之外，DOM還提供了其他豐富的功能，比如創建、刪除和修改元素、屬性和樣式等等。
通過AJAX和DOM技術，我們可以實現交互性強、動態更新的網頁應用程序。使用AJAX進行異步通信可以提升用戶體驗，避免頁面的重新加載，而DOM則幫助我們輕松地訪問和操作文檔中的元素。