Ajax应用场景-Ajax使用说明

ajax

Ajax不是万能的,在适合的场合使用Ajax,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。Ajax的特点在于异步交互,动态更新web页面,因此它的适用范围是交互较多,频繁读取数据的web应用。现在来看几个Ajax的应用实例,读者可以了解如何使用Ajax技术改进现有的web应用系统。 

场景1.数据验证 

在填写表单内容时,需要保证数据的唯一性(例如新用户注册填写的用户名),因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式:一种是直接填写,然后提交表单,这种方式需要将这个页面提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担;第二种方式是改进了的验证过程,用户可以通过点击相应的验证按钮,打开新窗口查看验证结果,但是这样需要新开一个浏览器窗口或者对话框,还需要专门编写验证的页面,比较耗费系统资源。而使用Ajax技术,可以由XMLHttpRequest对象发出验证请求,根据返回的HTTP响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不加重服务器负担。 

场景2.按需取数据 

分类树或者树形结构在web应用系统中使用得非常广泛,例如部门结构,文档得分类结构常常使用树形空间呈现。以前每次对分类树得操作都会引起页面重载,为了避免这种情况出现,一般不采用每次调用后台得方式,而是一次性将分类结果中得数据一次性读取出来并写入数组,然后根据用户的操作,用JavaScript来控制节点的呈现,这样虽然解决了操作响应速度,不重复载入页面以及避免向服务器频繁发送请求的问题,但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话(这种情况很普遍的),那么读取的数据中就会有相当大的冗余,浪费了用户的资源。特别是在分类结构复杂,数据庞大的情况下,这种弊端就更加明显了。 

现在应用Ajax改进分类树的实现机制。在初始化页面时,只获取第一级子分类的数据并且显示;当用户点开一级分类的第一节点时,页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据;如果再请求已经呈现的二级分类的某一节点时,再次向服务器请求当前分类所属的三级子分类的所有数据,以此类推。页面会根据用户的操作向服务器请求它所需要的数据,这样就不会存在数据的冗余,减少了数据下载总量。同时,更新页面时不需要重载所有内容,只更新需要更新的那部分内容即可,相对于以前后台处理并且重载的方式,大大缩短了用户的等待时间。 

场景3.自动更新页面 

在web应用中有很多数据的变化时十分迅速的,例如最新的热点新闻,天气预报以及聊天室内容等。在Ajax出现之前,用户为了即使了解相应的内容必须不断刷新页面,查看是否有新的内容变化,或者页面本身实现定时刷新的功能(大多数聊天室页面就是这样做的)。有可能会发生这种情况;有一段时间网页的内容没有发生任何变化,但是用户并不知道,仍然不断的刷新页面;或者用户失去了耐心,放弃了刷新页面,却很有可能在此有新的消息出现,这样就错过了第一时间得到消息的机会。 

应用Ajax可以改善这种这种情况,页面加载以后,会通过Ajax引擎在后台进行定时的轮询,向服务器发送请求,查看是否有最新的消息。如果有则将新的数据(而不是所有数据)下载并且在页面上进行动态的更新,通过一定的方式通知用户(实现这样的功能正是JavaScript的强项)。这样即避免了用户不断手工刷新页面的不便,也不会因为重复刷新页面造成资源浪费。 

时间: 2024-10-02 11:22:10

Ajax应用场景-Ajax使用说明的相关文章

Ajax应用场景简析

ajax Ajax适用场景 1.表单驱动的交互 传统的表单提交,在文本框输入内容后,点击按钮,后台处理完毕后,页面刷新,再回头检查是否刷新结果正确.使用Ajax,在点击sunmit按钮后,立刻进行异步处理,并在页面上快速显示了更新后的结果,这里没有整个页面刷新的问题. 2.深层次的树的导航 深层次的级联菜单(树)的遍历是一项非常复杂的任务,使用JavaScript来控制显示逻辑,使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担. 我们以前的对级联菜单的处理多数是这样的: 为了避免每次

探讨jQuery的ajax使用场景(c#)_jquery

一:jQuery.ajax语法基础 jQuery.ajax([options]) 概述:通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.使用这个方法可以获得更多的灵活性. 数据类型$.ajax()函数依赖服务器提供的信息来处理返回的数据.通过dataType选项还可以指定其他不同数据处理方式.其中,text和xml类型返回的数据不会经过处理.如果指定为

jQuery ajax:Baidu ajax

你没有看错标题,本文的确是在讲Baidu ajax,不过是很久很久以前的版本了. 由于jQuery ajax 模块有800+行,而核心函数jQuery.ajax就有380+行,直接分析这段代码很容易被代码逻辑弄晕. 所以 我们先分析一段简单的ajax代码,来自早期的百度七巧板项目. 通过这个来先复习一遍ajax的知识. baidu.ajax.request分离版 /** * 发送一个ajax请求 * @author: allstar, erik, berg * @name ajax.reques

原生Ajax 和jQuery Ajax的区别示例分析_jquery

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: 复制代码 代码如下: <!doctype html> <

给初学ajax的人 ajax函数代码_AJAX相关

复制代码 代码如下: /* 调用方式: 1.POST方式 var txt = escape(sender.value); //document.getElementById("<%= txtName.ClientID %>").value); var data = "name=" + txt + "&pwd=" + txt; var option = { "url": "handler/Handl

jQuery ajax(复习)—Baidu ajax request分离版_javascript技巧

你没有看错标题,本文的确是在讲Baidu ajax,不过是很久很久以前的版本了. 由于jQuery ajax模块有800+行,而核心函数jQuery.ajax就有380+行,直接分析这段代码很容易被代码逻辑弄晕. 所以我们先分析一段简单的ajax代码,来自早期的百度七巧板项目. 通过这个来先复习一遍ajax的知识. baidu.ajax.request分离版 复制代码 代码如下: /** * 发送一个ajax请求 * @author: allstar, erik, berg * @name aj

jQuery Ajax 实例代码 ($.ajax、$.post、$.get)_jquery

$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType }); 二.$.ajax的参数描述 参数 描述 url 必需.规定把请求发送到哪个 URL. data 可选.映射或字符串值.规定连同请求发送到服务器的数据. success(data, textS

从Ajax到JQuery Ajax学习_jquery

Ajax篇 XMLDocument和XMLHttpRequest对象 第一:创建XMLHttpRequest请求对象 复制代码 代码如下: function getXMLHttpRequest() { var xRequest=null; if(window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ xRequest=new Active

ajax与jquery.ajax中文参数post传递乱码处理方法

ajax与jquery.ajax中文参数post传递乱码处理方法 今天在做项目时,需要用到Ajax,之前我在用GET方式传递中文参数时,只需要在后台程序中设置页面编码为GB2312即中文能正常显示,可是这次由于表单项目较多,不适合用GET方式传递,只能用POST方式,但发现后台程序中设置编码为GB2312时中文还是显示的乱码.经过一番研究问题才最终得到解决.     解决此问题的方法非常简单,只需要在JS处理参数时用escape()函数处理一下即可,而且不需要再用unescape()解码,这个方