ajax认识

原创 2007年09月29日 17:37:00

术语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请求来更新服务器,并刷新表格,使其包含静态、只读的数据。

 

Ajax的优势

1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”,所以最大可能在减少了冗余请求和响影对服务器造成的负担;

2、无刷新更新页面,减少用户实际和心理等待时间;

首先,“按需取数据”的模式减少了数据的实际读取量,打个很形象的比方,如果说重载的方式是从一个终点回到原点再到另一个终点的话,那么Ajax就是以一个终点为基点到达另一个终点;



图5-1

图5-2

其次,即使要读取比较大的数据,也不用像RELOAD一样出现白屏的情况,由于Ajax是用XMLHTTP发送请求得到服务端应答数据,在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面的,所以在读取数据的过程中,用户所面对的也不是白屏,而是原来的页面状态(或者可以加一个LOADING的提示框让用户了解数据读取的状态),只有当接收到全部数据后才更新相应部分的内容,而这种更新也是瞬间的,用户几乎感觉不到。总之用户是很敏感的,他们能感觉到你对他们的体贴,虽然不太可能立竿见影的效果,但会在用户的心中一点一滴的积累他们对网站的依赖。

3、更好的用户体验;
4、也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本;
5、Ajax由于可以调用外部数据;
6、基于标准化的并被广泛支持和技术,并且不需要插件或下载小程序;
7、Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离);
8、对于用户和ISP来说是双盈的。

Ajax的问题

1、一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;
2、用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是让人头痛的事;

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

4、对流媒体的支持没有FLASH、Java Applet好;

 

对ajax的理解

这几天在面试过程中也有被问到过ajax的相关问题,现在来简单做一个总结。 首先ajax是Asynchronous JavaScript and XML的全称,Asynchronous是异步的意思,这...
  • zhi_Miss
  • zhi_Miss
  • 2016年03月19日 17:25
  • 2180

认识ajax

认识ajax      AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步...
  • KangLiangBin
  • KangLiangBin
  • 2017年05月23日 15:30
  • 109

认识AJAX

xhr对象的属性与方法详解 属性: -readyState: HTTP 请求的状态 -responseText: 响应体(不包括头部) -responseXML: 对请求的响应,解析...
  • zuiziyoudexiao
  • zuiziyoudexiao
  • 2017年07月27日 18:48
  • 72

Ajax认识

我所理解的Ajax入行时间不太长,感觉在Ajax方面有自己的一部分心得,有什么问题,欢迎大家指正!1. 什么是Ajax关于这个,就不详细说了,具体英文缩写,到处也都能见到,不过还是写一下; AJAX...
  • weixin_38388339
  • weixin_38388339
  • 2017年05月28日 14:04
  • 116

ajax 认识

ajax:xmlHttpRequest:ajax是不是通过浏览器的方式将数据提交到服务器上的,而是通过javascript将数据提交的服务器上,在通过javascript接受到数据。注意:接受到的数据...
  • Liaq325
  • Liaq325
  • 2012年11月08日 20:24
  • 208

认识Ajax

  认识Ajax   有一个多月没来写了,主要是过年,都有些事情,在这个假期中自己并没怎么上网,在家看了JAVA与模式,以及复习了下AJAX,在去年微软还在推行atlas的时候自己就在学习这方面内容,...
  • garnettcwm
  • garnettcwm
  • 2008年08月28日 16:55
  • 284

Ajax基础(一):认识Ajax

        感觉自己是被一群人忽悠了,既然说了写点什么就写吧。我也不是什么技术牛人。充其量是个不是很菜得菜鸟而已。闲话少说,写点东西吧       Ajax对于大家来说都不是很陌生,都知道Ajax...
  • Java_Chaos
  • Java_Chaos
  • 2008年05月22日 21:16
  • 250

Android初试--了解和认识Android

1.了解Android        Android一词本义指“机器人”,是Google于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统、中间件、用户界面和应用...
  • guizhaiteng
  • guizhaiteng
  • 2013年09月17日 17:57
  • 1417

ASP.NET的简单认识

ASP.NET是.NET FrameWork的一部分,是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术,它可以在通过HTTP请求文档时再在Web服务器上动态创建它们。 指 Active ...
  • u013036404
  • u013036404
  • 2015年07月31日 16:45
  • 1417

对于ASP.net学习的认识

【摘自一个老师的问答】以下是web开发学习的路线:    一 基础阶段    C#基本语法+Asp.Net基本控件+数据库,另外要学习DHTML和CSS为网页布局和以后的Ajax打基础。    小项目...
  • auroralr
  • auroralr
  • 2010年09月20日 10:06
  • 271
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax认识
举报原因:
原因补充:

(最多只允许输入30个字)