`
bruce198
  • 浏览: 235061 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Ajax应用场景

    博客分类:
  • java
阅读更多

      适用场景
  表单驱动的交互
  传统的表单提交,在文本框输入内容后,点击按钮,后台处理完毕后,页面刷新,再回头检查是否刷新结果正确。使用Ajax,在点击 sunmit按钮后,立刻进行异步处理,并在页面上快速显示了更新后的结果,这里没有整个页面刷新的问题。

  深层次的树的导航

  深层次的级联菜单(树)的遍历是一项非常复杂的任务,使用JavaScript来控制显示逻辑,使用Ajax延迟加载更深层次的数据可以有效 的减轻服务器的负担。

  我们以前的对级联菜单的处理多数是这样的:

  为了避免每次对菜单的操作引起的重载页面,不采用每次调用后台的方式,而是一次性将级联菜单的所有数据全部读取出来并写入数组, 然后根据用户的操作用 JavaScript来控制它的子集项目的呈现,这样虽然解决了操作响应速度、不重载页面以及避免向服务器频繁发送请求的 问题,但是如果用户不对菜单进行 操作或只对菜单中的一部分进行操作的话,那读取的数据中的一部分就会成为冗余数据而浪费用户的资源, 特别是在菜单结构复杂、数据量大的情况下(比如菜单有 很多级、每一级菜又有上百个项目),这种弊端就更为突出。

  如果在此案中应用Ajax后,结果就会有所改观:

  在初始化页面时我们只读出它的第一级的所有数据并显示,在用户操作一级菜单其中一项时,会通过Ajax向后台请求当前一级项目所属的 二级子菜单的所有数据,如 果再继续请求已经呈现的二级菜单中的一项时,再向后面请求所操作二级菜单项对应的所有三级菜单的所有数据, 以此类推……这样,用什么就取什么、用多少就取 多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面时不用重载全部内 容,只更新需要更新的那部分即可,相对于后台处理并重载的方式缩短了 用户等待时间,也把对资源的浪费降到最低。

  快速的用户与用户间的交流响应

  在众多人参与的交流讨论的场景下,最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快 的速度显示出来,而把用户从分神的刷新中解脱出来,Ajax是最好的选择。

  类似投票、yes/no等无关痛痒的场景

  对于类似这样的场景中,如果提交过程需要达到40秒,很多的用户就会直接忽略过去而不会参与,但是Ajax可以把时间控制在1秒之内 ,从而更多的用户会加入进来。

  对数据进行过滤和操纵相关数据的场景

  对数据使用过滤器,按照时间排序,或者按照时间和名称排序,开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用 JavaScript,而不是用一系列的服务器请求来完成。在每次数据更新后,再对其进行查找和处理需要耗费较多的时间,而Ajax可以加速这个过 程。

  普通的文本输入提示和自动完成的场景

  在文本框等输入表单中给予输入提示,或者自动完成,可以有效的改善用户体验,尤其是那些自动完成的数据可能来自于服务器端的场合, Ajax是很好的选择。

  不适用场景

  部分简单的表单

  虽然表单提交可以从Ajax获取最大的益处,但一个简单的评论表单极少能从Ajax得到什么明显的改善。而一些较少用到的表单提交,Ajax则 帮不上什么忙。

  搜索

  有些使用了Ajax的搜索引擎如Start.com和Live.com不允许使用浏览器的后退按钮来查看前一次搜索的结果,这对已经养成搜索习惯的用户 来说是不可原谅的。现在Dojo通过iframe来解决这个问题。

  基本的导航

  使用Ajax来做站点内的导航是一个坏主意,为什么不把时间放在让系统程序作的更好上呢?

  替换大量的文本

  使用Ajax可以实现页面的局部刷新,但是如果页面的每个部分都改变了,为什么不重新做一次服务器请求呢?

  对呈现的操纵

  Ajax看起来像是一个纯粹的UI技术,但事实上它不是。它实际上是一个数据同步、操纵和传输的技术。对于可维护的干净的web应用,不使 用Ajax来控制页面呈现是一个不错的主意。JavaScript可以很简单的处理XHMTL/HTML/DOM,使用CSS规则就可以很好的表达数据显示。

  存在的问题

  用JavaScript作的Ajax引擎,JavaScript的兼 容性和DeBug都是让人头痛的事;

  Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带 来困扰?D?D用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新 后给用户提示等;

  中间过程不能被bookmark。解决方法: GoogleMaps通过在页面上提供一个”link to this page”的办法来解决。另外,还可以通过url链接中加无效的?^标记来解决,但还未验证。

分享到:
评论

相关推荐

    Ajax应用场景.txt

    Ajax不是万能的,在适合的场合使用Ajax,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。

    AJAX使用场景分析

    ### AJAX使用场景分析 #### 一、表单驱动的交互 ...综上所述,AJAX在多种应用场景中都能提供显著的优势,但同时也需要注意其适用范围和潜在的问题。合理利用AJAX技术,可以极大地提升用户体验和应用程序的性能。

    70个流行的ajax应用的演示和源码下载.pdf

    6. Ajax Examples at BackBase:BackBase公司提供的一些AJAX技术示例,涵盖了多种AJAX应用场景。 7. Ajax Examples at Rico:Rico公司提供的一些AJAX技术示例,涵盖了Inner HTML、JavaScriptUpdater等技术。 8. Ajax...

    Ajax 异步传输应用

    Ajax应用场景 Ajax广泛应用于各种Web应用中,包括: - **动态加载内容**:例如,在滚动页面时,自动加载更多文章或评论。 - **表单验证**:在用户输入时即时验证数据,减少错误提交。 - **实时通信**:聊天应用、...

    ajax 宝典ajax 宝典

    在部署Ajax应用时,需要注意跨域问题,即浏览器的同源策略限制。可以通过设置服务器的CORS头或使用JSONP(JSON with Padding)来解决这个问题。 ### 7. 工具与库 许多库和框架简化了Ajax开发,如jQuery的`$.ajax()...

    冯威ajax 全部源码

    包含的源码中,可能包含了各种Ajax应用场景,如表单无刷新提交、分页加载、实时搜索等。通过分析这些实例,可以更好地理解Ajax在实际项目中的运用,提升开发能力。 7. **跨域问题** 在实际开发中,Ajax可能会遇到...

    ajax实例

    综上所述,这个压缩包中的实例涵盖了各种Ajax应用场景,包括但不限于内容管理、图片展示、弹出窗口、菜单系统等,对于学习和理解Ajax技术及其在实际项目中的应用非常有帮助。同时,这些实例可能依赖于特定的框架或库...

    很典型的ajax应用

    在这个“很典型的ajax应用”中,我们将深入探讨如何实现一个输入关键字动态显示列表的简单实例,以及如何将Ajax技术应用于Java后端。 首先,让我们从用户界面(UI)开始。在这个实例中,用户会有一个输入框用于输入...

    AJAX 参考手册 ajax 教程

    AJAX 应用场景 - **动态内容加载**:如无限滚动、搜索建议等,无需刷新整个页面即可获取新内容。 - **表单验证**:在提交前验证用户输入,提供即时反馈。 - **局部更新**:例如聊天应用中的消息实时更新,或者地图...

    ajax使用简单demo

    常见的Ajax应用场景 - **表单提交**:在不刷新页面的情况下提交表单,提升用户体验。 - **实时更新**:如股票价格、天气预报等实时信息的更新。 - **分页加载**:在滚动页面时,自动加载更多内容。 - **动态加载...

    AJAX参考手册大全6本合集.chm

    **AJAX应用场景** AJAX广泛应用于各种Web应用,如动态表单提交、实时聊天、地图导航、新闻滚动、无限滚动加载、实时搜索建议等。通过局部刷新,它可以提供流畅的用户体验,避免了整个页面的刷新带来的延迟感。 **...

    疯狂ajax讲义

    ### 三、AJAX应用场景 - **动态内容加载**:例如,新闻网站可以根据用户滚动页面的行为动态加载新的文章列表。 - **表单验证**:无需提交整个表单即可验证输入字段的有效性,提高用户体验。 - **实时通信**:如聊天...

    传智播客\Ajax\传智播客ajax课堂源码

    传智播客的课程通常注重实践,因此这些源码涵盖了各种Ajax应用场景,包括数据的获取、处理和展示,以及与服务器的交互等。 【标签】:“传智播客”代表了教育品牌,“Ajax”指代课程的主题,即前端开发中的重要技术...

    AJAX在Java Web中的应用实例

    **动态更新下拉列表** - 另一个常见的AJAX应用场景是动态更新下拉列表。例如,当用户在选择国家时,根据所选国家动态加载对应的省份或城市列表。这种交互式的下拉列表可以使用AJAX从服务器获取数据,而无需重新加载...

    Ajax 入门精通 Ajax 入门精通

    3. **Ajax 应用场景** - **动态数据加载**:如无限滚动,用户滚动到页面底部时,自动加载更多内容。 - **表单验证**:在提交前进行客户端验证,减少服务器负担。 - **实时更新**:比如聊天室、股票报价等实时信息...

    ajax安装程序+jar包

    5. **Ajax应用场景**: - 表单验证:在提交前验证用户输入,无需跳转页面。 - 数据加载:如Google Maps中平滑地加载地图区域,或者无限滚动加载新闻文章。 - 实时通信:如聊天室或实时股票报价。 - 用户界面更新...

    超酷的AJAX源码和Demo(1)

    在后续的“超酷的AJAX源码和Demo(2)”等资源中,可能会介绍更复杂的AJAX应用场景,比如使用Ajax进行分页加载、实现轮询更新、或者是利用AJAX配合WebSockets实现双向通信等。通过逐步学习和实践,开发者可以逐步...

    AJAX入门实例-简单易懂

    通过学习这个实例,你可以掌握创建异步Web应用的基本技巧,提高用户体验,并为后续更复杂的AJAX应用场景打下基础。在实践中,你将了解到如何结合C#、JavaScript和ASP.NET AJAX库来创建动态、交互性强的Web页面。

Global site tag (gtag.js) - Google Analytics