Ajax技术全解之三

Ajax适用场景

1.表单驱动的交互

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

2.深层次的树的导航

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

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

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

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

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

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

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

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

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

时间: 2024-10-09 04:35:25

Ajax技术全解之三的相关文章

Ajax技术全解之四

AJAX全称为"AsynchronousJavaScriptandXML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的所有技术都是在很多年前就已经存在了,然而Ajax以一种崭新的方式来使用所有的这些技术,使得古老的B/S方式的Web开发焕发了新的活力,迎来了第二个春天. 具体来说,Ajax基于以下的技术: XHTML:对

Ajax技术全解之一

AJAX全称为"AsynchronousJavaScriptandXML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.它有机地包含了以下几种技术: Ajax(AsynchronousJavaScript+XML)的定义:基于web标准(standards-basedpresentation)XHTML+CSS的表示:使用DOM(DocumentObjectModel)进行动态显示及交互:使用XML和XSLT进行数据交换及相关操作:使用XMLHttpR

Ajax技术全解之二

术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验.在Ajax之前,Web站 点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的"思考时间"同步.Ajax提供与 服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来.借助于Ajax,可以在用户单击按钮 时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库.当请求 返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面.

Web 2.0中AJAX技术应用详解

ajax|web|详解 今年互联网上比较火热的话题当然是关于WEB2.0的应用,其中AJAX又是WEB2.0的核心之一.AJAX是Asynchronous JavaScript and XML 的缩写. 它并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:使用XHTML和CSS标准化呈现:使用DOM实现动态显示和交互:使用XML和XSLT进行数据交换与处理:使用XMLHttpRequest进行异步数据读取:最后用JavaScript绑定和处理所

Tomcat与Java Web开发技术详解连载之三

web|详解 2.2.8 创建并发布WAR文件 Tomcat既可以运行采用开放式目录结构的Web应用,也可以运行WAR文件.在本书配套光盘的sourcecode/chapter2/helloapp目录下提供了所有源文件,只要把整个helloapp目录拷贝到/webapps目录下,即可运行开放式目录结构的helloapp应用.在Web应用的开发阶段,为了便于调试,通常采用开放式的目录结构来发布Web应用,这样可以方便地更新或替换文件.如果开发完毕,进入产品发布阶段,应该将整个Web应用打包为WAR

站长推荐:Ajax技术概述与现状应用

ajax|站长 AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的所有技术都是在很多年前就已经存在了,然而Ajax以一种崭新的方式来使用所有的这些技术,使得古老的B/S方式的Web开发焕发了新的活力,迎来了第二个春天. 具体来说,Ajax基于以下的

基于AJAX技术的DataGrid控件编程

ajax|datagrid|datagrid控件|编程 简介 在传统的Web开发中,每次DataGrid控件填充或更新都相应于一次到服务器的数据回馈.但是,借助于AJAX技术,我们可以在不进行表单提交(刷新)的情况下即可以填充DataGrid控件. 在本文中,我们通过一个简单示例并借助于一个DropDownList控件的帮助来讨论如何达到这一目的.在这个例子中,我们使用了一个DropDownList控件:一旦改变DropDownList的值,它即用相应的城市名来填充DataGrid控件,在此过程

JavaScript中浅讲ajax图文详解_javascript技巧

1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

你真正的了解Ajax?Ajax技术简述

Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来使用所有的这些技术,使得古老的B/S方式的Web开发焕发了新的活力,迎来了第二个春天. 具体来说,Ajax基于下列这些核心技术: XHTML:对应W3C的XHTML规范,目前是XHTML1.0. CSS:对应W3C的CSS规范,目前是CSS2.0. DOM:这里的DOM主要是指HTML DOM,XM