该用户从未签到
|
什么是AJAX$ m& i4 J0 c' R7 }
现在应聘网站开发,势必会遇到AJAX这个词语。到到底什么是AJAX呢?
2 j/ i5 f6 A. p+ V1 \AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 % }4 h7 e) f. K7 V, R1 H
# ]- ?; }% n1 @0 V. m( C主要包含了以下几种技术:
* q. \8 l- `+ o/ {' x% o, `4 O
* R! c8 h/ g8 t; j( Z: jAjax(Asynchronous JavaScript + XML)的定义 $ f# p9 u t4 T! Q; t/ { i
0 r# k4 p2 j* `+ |基于web标准(standards-based presentation)XHTML+CSS的表示; 2 j. H3 q% [% T" M7 o( |; }, ^+ \4 [$ P
) T# s- Z6 r, {4 K& q: ?使用 DOM(Document Object Model)进行动态显示及交互;
3 X8 D& L$ c8 m7 y9 w# _2 _3 w$ E. k6 @* x9 o: c* t
使用 XML 和 XSLT 进行数据交换及相关操作;
9 C! E- g9 S2 n% N: W
* G! A) U+ i. l- L! f% `8 ~0 S使用 XMLHttpRequest 进行异步数据查询、检索;
1 w' E& o m: O( X
% T$ M/ l7 D9 S( ^使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文a
; G- G3 X' j; I5 c d$ R
* z, r& f$ a+ Y: N类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。 - Y8 e* O, ^! n
! S% z1 I8 f8 l7 l, @: B' S, R$ Z; ]) ^
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。* P( c! f6 i: J" u; I
+ P5 q5 Y6 {8 a" O2 [ ]5 k' k3 G与传统的web应用比较
) t7 f4 k! {: `8 P1 b3 l
' m4 ~( t+ k f; X F) v9 |! U传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 1 w$ n! p R) m2 M
( x3 w, F$ J/ [' L% C
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
! z6 E! r. @( S! I# l: m
( S+ d* P& N! ~8 r: CAjax应用程序的优势在于:
& V% I! W! h3 S& _" X/ E/ a* }$ o( y$ L6 S( g+ T* w9 W$ Y
1. 通过异步模式,提升了用户体验2 o9 D; ^, q6 k1 r( U. r$ e& A" N e
8 b t( b- ?2 V' G- p/ f: D! _2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用8 f7 p6 q2 _$ q/ g
5 N8 r8 a' X1 K. J. d3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。- z. g2 W. d7 M6 B" G
6 z S; C3 Z4 X+ o
Ajax的工作原理
4 g( [/ w1 f: N2 s& }6 t$ h3 K& ]$ m) R$ t& O
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
/ h' l9 V! _ X5 y i, L5 d( y) [7 F+ b& P
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:- Q; D7 b- r8 u" m X& a
* ]( _; g% I) _6 Q 动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。
, f+ M, S7 j6 L5 g3 G" `, G5 ]% b- n4 N5 e- i9 g
提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
/ ^7 s$ G9 X% W6 h' G直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。6 P/ X* e3 g7 w8 L3 a' b+ F4 ?/ r4 D
* p. ]2 V% H! `: ?2 P, @4 f
一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。) k1 u" l( B* |+ i# h1 I/ w; C$ |1 X( M
$ b5 F: A6 d4 {) m2 e' ^1 o
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。1 T$ l! y- K* I5 ~1 Y' U$ ~
7 W/ r5 m2 J$ a6 y! \1 O
熟悉Ajax的基本框架后,就可以着手去学习Ajax了。我给大家推家一下我的入门书人邮的《精通 Ajax---基础概念、核心技术与典型案例》。不知道书店还有没有,不过网上还能看到http://www.china-pub.com/38158。希望大家可以掌握这门技术。 |
评分
-
2
查看全部评分
-
|