该用户从未签到
|
什么是AJAX+ K9 ~7 ]# S9 M
现在应聘网站开发,势必会遇到AJAX这个词语。到到底什么是AJAX呢?
6 ~1 Q# H c' q" i% u+ |6 ]6 bAJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 % f ~, x5 [1 S) ^0 {
0 @; D9 _& g" [. ?& \2 M7 i
主要包含了以下几种技术: , Y7 h* U. ?6 Y" \
. @/ ^2 a" S, c: wAjax(Asynchronous JavaScript + XML)的定义 , \+ v+ E3 d4 \8 `( H/ Z
" N) G6 d/ ?% w( A- x% Y1 W( n
基于web标准(standards-based presentation)XHTML+CSS的表示;
0 g" @# A- C% ?/ e5 X: p0 ~9 h$ g4 N U4 h/ I* S, D( Y
使用 DOM(Document Object Model)进行动态显示及交互;
# d# |0 |/ J2 {) `8 g
' ?# h8 L% [4 q7 E使用 XML 和 XSLT 进行数据交换及相关操作;
" X& M' {- p. ?5 G, q: j$ b2 r4 i# I( h n
使用 XMLHttpRequest 进行异步数据查询、检索;
$ U; \+ i- I/ X9 U! p
# I5 h% R" e: ~& L使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文a ; j! n$ k$ F; Y4 ~6 X
5 g1 G# t! F. d
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
. ]% e* y# ]/ ~
8 d5 Y, j2 J6 wAJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
2 e" _; g) O. v9 { m" l6 i
& f: w8 D: o. N0 b, ^' m与传统的web应用比较6 u8 _4 c0 b. @4 r2 V
6 u5 ^4 l, k: R" x& D4 K+ T' F% F! P
传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 6 E7 o' w6 v& @$ @; n
% R$ @$ h) j* [
与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。1 O/ c+ n+ d1 }5 B+ j& a! X% X2 F
8 N$ o0 m+ k$ P$ M! t+ r- y- M# d( T
Ajax应用程序的优势在于:
& V0 R$ t4 f& p6 K4 F% H: V
) O, f% ` G& H C0 ~$ F+ `( P1. 通过异步模式,提升了用户体验
- Y8 p6 ]; W5 L2 T8 K6 v5 H/ j. e
" m6 B: s5 G. j$ u2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用% n" ]# {; K, ?% a8 c0 U
+ C5 ]9 V+ ?3 b) H" a/ x
3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
+ `5 e- J: y e2 j- d' y% C) s$ F. P
Ajax的工作原理
1 v" |$ x, u7 O
' G9 N L7 K0 [) J Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。% T' g$ x; u! Q3 F* r
7 E8 q& t9 C/ B8 v
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:
) T0 ]( F( c5 m) \2 a$ P- W5 ?3 y) l' U f; c
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。 ; g, q! [5 [% _, P9 j5 L
% w. V# S* d! H! z 提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。 % t, l* \4 @% m. R! x; i, x
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
# C% ]( s' W4 R
2 T1 t% [- Z5 h& v 一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。9 m5 M$ @: I( G0 ~
( z) l8 z+ T% E P6 u/ @0 d Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。/ g3 p* Q$ I. Y$ _
% U- \" a# {' I+ s0 ?
熟悉Ajax的基本框架后,就可以着手去学习Ajax了。我给大家推家一下我的入门书人邮的《精通 Ajax---基础概念、核心技术与典型案例》。不知道书店还有没有,不过网上还能看到http://www.china-pub.com/38158。希望大家可以掌握这门技术。 |
评分
-
2
查看全部评分
-
|