（1）分析

　　從特性上將，表單具有預設的提交行為，預設是同步的，即同步表單提交，瀏覽器會鎖死（轉圈... ...），等待服務端的響應結果。接下來做下對比分析

（2）非同步提交，首先看下案例裡的非同步提交

非同步表單提交：form標籤內部不再編寫action和method，而是通過ajax的url和method選項去實現提交

（3）同步提交

同步提交時不再需要ajax，而是直接在form表單的開始標籤裡新增action和method屬性實現，接下來開始進行註冊

點選提交按鈕

再次重新整理頁面，內容如下

同步表單提交，瀏覽器會直接將服務端響應內容，直接渲染到客戶端瀏覽器所謂的（頁面容器中）

接下來做下修改，服務端返回HTML字串內容，如下所示

　　　　此時再次重新整理頁面，結果如下

此時呈現的內容不應該稱之為頁面，而是容器。瀏覽器將服務端返回的html字元解析渲染到了所謂的頁面容器裡。因此，同步請求返回結果，瀏覽器都會進行顯示覆蓋。

　　　　接著將html字串改為數字，測試如下

總結如下：同步提交，瀏覽器會將響應結果直接進行覆蓋，之前的表單便會被覆蓋，替換成服務端返回內容

所以AJAX出現之前，都是這麼同步操作表單提交的

直到後來一個不懂程式設計的設計互動師提出來該互動效果體驗差，才有所改變

（4）其他處理辦法

　　在AJAX誕生之前，有人想到辦法解決了上述這種問題。之前的問題是“提示和互動不在同一個頁面”，那麼這種新辦法便是直接再次重定向到該頁面，這樣便不用離開當前頁面，體驗更為合理一點。

該方法優點：1、不用離開當前頁面；2、保留使用者之前輸入的內容

1、服務端重定向

此時的結果便是提交重複資訊時重新整理頁面

2、展示報錯資訊

此時重複提交內容時，表單同步提交，頁面重新整理且出現報錯資訊

分析：之所以可以直接在html模板頁面編寫{{error_message}}，因為第一次到註冊頁時是get請求，沒有error_meaage內容，所以不會展示。如下所示

3、同類對比

　　　　直到現在，任然有很多網站用這種同步表單操作，重新整理頁面，展示錯誤資訊。例如GitHub，如下所示：點選時會同步提交表單內容，重新整理頁面，重新整理完畢後，將錯誤內容展示到新頁面

注意：這裡沒有非同步請求，所有的操作都是通過服務端返回的。

　4、使用緣由

　　　　現在已經有了AJAX，但很多網站任然使用這種方式，原因：服務端處理起來更加安全一些，雖然會給伺服器帶來一些壓力，但鑑於安全性，大企業擇優選取方案。

　　　　當前還有其他原因，例如保證互動的一致性，有的可能不支援ajax，用這種方式會使使用者體驗更加統一，避免很多麻煩。

　　5、保留使用者 初始輸入內容

注意：第一次載入註冊頁時，沒有form_data資料，所以如果直接在html模板頁使用form_data.email和form_data.nickname無法直接獲取，還會報錯。
因為此時的form_data為undefined，所以無法使用物件操作符獲取對應屬性

密碼位置一般會在重新整理後清空，測試如下

（5）方法對比

　　上述伺服器同步操作方法在於更加安全，使用者體驗更統一。

　　但服務端無法直接操作DOM，所以也不可能在客戶端頁面追加文字或其他內容，所以無法做出漂亮的使用者體驗特效... ...

這種方式操作稍微有些繁瑣。

　　現在倡導降低前後端耦合，避免服務端處理客戶端內容。直到後來AJAX的誕生，可以在客戶端結合後臺響應操作DOM，同時實現一些絢麗的特效，使得互動更加豐富。

（6）其他框架

　　1、在很多框架例如Ruby（日本人）編寫發明，很好實現了分離開發

　　2、國內之前有過“易語言”，使用中文編寫程式碼... ...（中文偏向抒情、英文更具邏輯）

　　3、現在比較火的Vue，實現了前後端分離開發，甚至連路由控制都由前端操作，服務端只需操作資料。即資料和頁面完全分離，前後端只通過介面進行互動。完全有客戶端控制頁面。

（6）小結

　　同步提交表單內容會導致瀏覽器鎖死，頁面重新整理，非同步提交表單內容不會發生鎖死，瀏覽器任然可以幹別的事情。

非同步互動沒有重新整理頁面，實現頁面區域性更新

同步提交表單資料：主要依靠服務端進行處理
非同步提交：服務端只需要返回互動的業務資訊，具體由客戶端進行互動效果的編寫