<form action="/register" method="POST">
<div>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" />
</div>
<div>
<label for="email">郵箱:</label>
<input type="text" id="email" name="email" />
</div>
<button type="submit">提交</button>
</form>在這個(gè)例子中，當(dāng)用戶點(diǎn)擊“提交”按鈕后，瀏覽器會(huì)以POST請(qǐng)求的方式將表單數(shù)據(jù)發(fā)送給服務(wù)器的/register路徑。服務(wù)器在接收到請(qǐng)求后，可以進(jìn)行相應(yīng)的處理，比如將用戶信息保存到數(shù)據(jù)庫中。接著，服務(wù)器會(huì)返回一個(gè)響應(yīng)，并刷新整個(gè)頁面，展示注冊(cè)成功或失敗的信息。
相比之下，如果我們希望在提交表單時(shí)不刷新整個(gè)頁面，而只更新部分頁面內(nèi)容，就需要使用Ajax。<form id="register-form">
<div>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" />
</div>
<div>
<label for="email">郵箱:</label>
<input type="text" id="email" name="email" />
</div>
<button type="button" onclick="register()">提交</button>
</form>
在這個(gè)例子中，我們通過添加了一個(gè)id為"register-form"的form標(biāo)簽，并修改了按鈕的類型為"button"，避免了默認(rèn)的表單提交行為。在JavaScript代碼中，我們定義了一個(gè)register()函數(shù)，它會(huì)在用戶點(diǎn)擊按鈕時(shí)被調(diào)用。該函數(shù)首先使用FormData對(duì)象獲取表單數(shù)據(jù)，然后通過XMLHttpRequest對(duì)象發(fā)送POST請(qǐng)求給服務(wù)器的/register路徑。服務(wù)器處理完請(qǐng)求后，會(huì)返回一個(gè)響應(yīng)，我們可以在onload事件中進(jìn)行相應(yīng)的處理。最后，我們可以根據(jù)響應(yīng)的內(nèi)容更新頁面中的指定元素（比如id為"result"的元素）。
通過以上例子，我們可以更清晰地認(rèn)識(shí)到Form表單和Ajax的區(qū)別。Form表單通過頁面刷新來傳輸數(shù)據(jù)，適用于需要更新整個(gè)頁面內(nèi)容的場景，而Ajax通過異步加載數(shù)據(jù)，在不刷新頁面的情況下更新部分頁面內(nèi)容。
總結(jié)來說，F(xiàn)orm表單適用于傳輸數(shù)據(jù)并刷新整個(gè)頁面的場景，而Ajax則適用于通過異步加載數(shù)據(jù)來更新部分頁面內(nèi)容的場景。根據(jù)具體需求，我們可以選擇合適的技術(shù)來實(shí)現(xiàn)我們的Web開發(fā)任務(wù)。 