|
什么是AJAX
& X4 d7 x# P: Y1 L1 n& R" v; \8 |现在应聘网站开发,势必会遇到AJAX这个词语。到到底什么是AJAX呢?3 d8 t$ r( `6 O+ t7 v6 R' b$ w) |9 M
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 J+ g5 M* s7 k$ W' L
9 ~: ]3 L- Z, ^8 [4 ?- w# ~
主要包含了以下几种技术:
0 u0 o/ l8 Y9 r' A6 \. ~" ~3 p! H) Z- O! W1 V# b
Ajax(Asynchronous JavaScript + XML)的定义 0 H; F' ]# y6 c
H8 W: B* }' e0 [4 k1 V" N
基于web标准(standards-based presentation)XHTML+CSS的表示;
/ z6 ^- j5 S2 v5 q* f. Q! W2 e" h" P9 u% R
使用 DOM(Document Object Model)进行动态显示及交互;
2 H' q8 f. \1 c3 n$ k- W) [) M' ?, H" p0 f" {+ r% d
使用 XML 和 XSLT 进行数据交换及相关操作; 9 O+ p) x8 O; U9 f+ P3 [( t8 `1 `
$ F3 @6 \' S. m7 [3 |9 O. a8 f# y
使用 XMLHttpRequest 进行异步数据查询、检索;
' l+ k8 @8 D" X6 l: l ~' d) [& w
( H$ H) q x, g" l; }7 w6 [2 p使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文a
" l7 u, n" R% s$ x3 {" t9 H
) d) x/ x; Q. h- [5 r类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
/ A: ]+ i& A l* y
" R' i2 j* p# Z' i: x; nAJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。) K/ d' I# U) d4 o9 h
$ T6 p4 M# z) L7 F4 u1 d" R与传统的web应用比较' h, A9 G% @/ q7 c0 ^
0 f7 y( l. u; E2 {3 g, ]4 {% X( D传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 7 g3 P: W% I1 ~9 q8 J6 M" b4 `( i
* h) q3 D( n5 D6 G与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
' E8 r/ e* c. T7 `5 b( l; @) n9 ^
- _' l6 B* `$ L3 k' AAjax应用程序的优势在于:
4 `, v* D# x, i) @2 z" H; e& ]# V: ~
1. 通过异步模式,提升了用户体验8 ~+ {$ J9 [- h4 r! R4 r' Q% v8 m6 G
7 w& V( M% i3 i
2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用6 B, {; ?. q8 L
$ x, W! _, p( L8 I+ b/ {
3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
; J: I2 Y, _1 p( C' c( Y1 [; o9 c: g; y' P" X4 y' Q/ c
Ajax的工作原理
! ~6 i+ T# A& f9 m f V! T% \$ {/ \
- k9 ^; K1 O8 U( f Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
% E$ {( w" r/ o8 ~6 b/ h# U2 e V7 x8 A5 E. \
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:
; k8 {( Z! z0 u' ] x7 j' B0 h: Y( j! m- ^1 l
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。
5 t/ n; z6 `6 C! W. ~/ n. t
2 { {" H9 y" p7 X+ R" `/ E 提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
( {, K" c6 y5 a; L. N直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
) @8 R- T: N( n
- @2 y& P. k: D4 L- D, u9 j# m 一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。
2 c5 e0 \- t" w' N. I5 Z
2 C6 N* J" N. f* X0 U& Z2 V+ d# q: K Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。9 r% F# w9 |7 C' U$ H& i3 k
, z% a- z) t7 V: d# e+ U熟悉Ajax的基本框架后,就可以着手去学习Ajax了。我给大家推家一下我的入门书人邮的《精通 Ajax---基础概念、核心技术与典型案例》。不知道书店还有没有,不过网上还能看到http://www.china-pub.com/38158。希望大家可以掌握这门技术。 |
评分
-
2
查看全部评分
-
|