Ajax技术全解之二

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

虽然Ajax所需的基础架构已经出现了一段时间,但直到最近异步请求的真正威力才得到利用。能够拥 有一个响应极其灵敏的Web站点确实激动人心,因为它最终允许开发人员和设计人员使用标准的 HTML/CSS/JavaScript堆栈创建“桌面风格的(desktop-like)”可用性。

与传统的web应用比较

传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并 处理传来的表单,然后返回一个新的网页。这个做法浪费了许多带宽,因为在前后两个页面中的大部分 HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务 器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数 据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上 完成,所以Web服务器的处理时间也减少了。

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一 种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理 响应,而不阻塞用户。

在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的 功能:

动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。

提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在Amazon的购物车页面,当 更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载32K的数据。如果使用Ajax计算新的 总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。

消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数 据只刷新列表而不是整个页面。

直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可 以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器, 并刷新表格,使其包含静态、只读的数据。

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

Ajax基础详解教程(二)_AJAX相关

在上篇文章给大家介绍了Ajax基础详解教程(一),讲到Ajax中open方法的第三个参数异步和同步的问题,今天呢,就来继续往下唠,先接着上回的代码 var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Mic

JS模拟面向对象全解(二、类型与赋值)_javascript技巧

类型赋值类似变量传递的问题. 基本数据类型不必说,传值的. 复制代码 代码如下: var a=5; var b=a; b=3; alert(a);//提示5 alert(b);//提示3 由此观之,发现改变b不会改变a,因为都是变量的值在来回传递,和变量本身没有关系. 对象类型,传址的. 复制代码 代码如下: var a=new Object(); a.x=5; var b=a; b.x=3; alert(a.x);//提示3 alert(b.x);//提示3 这样,由于传址,所以b即是a,a即

关于java 的 Classpath全解<java入门之二>

关于java 的 Classpath全解<之二>作者 丑丑牛声明: 欢迎转载, 如果能不把俺的little大名删掉最好注意,开发环境往往不去读系统路径, 这也就是在外面运行的东东挺溜的进了开发环境就死菜的原因喽.比如说jbuilder, jdevoloper从菜单project->project properties...->paths标签->Add...->添加定义好的library点ok或者new->输入name和classpath->ok这个东东就被添

CDN学习笔记二(技术详解)

一本好的入门书是带你进入陌生领域的明灯,<CDN技术详解>绝对是带你进入CDN行业的那盏最亮的明灯.因此,虽然只是纯粹的重点抄录,我也要把<CDN技术详解>的精华放上网.公诸同好. 第一章    引言    "第一公里"是指万维网流量向用户传送的第一个出口,是网站服务器接入互联网的链路所能提供的带宽.这个带宽决定了一个 网站能为用户提供的访问速度和并发访问量.如果业务繁忙,用户的访问数越多,拥塞越严重,网站会在最需要向用户提供服务时失去用户.(还有"中

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

web|详解 2.2.4 部署HTML文件 在helloapp目录下加入index.htm文件,这个文件仅仅用来显示一串带链接的字符"Welcome to HelloApp", 它链接到login.jsp文件.以下是index.htm文件的代码: <html><head><title>helloapp</title></head><body ><p><font size="7"

Web 2.0中AJAX技术应用详解

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