`
wlh269
  • 浏览: 458133 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

10个你必须用到Ajax的地方

阅读更多
10个你必须用到Ajax的地方



现在距离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,不知指为何物?)、鼠标样式、天气预报控件,这些小部件应该可以被更直接的控件代替或者为了整洁干脆整个去掉。为了选择一种颜色,也许滑块选择控件可以选择一个正确的阴影颜色,但是在一个商店中选择一个价格,使用滑块选择控件选到分这个单位对于用户来说有点过分。

OK我在标题那里撒了个无伤大雅的小谎,我只说出了6个应该使用Ajax的地方,6个也许不应该使用的地方,但是多从四维的角度看看这篇文章,我已经在SWiK上面为Ajax的使用建立了一个wiki页面(http://swik.net/Ajax/Places+To+Use+Ajax)并且我或任何其他人都可以随着时间的流逝来不断的完善他。
另外,我现在尝试使用Feedburner来跟踪我的RSS种子,如果你没有订阅Feedburner种子,请到这里订阅http://feeds.feedburner.com/AlexBosworth
分享到:
评论

相关推荐

    asp.net ajax简单应用实例

    在实现这个功能时,ASP.NET AJAX的核心组件`ScriptManager`会被用到,它负责在客户端加载必要的AJAX库。此外,`UpdatePanel`控件也可能会被添加到`Default.aspx`页面,它创建了一个可以异步更新的区域,这样在下拉框...

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

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

    jquery+ajaxform+springboot控件实现数据更新功能

    在数据更新操作中,通常会用到@ResponseBody注解,这允许方法直接返回数据而不需要渲染视图,非常适合用于Ajax操作的响应数据。 ### 知识点三:前后端交互的数据更新实现 在传统的Web应用模式中,数据更新往往需要...

    JQuery ajax 返回json时出现中文乱码该如何解决

    在使用JQuery的ajax方法调用返回JSON格式数据时,如果遇到中文字符显示乱码的情况,这是一个常见的问题,尤其在前后端交互过程中,因为编码格式不一致导致的字符显示错误。为了解决这个问题,我们需要确保前后端在...

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

    学生信息管理系统 Element-ui+Servlet+Mybatis 前端用到了vue框架,Element-ui...这是我做的第一个JavaWeb系统,还有很多不足和需要修改的地方,如果有发现不足和应该修改的地方,还请告知。 还在学习中,欢迎私信交流

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    在前端与后端进行数据交互时,经常需要用到ajax技术。在Vue.js中,可以通过原生的XMLHttpRequest对象或者第三方库(如jQuery的$.ajax方法或者axios)来进行数据请求。在本文中,使用了jQuery的$.get方法来发起一个...

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

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

    没事写个网站。献出源码

    【描述】:“中间用到了Ajax,Membership,还有自己重写的简单页面类。以极简单的三层结构,简单易懂。适合新手学习。”这段描述提供了关于项目的关键信息: 1. **Ajax**:Ajax(异步JavaScript和XML)是一种在无需...

    js代码库,封装经常用到的组件

    在压缩包的文件列表中,只有一个名为"Libs"的目录,这可能是存放这些JavaScript库和其他相关资源的地方,如CSS样式表、图片或者本地化文件。通常,库会包含一个主文件(如`control.js` 和 `platform.js`),其他的...

    jQuery实现列表上下移动置顶+带入数据库文件

    3. **动画效果**:jQuery的`.animate()`方法可以创建平滑的动画效果,虽然在这个例子中可能没有直接用到,但如果你想要在列表项移动时添加视觉反馈,这会很有帮助。 4. **Ajax交互**:jQuery的`.ajax()`或`.load()`...

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

    一直以来公司都没有用现如今比较前卫的技术,闲来无聊,自己实现了个struts简单注册的例子,目的自己练习用,简单说下我的想法, 其一:想加spring,但是怎么读spring.xml配置文件也得不到它,就放弃了, 其二:利用...

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

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

    ASP.NET多选下拉框自定义控件

    1. 控件结构:我们可以将控件设计为一个组合体,包括一个单选的下拉列表(显示当前选中的选项)和一个隐藏的多选列表(用户实际进行多选操作的地方)。 2. 用户交互:用户点击下拉按钮后,隐藏的多选列表弹出,用户...

    pic-view.rar_PIC_javascript_pic view_picview.a

    4. "pic-img" - 这个目录很可能是存储图像资源的地方,包括用户浏览的图片以及应用可能用到的图标和其他图形元素。 5. "pic-js" - 这个目录可能包含JavaScript源代码,特别是与图像浏览功能相关的脚本,如Ajax请求、...

    超炫效果的jQuery相册插件

    3. `photos`文件夹:这应该是存放相册图片的地方,每个子文件可能是单独的图片资源,插件通过JavaScript或Ajax动态加载这些图片。 4. `images`文件夹:可能包含一些图标或者辅助图形,如加载指示器、箭头等,以增强...

    javascript实现省市地方级联实例

    在实现省市区级联的过程中,我们会用到以下几个关键知识点: 1. **DOM操作**:Document Object Model (DOM) 是HTML和XML文档的结构表示,JavaScript通过DOM可以查找、修改和添加页面元素。在这个实例中,我们需要...

    2009.12.28——jquery自动提示

    标题 "2009.12.28——jquery自动提示" 暗示了这篇内容可能涉及到使用jQuery库来实现一种自动提示的功能,可能是...如果你对这个主题感兴趣,访问提供的博客链接可以获取更详尽的信息,包括可能的代码示例和实现细节。

    transport.js

    注意:这个函数必须在你导入jQuery文件之后,并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前,除非jQuery是最后一个导入的。 ) 注意:可能要替换掉很多地方,请大家不要怕麻烦 ...

    快速解决ajax传递为空但显示在页面上为undefined的问题

    在处理前端页面与后端数据交互的过程中,经常需要用到Ajax技术进行异步请求。然而,有时候我们会遇到一个问题,即后端传递的某些数据在前端页面上显示为undefined。这通常是因为后端返回的对象中某些属性的值为null...

    web前端 贪吃蛇小游戏 用javascript实现的适合初学者入门 简单易懂

    【JavaScript实现贪吃蛇小游戏】 贪吃蛇游戏是一款经典的像素级游戏,对于初学者来说,通过JavaScript实现这个游戏是...同时,这个小游戏也可以作为进一步学习CSS动画、响应式设计或者AJAX异步通信等进阶技术的起点。

Global site tag (gtag.js) - Google Analytics