隨著互聯網的發展，網頁技術也在不斷創新和進步。其中一個重要的技術就是Ajax（Asynchronous JavaScript and XML）。通過Ajax，網頁可以在不重新加載整個頁面的情況下，實現實時更新內容。這意味著Ajax可以改變網頁源碼，使用戶能夠享受更流暢、高效的瀏覽體驗。

讓我們來看一個例子來更好地理解Ajax是如何改變網頁源碼的。假設我們正在瀏覽一個新聞網站，以獲取最新的體育新聞。在傳統的網頁中，我們需要點擊一個按鈕或者鏈接，然后整個頁面會重新加載，展示最新的新聞。然而，使用Ajax，我們可以實現在不刷新整個頁面的情況下，動態地更新新聞內容。

<script>
function getLatestNews() {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方法和URL
xhr.open("GET", "news_api.php", true);
// 發送請求
xhr.send();
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 更新網頁源碼
document.getElementById("newsContent").innerHTML = xhr.responseText;
}
}
}
</script>

上面的例子中，我們通過Ajax向服務器發送一個GET請求，獲取最新的新聞內容。當服務器返回響應時，我們可以使用XMLHttpRequest對象的responseText屬性，獲取到新的新聞源碼，并使用JavaScript將其添加到網頁中。通過這種方式，我們可以在不刷新整個頁面的情況下，實時更新新聞內容。

除了實時更新內容，Ajax還可以實現其他一些有趣的功能。例如，假設我們正在瀏覽一個電子商務網站上的商品列表頁面。在傳統的網頁中，如果我們希望查看某個商品的詳細信息，必須點擊該商品并跳轉到商品詳情頁面。然而，使用Ajax，我們可以實現在當前頁面上展示商品的詳細信息，而無需跳轉到其他頁面。

<script>
function showProductDetails(productId) {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方法和URL
xhr.open("GET", "product_details.php?id=" + productId, true);
// 發送請求
xhr.send();
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 更新網頁源碼
document.getElementById("productDetails").innerHTML = xhr.responseText;
}
}
}
</script>

在上面的例子中，我們通過Ajax向服務器發送GET請求，獲取某個商品的詳細信息。當服務器返回響應時，我們可以使用XMLHttpRequest對象的responseText屬性，獲取到商品的詳細信息源碼，并將其添加到網頁中。通過這種方式，我們可以在當前頁面上展示商品的詳細信息，而無需刷新整個頁面或跳轉到其他頁面。

綜上所述，通過Ajax，網頁可以在不重新加載整個頁面的情況下，實時更新內容。這不僅提升了用戶的瀏覽體驗，還節省了帶寬和服務器資源。無論是更新新聞內容、展示商品詳情，還是實現其他一些有趣的功能，Ajax都發揮著重要的作用，并改變著網頁的源碼。