该用户从未签到
|
什么是AJAX& S7 f. |; x3 @( B+ s
现在应聘网站开发,势必会遇到AJAX这个词语。到到底什么是AJAX呢?
' ?3 r- o) f& x3 g6 \AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
% a/ h8 _3 ~: R# j! _* p$ |7 }/ {% R1 E0 z6 S
主要包含了以下几种技术: 2 i8 H8 A0 y: ^, @% x
, S3 T+ j, @; R. d2 x k! uAjax(Asynchronous JavaScript + XML)的定义 1 [0 c4 d5 B- B6 g' x
! u7 [1 \6 u1 `( e5 M; ^$ X$ y2 v/ G5 i
基于web标准(standards-based presentation)XHTML+CSS的表示;
! ` L) E+ }0 x+ o) L
+ u; A8 a; }3 g3 ?" j; O# O使用 DOM(Document Object Model)进行动态显示及交互; : p2 f, h+ h* W6 a; F; Y) V
3 ~3 ]3 L& f b2 x使用 XML 和 XSLT 进行数据交换及相关操作; 5 A0 j/ N: P& L+ i* I
- O. W V% G% y/ d
使用 XMLHttpRequest 进行异步数据查询、检索; / R( F6 R* o8 ?! q
: ~. [. J0 t+ D, K% f4 h& W( \0 o: l
使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文a ( ]5 t O1 X) h6 f/ |% s3 o
' D! A* X$ y T$ {* U
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
# E* c) n' h( J$ D$ t0 f8 `8 {* _& O$ M
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
+ C& `+ O5 a5 P2 |" m4 Z, e& w; N. C6 `' K+ [2 u
与传统的web应用比较% {, ?& X: Z7 l! W, i
' m3 _6 j8 f4 i% e, ~传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
( q C* l7 a2 g; e( d T3 s+ P5 Q9 |
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。3 O( L9 k0 Q, W5 t$ O
a9 A* i3 K; qAjax应用程序的优势在于:
- O$ Z% |9 B( G
% t# l+ M. F% Y6 F1. 通过异步模式,提升了用户体验
1 [, i8 D9 F, [- I! w7 y, t @ q" X
" i! y" y! [7 L8 f' D0 y2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
% V( c2 N8 w: @# c1 @# E
; P9 n- M5 Z6 O8 h3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
$ D' |6 w6 e+ u# r8 T+ Y' m$ R5 X, E' ?1 c% j: d: E3 j) m; R( o" A& X. {% }
Ajax的工作原理
$ U: Z0 m4 @# @* S% F' B, ]( E& s& ^$ S% d8 H
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
9 V6 \# W8 X5 D+ v! Q
0 D2 ]6 w3 D; ^- K, {6 T8 [5 N 在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:( M9 c: M0 e* H- T# M: I" N' y
+ i" h5 r% a; ^6 H1 K3 v% O
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。
. ]$ v& o% C- ?6 f$ X8 k5 h3 Z
! z0 \, ^6 S/ @. ?9 B( m) b& f 提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
9 m( x8 n& o9 ~1 L/ K直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
- E9 r$ i3 v4 I2 x
9 v6 i: t2 F+ j# w: V' s' f 一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。$ X8 d I S, M: b% H1 [; J u
# |2 \: G2 n/ n! U# g Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
2 P1 {2 Q! {; D" L6 A" e7 n; h9 e, s" U# r7 x$ x+ }, X* z$ s
熟悉Ajax的基本框架后,就可以着手去学习Ajax了。我给大家推家一下我的入门书人邮的《精通 Ajax---基础概念、核心技术与典型案例》。不知道书店还有没有,不过网上还能看到http://www.china-pub.com/38158。希望大家可以掌握这门技术。 |
评分
-
2
查看全部评分
-
|