Ajax和History是兩個在Web開發中非常重要的概念。Ajax（Asynchronous JavaScript and XML）是一種基于JavaScript和XML的技術，可以實現在不重新加載整個頁面的情況下，與服務器進行異步通信，并動態更新頁面內容。而History是瀏覽器的一個特性，可以記錄用戶在瀏覽器中的頁面瀏覽歷史，通過使用History API，可以在網頁中實現無刷新的頁面轉換和狀態管理。

下面通過幾個例子來說明Ajax和History的使用。

例子1：在一個電影網站的頁面中，有一個評論區域，用戶可以發表評論，而不需要刷新整個頁面。

function postComment(){
var comment = document.getElementById("comment").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
document.getElementById("comments").innerHTML += xhr.responseText;
}
};
xhr.open("POST", "post_comment.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("comment=" + comment);
}

在這個例子中，我們使用Ajax來實現用戶發表評論的功能。當用戶輸入評論并點擊提交按鈕時，JavaScript會使用XMLHttpRequest對象發送異步請求，并將用戶評論添加到評論區域中，而不需要刷新整個頁面。這樣可以提升用戶體驗，同時減少服務器的負荷。

例子2：一個網頁應用程序有多個頁面，用戶通過點擊導航菜單來切換頁面，同時可以通過瀏覽器的前進和后退按鈕來回退頁面。

function loadPage(page){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
document.getElementById("content").innerHTML = xhr.responseText;
history.pushState({page: page}, "", page);
}
};
xhr.open("GET", page + ".html", true);
xhr.send();
}
window.onpopstate = function(event){
if(event.state){
loadPage(event.state.page);
}
}

在這個例子中，我們使用Ajax和History API來實現頁面的切換和狀態管理。當用戶點擊導航菜單時，JavaScript會使用XMLHttpRequest對象加載對應的頁面內容，并使用pushState方法將頁面狀態壓入瀏覽器的歷史棧中。當用戶點擊瀏覽器的前進和后退按鈕時，JavaScript會監聽popstate事件，并根據頁面狀態加載對應的頁面內容，實現無刷新的頁面轉換。

Ajax和History在Web開發中的應用非常廣泛，可以用于實現無刷新的表單提交、動態加載頁面內容、單頁應用程序等等。通過合理地運用Ajax和History，可以提升用戶體驗，同時減少服務器的負荷。