(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)小结
同步提交表单内容会导致浏览器锁死,页面刷新,异步提交表单内容不会发生锁死,浏览器任然可以干别的事情。
异步交互没有刷新页面,实现页面局部更新
同步提交表单数据:主要依靠服务端进行处理 异步提交:服务端只需要返回交互的业务信息,具体由客户端进行交互效果的编写