`

AJAX必须用到和不必使用的地方

阅读更多

 

在学习多了Ajax以后,免不了在很多网页的操作都想使用Ajax。在这种情况下就很容易造成Ajax的过度使用。下面转贴一篇看到的文章来告诫自己什么时候应当使用,而在什么情况下不需要使用Ajax

转载自:http://68design.net/Development/JSP/21823-1.html

 

现在距离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显示数据。

无用的网页小部件

滑块选择控件、拖拽控件、弹性控件(此处原文为bouncies,不知指为何物?)、 鼠标样式、天气预报控件,这些小部件应该可以被更直接的控件代替或者为了整洁干脆整个去掉。为了选择一种颜色,也许滑块选择控件可以选择一个正确的阴影颜 色,但是在一个商店中选择一个价格,使用滑块选择控件选到分这个单位对于用户来说有点过分。

分享到:
评论

相关推荐

    ajax实现省市县三级联动

    在做开发的时候我们难免会用到省市县三级联动的功能,所以我写了一个用ajax实现省市县三级联动。希望可以帮到你们,里面的代码我都注释的非常详细。有看不懂地方可以给我留言

    大名鼎鼎的IBM公司 Ajax 培训资料

    Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填 写表单时,数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反,JavaScript 代码捕获表 单数据并向服务器...

    学生信息管理系统 Element-ui+Servlet+Mybatis

    前端用到了vue框架,Element-ui设计样式 ,用Ajax发送请求和接收相应。 服务器使用的是Tomcat。 后端用到了Servlet接收请求和发送相应,用Mybatis连接数据库。 数据库使用的是MySQL 8.0.28。 这是我做的第一个...

    基于SpringBoot音乐播放网站

    使用ajax连接前后端 使用框架Bootstrap、JQuery开发前端界面 使用MySQL存储歌曲链接和图片链接 使用cookies存储用户id等 使用阿里云OSS存储歌曲的大部分mp3文件 主要分为六个模块 用户管理模块:用户登录、用户注册...

    jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,...

    springboot-music.zip

    使用ajax连接前后端 使用框架Bootstrap、JQuery开发前端界面 使用MySQL存储歌曲链接和图片链接 使用cookies存储用户id等 使用阿里云OSS存储歌曲的大部分mp3文件 2.主要分为六个模块 用户管理模块:用户登录、用户...

    基于SpringBoot+Mybatis+MySQL5.7的一个音乐播放网站

    使用ajax连接前后端 使用框架Bootstrap、JQuery开发前端界面 使用MySQL存储歌曲链接和图片链接 使用cookies存储用户id等 使用阿里云OSS存储歌曲的大部分mp3文件 主要分为六个模块 用户管理模块:用户登录、用户注册...

    基于SpringBoot+Mybatis+MySQL5.7的一个音乐播放网站+源代码+文档说明

    使用ajax连接前后端 使用框架Bootstrap、JQuery开发前端界面 使用MySQL存储歌曲链接和图片链接 使用cookies存储用户id等 使用阿里云OSS存储歌曲的大部分mp3文件 主要分为六个模块 用户管理模块:用户登录、用户注册...

    Ajax请求中的异步与同步,需要注意的地方说明

    之前做项目时候,用到一个表格控件,它的数据是异步加载的,我在这个表格绑定数据的函数下面友做了一些业务处理,运行页面的时候,用浏览器在我写业务处理那地方打上断点跟踪,它确实执行了,可以最后显示的时候,它...

    struts2+spring+hibernate整合示例

    b 在struts.xml中添加action,使用通配符的方式 , 注意这里和单独struts2不同的地方: class属性指向的是bean 的 id ,这里我们配置bean采用spring ioc注解的方式, 所以默认的bean的id 为 类名(首字母小写) ...

    网页注册表单的网页设计技巧

    Ajax的流行给用户体验带来了很大程序的提升,而“注册“这项做为互联网最常用到的功能也自然而然的成为Ajax最常光顾的地方,实时判断用户输入的用户名是否被抢注、检测两次输入的密码是否一致,检测用户输入的邮箱...

    【SpringBootWeb】-Web请求响应详解

    简单对Web请求响应如何处理进行的整理,难免有理解不到位,理解有偏差的地方,如有理解有误的地方,希望大牛批评指正。 1.Web开发的定义 首先看看微软对Web开发的定义: Web开发是一个指代网页或网站编写过程的广义...

    使用eclipse编写的登录Demo

    功能仅限登录 注册 修改密码 注销 邮箱没有用正则表达式验证 例子不涉及ajax等技术 没有用到框架 使用JDBC对数据库进行的操作 这个例子采用eclipse编写 Oracle11gXE数据库 运行只需将src/com/lzy/dbutil/DbUtil中...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome ...

    jquery插件使用方法大全

    例如,使用了新的jQuery内部Ajax API就可以实现下面的代码了: // Assign handlers immediately after making the request, // and remember the jxhr object for this request var jxhr = $.ajax({ url: "example....

    ExtAspNet_v2.3.2_dll

    ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox...

    struts简单实现用户注册(最新修订)

    WebRoot目录下emp.sql是本程序用到的sql脚本 本例程实现了以下功能: 1.加入国际化I18N 2.log4j 3.自定义tag 4.show.jsp列表的empID字段的sort 5.struts的validate 6.ajax实现的分页 7.ajax实现了省市下拉...

    网上购书系统

    网上购书系统ajax+struts+spring+ajax,运用源码要用到的架包请到我发布的资源Struts\ajax\spring\ajax架包(附:只能传10M以内)请大家谅解,一定有什么不足的地方,欢迎大家意见.e_laoye@qq.com

    无刷新三级联动菜单

    最近做一些网站程序,经常要用到多个下拉菜单选择,看了介绍开始用AjaxPro这个控件,感觉效果不错。以前使用过MagicAjax,很久不用了忘记了,最麻烦的就是在虚拟目录的时候比较麻烦,呵呵,在网上也有很多,不过重要...

    Java顺发物流管理系统源码(源码+数据库+开发文档+部署手册+用户分析需求手册).rar

    jsp物流管理系统源码(源码+数据库+开发文档+部署手册+用户分析需求手册).rar ...本系统运用的是SSH所搭建成的框架,并且在局部的地方用到了Ajax技术和DWR框架,并且前台用的是Div+Css技术所搭建成的。

Global site tag (gtag.js) - Google Analytics