在網站開發中，表單提交是常見的一種數據交互方式，而隨著Ajax（Asynchronous JavaScript and XML）技術的出現，可以實現異步的數據傳輸，使得網頁更加流暢和用戶體驗更好。雖然表單提交和Ajax都可以實現數據的提交與接收，但它們之間存在一些重要的區別。

首先，讓我們來看一下表單提交的過程。當用戶在網頁上填寫表單并點擊提交按鈕時，瀏覽器會 自動發送一個HTTP請求到服務器，請求服務器處理表單數據。服務器接收到請求后，可以對數據進行驗證、存儲或者其他相應的操作，并返回一個新的網頁作為響應，之后瀏覽器會加載這個響應的頁面。

舉個例子，假設我們有一個簡單的登錄表單，用戶需要輸入用戶名和密碼并點擊提交按鈕。當用戶點擊提交按鈕時，表單數據將被發送到服務器端，服務器端會驗證用戶名和密碼的正確性，如果驗證通過，則返回一個歡迎頁面，否則返回一個錯誤頁面。

<form action="/login" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登錄">
</form>

接下來，讓我們來看一下Ajax的工作原理。與表單提交不同，Ajax使用JavaScript來處理數據的發送和接收，通過在后臺與服務器進行少量的數據通信，可以在不重載整個頁面的情況下更新特定的內容。具體而言，當用戶在網頁上進行操作并觸發了特定的事件后，JavaScript代碼將通過XMLHttpRequest對象發送一個HTTP請求到服務器，并接收服務器返回的數據。然后，JavaScript代碼可以使用收到的數據進行相應的處理，例如更新網頁上的某些元素，無需刷新整個頁面。

舉個例子，如果我們有一個評論表單，用戶可以在文本框中輸入評論內容，并點擊提交按鈕進行發送。當用戶點擊提交按鈕時，JavaScript代碼通過Ajax技術將評論數據發送到服務器端，服務器端進行相關的處理后，返回一個新的評論列表。然后，JavaScript代碼可以通過動態的更新網頁上的評論區域，將新的評論添加到列表中，而不需要重新加載整個頁面。

<form id="commentForm">
<textarea id="commentContent"></textarea><br>
<input type="button" value="提交評論" onclick="submitComment()">
</form>

function submitComment() {
var commentContent = document.getElementById("commentContent").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/submitComment", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
var commentList = document.getElementById("commentList");
commentList.innerHTML = response;
}
};
xhr.send("commentContent=" + commentContent);
}

綜上所述，表單提交和Ajax都可以實現數據的提交和接收，但在具體的應用場景中有一些重要的區別。表單提交一般用于用戶提交一次性的數據，并且需要整頁刷新。例如，在網上購物時，用戶需要填寫收貨地址等信息，并點擊提交按鈕提交訂單。而Ajax常用于需要實時更新部分網頁內容的場景，例如聊天應用和評論系統。