6个你必须用到AJAX的地方与6个不必用到的地方(转载)
现在距离gmail改变大家对使用网页应用程序的方式,已经有一年多了。但是目前很多网页应用程序,并没有使用充满活力的Ajax的优势,来代替以前沉闷的html功能。
下面是当前网页应用程序应该出现的地方:
- 基于表单的交互
表单是很慢的,非常慢。尝试编辑位于del.icio.us上面的一个书签?点击编辑链接打开一个编辑书签的表单页面,然后编辑你的内容并点击提交按钮等待整个提交过程结束,最后返回上一页并向下滚动到你刚才编辑的书签那里查看内容是否已经正确更改。那AJAX呢?点击编辑链接马上开始更改标签内容,点击提交按钮开始异步传输标签编辑的内容并立即看到更改后的内容而无需重载整个页面。
- 深层树状导航
总而言之,带有深层树状导航的应用程序通常是一个噩梦。在大多数情况中简单平直的拓扑结构以及搜索/标记可以很好的工作。但是如果一个应用程序真正使用深层树状导航,使用JavaScript来管理拓扑ui(user interface用户接口),则使用Ajax懒加载深层数据可以降低服务器的负载。举例来说,为了阅读一个只有一行的结果来加载整个一个新页面是非常耗时的。
- 实时用户对用户通讯
在一个允许用户创建实时讨论的信息公告系统中,迫使用户一次又一次的更新完页面看到答复是非常愚蠢的。回复应该是实时的,用户不应被迫总是去痴迷于刷新操作。即使是gmail这个已经对以前像hotmail/yahoo mail的收件箱刷新,刷新收件箱标记的操作有所改进,也并没有充分的使用Ajax的功能来提示有新邮件到达。
- 投票、是否选择、等级评价
如果Ajax提交过程没有一个协调的UI提示是非常糟糕的,通过使用Ajax来提交一个调查或是否选择可以减少提交过程等待的痛苦。通过减少点击的等待时间,Ajax应用程序变得越来越有交互性-如果要用40秒来提交一个投票,除非非常在意的话大多数人会选择放弃。如果只花1秒呢,非常大比例的人会乐于参加投票的。(我在Netflix versus有2008张电影投票在IMDb.com有210张电影投票)
- 过滤和复杂数据操作
应用一个过滤、按日期排序、按日期和姓名排序、打开或关闭过滤器等等。任何一种高交换型操作应该交给JavaScript来处理而不是通过向服务器来提交一系列的请求。在查找或者操作大量数据的时候带来的视图上的改变最多不会超过30秒,Ajax真的使这些操作加速了。
- 普通录入时的提示/自动补齐
一些软件/JavaScript是擅长于帮助用户完成键入相同的文字或可以预测的文字的工作的。在del.icio.us 和 Gmail 中该功能是非常有益的,可以用来快速增加标记/email等。
对于一个频繁使用的应用程序诸如网页邮件客户端或博客阅读器来说,用户有充足的时间来学习如何使用新的UI概念但是他们却无法接受一个非常缓慢 的反应速度。这种应用为Ajax变的更加普及起到了一个完美的杠杆作用。随着用户使用频率的增加,更多的Ajax部件应该加强用户的使用体验。
但是对于网页应用程序来说,把每件事甚至任何事都用JavaScript来实现也是没有意义的。Ajax只是针对一些特定的环境才能带来显著的 帮助。在Ajax出现之前网页应用程序已经可以工作的很好了并且目前在网页开发中Ajax还存在着许多的缺陷和缺点。就算不从服务器端取得一个异步的信息 数据流一个平直的html网页日志也可以工作的很好。对于文档或文档之间的跳转来说,老旧的纯HTML仍然是最好的选择。简单或很少使用的应用程序就算不 用JavaScript同样可以很好的工作。
下面是一些不应该用到Ajax的地方:
- 简单的表单
就算表单是Ajax技术的最大受益人,一个简单内容的表单,或提交订货单,或一次性的很少用到的表单都不应该使用以Ajax驱动的表单提交机制。总的来说,如果一个表单不是很长用,或已经工作的很好,那么就算使用Ajax也没有什么帮助。
- 搜索
实时搜索带来的痛苦要远大于他带来的帮助。这就是为什么Google Suggest还处于beta测试而并没有放在主页上的原因。在Start.com Live.com上搜索的时候你是不能使用返回按钮来查看上一次搜索或返回上一页的。或许还没有人来完成这项工作,但是完成这个工作应该是很困难的至少是不太明知的或者会因此带来更多的麻烦。(译注:现在已经有很多开源的框架可以实现历史记录功能)
- 基本导航
总的来说,使用Ajax为一个基础的网站/程序做导航是一个可怕的念头。谁会把用来使自己的程序变的更好的时间花在编写代码模仿浏览器的行为上面?在基础页面中导航的操作中JavaScript是没有用的。
- 替换大量的信息
Ajax可以不用整页刷新来动态更新页面中改变的一小部分。但是如果一页上的大部分内容都需要更新,那为什么不从服务器那里获得一个新页面呢?
- 显示操作
虽然看上去Ajax是一个纯UI技术,其实不是这样的。他实际上是一个数据同步、操作、传输的技术。要想得到一个稳定的干净的网页程序,不使用Ajax/JavaScript来直接完成用户接口是明智的。JavaScript可以分散分布并简单的操作XHTML/HTML DOM,根据CSS规则来决定如何让UI显示数据。查看
这里(http://www.sourcelabs.com/blogs/ajb/2005/08/powering_javascript_ui_with_cs.html)
来查看如何使用CSS来替代JavaScript来控制数据的显示。
- 无用的网页小部件
滑块选择控件、拖拽控件、弹性控件(此处原文为bouncies,不知指为何物?)、鼠标样式、天气预报控件,这些小部件应该可以被更直接的控件代替或者为了整洁干脆整个去掉。为了选择一种颜色,也许滑块选择控件可以选择一个正确的阴影颜色,但是在一个商店中选择一个价格,使用滑块选择控件选到分这个单位对于用户来说有点过分。
原文地址:http://blog.csdn.net/fly_to_the_winds/archive/2009/03/31/4038210.aspx
如果标题未标有<转载、转>等字则属于作者原创,欢迎转载,其版权归作者和博客园共有。
作 者:温景良
文章出处:http://wenjl520.cnblogs.com/ 或 http://www.cnblogs.com/
关注 - 32
粉丝 - 161
» 下一篇:Server.Variables属性大全(转载)
【推荐】腾讯云新用户域名抢购1元起,抓紧抢购
· 精准率首次超过人类!阿里巴巴机器阅读理解打破世界纪录
· 技术帖:每天被今日头条推送文章 背后的算法技术是什么?
· 支付宝实体版老黄历问世:全球限量1000册
· 趣店被蚂蚁金服送上纽交所,现在是时候该独立了
· 蚂蚁宝卡升级:支付宝/微博即将免流
» 更多新闻...
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
· 大道至简,职场上做人做事做管理
» 更多知识库文章...
公告
hit counter dreamweaver
6个你必须用到AJAX的地方与6个不必用到的地方(转载)相关推荐
- Server.Variables属性大全(转载)
///取上一页地址 Response.Write(Request.ServerVariables["HTTP_REFERER"].ToString() + "<Br ...
- div中加载html js,Div里面载入另一个页面的实现(Ajax取代框架)
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...
- 使用ASP.Net 3.5 的Ajax与Web服务开发实例
本文继续介绍使用ASP.NET3.5中的AJAX环境中如何从客户端JavaScript调用Web服务方法.编写本文的目的在于让大家深刻了解基于ASP.Net3.5的Ajax和Web的服务,虽然例子比较 ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- 使用jquery ajax代替iframe
大家在实际编写网页时可能会遇到网页中需要嵌套网页的情况,这时候通常想法就是通过iframe标签. 但实际用过的人都知道其有种种的不方便,比较直观的问题就是iframe的自适应高度,这也是处理起来比较麻 ...
- JSONP解决跨域及ajax同步问题
2019独角兽企业重金招聘Python工程师标准>>> 1.前端js 1.参数定义:var sendJSONP = function(url){var settings = {url ...
- ajax的data传参的两种方式
ajax的data传参的两种方式 本文为转载. 1.[javascript] view plaincopy /** * 订单取消 * @return {Boolean} 处理是否成功 */ fun ...
- Ajax技术的基本原理
我用一个简单的用户名验证的例子来谈一谈我对Ajax的了解: 这个例子用到了两个JSP和一个JS,我没有用后台来验证,因为原理是一样的. 1.用户注册表单页:ajaxCheckUser.jsp < ...
- java 移动页面中的图片上传_移动端上传图片(ajax跨域请求)
第一次写项目开发经验,望担待. 除了前端以外的事就不叨叨了,下面开始弄干活(两个页面首页.列表页). 项目 开发简述 项目需求:上传图片并展示. 项目地址:项目的链接地址 开发工具:sublime 后 ...
最新文章
- K-means聚类K值的选择、Calinski-Harabasz准则
- Hadoop Eclipse开发环境设置
- nc 传输文件和目录
- php与Git下基于webhook的自动化部署
- C的无符号数据类型int,short,byte 转为 Java对应的数据long,char,short
- qt5 交叉编译webkit_基于QT平台的交叉编译环境搭建的架构分析
- 【手势交互】9. PS Move
- aws中部署防火墙_如何在AWS中设置自动部署
- 通达信服务器地址文件夹,通达信常用文件放置位置说明一览
- spring Bean的作用域(注解 单例 多例)
- python分布式开发容易吗_Python能实现分布式的进程吗?
- 最常用的Linux命令大全
- k8s学习:kubeconfig文件详解
- 【Redis】Redis配置文件详解(很全)
- 微波雷达感应模块技术应用,多普勒雷达,人体存在感应模组
- ssm是java框架吗,大名鼎鼎的SSM是指哪几个开源Java框架?( )
- 如何做网线水晶头?(笔记)
- 基于vue+spring的博客系统
- wp文件转shp_完美实现从mapGIS文件转换成ArcGIS中shp格式文件
- 计算机2010基础试题,2010年国硕士研究生入学统一考试计算机基础试题及答案
热门文章
- 博士申请 | ​南方科技大学陈冠华老师课题组招收NLP方向博士生
- mysql查询未讲课教师_mysql练习
- 风速的java_使用arduino计算皮托管风速
- 自考 计算机网络原理 难吗,自考计算机网络原理本科
- pymysql connect 连接mysql 报错keyerror255
- 用Python帮阿基米德分牛
- Python基础(三)列表、元组、字典、集合
- 品牌公关:品牌公关如何处理和记者的关系?
- OSI七层模型、CAN、CiA、CANopen、CiA301CiA402和EtherCAT介绍
- 2022-2028年中国活塞式压缩机行业市场研究分析及投资战略规划报告