该用户从未签到
|
什么是AJAX6 M1 s, }. g' h
现在应聘网站开发,势必会遇到AJAX这个词语。到到底什么是AJAX呢?
* }! H/ A( \! I% g& u; @# f& u; x7 VAJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
. w4 N1 l( \- e) f, M0 D2 \( j B3 Q5 d/ r1 x4 v# h) I2 ^
主要包含了以下几种技术:
) K; ^, m1 _1 L6 F' b8 ~9 l
; T! \8 k6 L# y4 @% BAjax(Asynchronous JavaScript + XML)的定义 $ m1 b) a: X" h# U5 O" J1 R6 y
1 h% S" Y# a2 ?) b1 K: m# @基于web标准(standards-based presentation)XHTML+CSS的表示; 1 e+ i3 Y( a) W& J
% h5 ?+ D- t- a2 U
使用 DOM(Document Object Model)进行动态显示及交互;
3 Q6 ] b8 [- I9 l
+ A6 {8 C) m& p) u* Z使用 XML 和 XSLT 进行数据交换及相关操作;
" y( q2 `) }9 t; x. U: z. }' y! `- D8 z. h
使用 XMLHttpRequest 进行异步数据查询、检索; ' b. X; N; X* p& C3 u$ B
" G) n$ i4 u7 M' M0 v( K) }使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文a + x8 R. u1 P: N( x- d( N
9 ^% a( V/ T! v
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
, I; p* C) n; S: ^$ I" k; G$ S4 W8 @! H6 ?5 f9 J; G
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。" t M. u- Q4 ]& K* |
, p+ D& t# U! l; O( Z与传统的web应用比较
+ H4 v& S2 c8 I) G1 W
/ h# R7 h% e6 c$ W" u0 U r传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 ' `8 o; O# q" N' P
X# R( b+ h* B
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
, `4 _% M5 \& K5 y9 S1 q: T) c% }. B0 @1 M4 T# ?* S" |
Ajax应用程序的优势在于:+ N6 I+ ~# {$ ` A. T1 ]7 z, S! M6 k
+ J6 u. p. K) n! a4 D0 |7 ^& l! y8 i1. 通过异步模式,提升了用户体验. O- ], e2 a! E, p' i
, j) }2 ^# D g0 B. U/ t# ~7 i
2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用; Z5 g+ `$ \9 L% N( A
( _# E0 A6 {. U1 W: m
3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。* r$ I$ L# J! D1 d; J6 a
3 G8 c1 a; O# B
Ajax的工作原理
' D4 s4 m1 q- k! I$ E( x$ a) e0 |
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
7 R* D) l) v9 ~( R+ U: h5 {* ?0 Y( w4 t" m+ f; M+ F. B7 Q9 l3 N& S
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:
6 L& R$ l8 W+ p) J% i" O
* J' t. w7 K8 i0 z; m 动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。 ) c3 w) y# r6 Y5 k
+ q( T& Q+ f k& V9 B& G' L8 Q1 |! x- O 提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
' @1 |9 w: z: h+ B5 x直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
/ w, j4 S. M* g. U. X
5 d7 e' A _6 @; G. Q4 \ 一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。' G. |# R) f- m4 X& E* J+ }$ C5 i+ h
; I# K5 l' o. M5 N1 ^1 G; i& z. E5 Y0 x Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。! q" G1 w6 L5 X3 ]+ h
6 T7 j# }( x2 ~' D A" y5 V2 U% n% b
熟悉Ajax的基本框架后,就可以着手去学习Ajax了。我给大家推家一下我的入门书人邮的《精通 Ajax---基础概念、核心技术与典型案例》。不知道书店还有没有,不过网上还能看到http://www.china-pub.com/38158。希望大家可以掌握这门技术。 |
评分
-
2
查看全部评分
-
|