Ajax提交与传统表单提交的区别说明


Posted in Javascript onFebruary 07, 2014

Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求。比如说我们希望网页总是显示最新的新闻,而又不想老是去点刷新按钮,我们就可以用Ajax机制来实现。网上的客服软件也是ajax请求的一个比较好的案例。传统的请求页面将实现刷新,因此局限性很大。

1.为什么用AJAX?
使用AJAX,用户对Web的体验会更“敏捷”:数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用低。

2.AJAX开发相较传统模式的简单之处:
传统模式下,表单提交则整个页面重绘,为了维持页面用户对表单的状态改变,要多些不少代码。要在控制器和模板之间传递更多参数以保持页面状态。而AJAX不然,因为页面只是局部更新, 不关心也不会影响页面其他部分的内容。

3.AJAX开发相较传统模式的难度:
需要了解、精通JavaScript,而JavaScript存在调试麻烦、浏览器兼容性等很多障碍。

=================================

有如下几种区别: 
1. Ajax在提交、请求、接收时,都是异步进行的,网页不需要刷新;Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的;

2. A在提交时,是在后台新建一个请求;F却是放弃本页面,而后再请求;

3. A必须要使用JS来实现,不启用JS的浏览器,无法完成该操作;F却是浏览器的本能,无论是否开启JS,都可以提交表单; 4. A在提交、请求、接收时,整个过程都需要使用程序来对其数据进行处理;F提交时,却是根据你的表单结构自动完成,不需要代码干预。

Javascript 相关文章推荐
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
table行随鼠标移动变色示例
May 07 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
JQUERY 设置SELECT选中项代码
Feb 07 #Javascript
jquery操作select详解(取值,设置选中)
Feb 07 #Javascript
jquery select 设置默认选中的示例代码
Feb 07 #Javascript
jquery 淡入淡出效果的简单实现
Feb 07 #Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 #Javascript
做好七件事帮你提升jQuery的性能
Feb 06 #Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
常用js脚本
2006/12/03 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
理解Python中的With语句
2016/03/18 Python
python的Tqdm模块的使用
2018/01/10 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
社区交通安全实施方案
2014/03/22 职场文书
教师个人发展总结
2015/02/11 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
golang中的并发和并行
2021/05/08 Golang
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
Pandas 数据编码的十种方法
2022/04/20 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL
Vue Element plus使用方法梳理
2022/12/24 Vue.js