[轉(zhuǎn)載][AJAX專題] Ajax程序設(shè)計(jì)入門(mén)一

HonestQiao

[AJAX專題之Ajax程序設(shè)計(jì)入門(mén)]一

　　一、使用Ajax的主要原因

　　1、通過(guò)適當(dāng)?shù)腁jax應(yīng)用達(dá)到更好的用戶體驗(yàn)；

　　2、把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的。

　　二、引用

　　Ajax這個(gè)概念的最早提出者Jesse James Garrett認(rèn)為：

　　Ajax是Asynchronous JavaScript and XML的縮寫(xiě)。

　　Ajax并不是一門(mén)新的語(yǔ)言或技術(shù),它實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用,它包括：

　　·使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn);

　　·使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互;

　　·使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理;

　　·使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀取;

　　·最后用JavaScript綁定和處理所有數(shù)據(jù);

　　Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請(qǐng)求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來(lái)做,只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請(qǐng)求。


圖2－1


圖2－2

[ 本帖最后由 HonestQiao 于 2005-12-5 16:12 編輯 ]

HonestQiao

[AJAX專題之Ajax程序設(shè)計(jì)入門(mén)]二
　　三、概述

　　雖然Garrent列出了7條Ajax的構(gòu)成技術(shù)，但個(gè)人認(rèn)為，所謂的Ajax其核心只有 JavaScript、XMLHTTPRequest和DOM，如果所用數(shù)據(jù)格式為XML的話，還可以再加上XML這一項(xiàng)(Ajax從服務(wù)器端返回的數(shù)據(jù) 可以是XML格式，也可以是文本等其他格式)。

　　在舊的交互方式中,由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器,服務(wù)器對(duì)其進(jìn)行處理后再返回 一個(gè)新的HTHL頁(yè)到客戶端,每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí),客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù) 據(jù),都要返回一個(gè)完整的HTML頁(yè),而用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。

　　而使用Ajax后用戶從感覺(jué)上幾乎所有的操作都會(huì)很快響應(yīng)沒(méi)有頁(yè)面重載（白屏）的等待。

　　1、XMLHTTPRequest

　 　Ajax的一個(gè)最大的特點(diǎn)是無(wú)需刷新頁(yè)面便可向服務(wù)器傳輸或讀寫(xiě)數(shù)據(jù)(又稱無(wú)刷新更新頁(yè)面),這一特點(diǎn)主要得益于XMLHTTP組件 XMLHTTPRequest對(duì)象。這樣就可以向再發(fā)桌面應(yīng)用程序只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換,而不用每次都刷新界面也不用每次將數(shù)據(jù)處理的工作提交給 服務(wù)器來(lái)做,這樣即減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等候時(shí)間。

　　最早應(yīng)用XMLHTTP的是微軟,IE（IE5以上） 通過(guò)允許開(kāi)發(fā)人員在Web頁(yè)面內(nèi)部使用XMLHTTP ActiveX組件擴(kuò)展自身的功能,開(kāi)發(fā)人員可以不用從當(dāng)前的Web頁(yè)面導(dǎo)航而直接傳輸數(shù)據(jù)到服務(wù)器上或者從服務(wù)器取數(shù)據(jù)。這個(gè)功能是很重要的,因?yàn)樗鼛?助減少了無(wú)狀態(tài)連接的痛苦,它還可以排除下載冗余HTML的需要,從而提高進(jìn)程的速度。Mozilla（Mozilla1.0以上及NetScape7以 上）做出的回應(yīng)是創(chuàng)建它自己的繼承XML代理類：XMLHttpRequest類。Konqueror (和Safari v1.2,同樣也是基于KHTML的瀏覽器)也支持XMLHttpRequest對(duì)象,而Opera也將在其v7.6x+以后的版本中支持 XMLHttpRequest對(duì)象。對(duì)于大多數(shù)情況，XMLHttpRequest對(duì)象和XMLHTTP組件很相似,方法和屬性也類似,只是有一小部分屬 性不支持。

　　XMLHttpRequest的應(yīng)用：

　　·XMLHttpRequest對(duì)象在JS中的應(yīng)用

var xmlhttp = new XMLHttpRequest();

　　·微軟的XMLHTTP組件在JS中的應(yīng)用

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 對(duì)象方法
/**
* Cross-browser XMLHttpRequest instantiation.
*/

if (typeof XMLHttpRequest == ’undefined’) {
　XMLHttpRequest = function () {
　　var msxmls = [’MSXML3’, ’MSXML2’, ’Microsoft’]
　　for (var i=0; i < msxmls.length; i++) {
　　　try {
　　　　return new ActiveXObject(msxmls+’.XMLHTTP’)
　　　} catch (e) { }
　　}
　　throw new Error("No XML component installed!")
　}
}
function createXMLHttpRequest() {
　try {
　　// Attempt to create it "the Mozilla way"
　　if (window.XMLHttpRequest) {
　　　return new XMLHttpRequest();
　　}
　　// Guess not - now the IE way
　　if (window.ActiveXObject) {
　　　return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
　　}
　}
　catch (ex) {}
　return false;
};

　　XMLHttpRequest 對(duì)象方法

方法         描述
abort()         停止當(dāng)前請(qǐng)求
getAllResponseHeaders()         作為字符串返問(wèn)完整的headers
getResponseHeader("headerLabel")         作為字符串返問(wèn)單個(gè)的header標(biāo)簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])         設(shè)置未決的請(qǐng)求的目標(biāo) URL, 方法, 和其他參數(shù)
send(content)         發(fā)送請(qǐng)求
setRequestHeader("label", "value")         設(shè)置header并和請(qǐng)求一起發(fā)送

　　XMLHttpRequest 對(duì)象屬性

屬性         描述
onreadystatechange         狀態(tài)改變的事件觸發(fā)器
readyState         對(duì)象狀態(tài)(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
responseText         服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的文本版本
responseXML         服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的兼容DOM的XML文檔對(duì)象
status         服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"
statusText         服務(wù)器返回的狀態(tài)文本信息

　　2、JavaScript

　　 JavaScript是一在瀏覽器中大量使用的編程語(yǔ)言，，他以前一直被貶低為一門(mén)糟糕的語(yǔ)言（他確實(shí)在使用上比較枯燥），以在常被用來(lái)作一些用來(lái)炫耀的 小玩意和惡作劇或是單調(diào)瑣碎的表單驗(yàn)證。但事實(shí)是，他是一門(mén)真正的編程語(yǔ)言，有著自已的標(biāo)準(zhǔn)并在各種瀏覽器中被廣泛支持。

　　3、DOM

　　Document Object Model。

　　DOM是給 HTML 和 XML 文件使用的一組 API。它提供了文件的結(jié)構(gòu)表述，讓你可以改變其中的內(nèi)容及可見(jiàn)物。其本質(zhì)是建立網(wǎng)頁(yè)與 Script 或程序語(yǔ)言溝通的橋梁。

　　所有WEB開(kāi)發(fā)人員可操作及建立文件的屬性、方法及事件都以對(duì)象來(lái)展現(xiàn)（例如，document 就代表“文件本身“這個(gè)對(duì)像，table 對(duì)象則代表 HTML 的表格對(duì)象等等）。這些對(duì)象可以由當(dāng)今大多數(shù)的瀏覽器以 Script 來(lái)取用。

　　一個(gè)用HTML或XHTML構(gòu)建的網(wǎng)頁(yè)也可以看作是一組結(jié)構(gòu)化的數(shù)據(jù)，這些數(shù)據(jù)被封在DOM（Document Object Model）中，DOM提供了網(wǎng)頁(yè)中各個(gè)對(duì)象的讀寫(xiě)的支持。

　　4、XML

　 　可擴(kuò)展的標(biāo)記語(yǔ)言（Extensible Markup Language）具有一種開(kāi)放的、可擴(kuò)展的、可自描述的語(yǔ)言結(jié)構(gòu)，它已經(jīng)成為網(wǎng)上數(shù)據(jù)和文檔傳輸?shù)臉?biāo)準(zhǔn)。它是用來(lái)描述數(shù)據(jù)結(jié)構(gòu)的一種語(yǔ)言，就正如他的名 字一樣。他使對(duì)某些結(jié)構(gòu)化數(shù)據(jù)的定義更加容易，并且可以通過(guò)他和其他應(yīng)用程序交換數(shù)據(jù)。

　　5、綜合

　　Jesse James Garrett提到的Ajax引擎，實(shí)際上是一個(gè)比較復(fù)雜的JavaScript應(yīng)用程序，用來(lái)處理用戶請(qǐng)求，讀寫(xiě)服務(wù)器和更改DOM內(nèi)容。

　 　JavaScript的Ajax引擎讀取信息，并且互動(dòng)地重寫(xiě)DOM，這使網(wǎng)頁(yè)能無(wú)縫化重構(gòu)，也就是在頁(yè)面已經(jīng)下載完畢后改變頁(yè)面內(nèi)容，這是我們一直在 通過(guò)JavaScript和DOM在廣泛使用的方法，但要使網(wǎng)頁(yè)真正動(dòng)態(tài)起來(lái)，不僅要內(nèi)部的互動(dòng)，還需要從外部獲取數(shù)據(jù)，在以前，我們是讓用戶來(lái)輸入數(shù)據(jù) 并通過(guò)DOM來(lái)改變網(wǎng)頁(yè)內(nèi)容的，但現(xiàn)在，XMLHTTPRequest，可以讓我們?cè)诓恢剌d頁(yè)面的情況下讀寫(xiě)服務(wù)器上的數(shù)據(jù)，使用戶的輸入達(dá)到最少。

　　基于XML的網(wǎng)絡(luò)通訊也并不是新事物，實(shí)際上FLASH和JAVA Applet都有不錯(cuò)的表現(xiàn)，現(xiàn)在這種富交互在網(wǎng)頁(yè)上也可用了，基于標(biāo)準(zhǔn)化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序。

　 　Ajax是傳統(tǒng)WEB應(yīng)用程序的一個(gè)轉(zhuǎn)變。以前是服務(wù)器每次生成HTML頁(yè)面并返回給客戶端（瀏覽器）。在大多數(shù)網(wǎng)站中，很多頁(yè)面中至少90%都是一樣 的，比如：結(jié)構(gòu)、格式、頁(yè)頭、頁(yè)尾、廣告等，所不同的只是一小部分的內(nèi)容，但每次服務(wù)器都會(huì)生成所有的頁(yè)面再返回給客戶端，這無(wú)形之中是一種浪費(fèi)，不管是 對(duì)于用戶的時(shí)間、帶寬、CPU耗用，還是對(duì)于ISP的高價(jià)租用的帶寬和空間來(lái)說(shuō)。如果按一頁(yè)來(lái)算，只能幾K或是幾十K可能并不起眼，但像SINA每天要生 成幾百萬(wàn)個(gè)頁(yè)面的大ISP來(lái)說(shuō)，可以說(shuō)是損失巨大的。而AJAX可以所為客戶端和服務(wù)器的中間層，來(lái)處理客戶端的請(qǐng)求，并根據(jù)需要向服務(wù)器端發(fā)送請(qǐng)求，用 什么就取什么、用多少就取多少，就不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁(yè)面時(shí)不用重載全部?jī)?nèi)容，只更新需要更新的那部分即可，相對(duì)于純 后臺(tái)處理并重載的方式縮短了用戶等待時(shí)間，也把對(duì)資源的浪費(fèi)降到最低，基于標(biāo)準(zhǔn)化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序，所以Ajax對(duì)于用 戶和ISP來(lái)說(shuō)是雙盈的。

　　Ajax使WEB中的界面與應(yīng)用分離（也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離），而在以前兩者是沒(méi)有清晰的界限的，數(shù)據(jù) 與呈現(xiàn)分離的分離，有利于分工合作、減少非技術(shù)人員對(duì)頁(yè)面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。也可以把以前的一些服 務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來(lái)處理。

　　四、應(yīng)用

　　Ajax理念的出現(xiàn)，揭開(kāi)了無(wú)刷新更新頁(yè)面時(shí)代的序幕，并有代替?zhèn)鹘y(tǒng)web開(kāi)發(fā)中采用form(表單)遞交方式更新web頁(yè)面的趨勢(shì)，可以算是一個(gè)里程碑。但Ajax都不是適用于所有地方的，它的適用范圍是由它的特性所決定的。

　　舉個(gè)應(yīng)用的例子，是關(guān)于級(jí)聯(lián)菜單方面的Ajax應(yīng)用。

　　我們以前的對(duì)級(jí)聯(lián)菜單的處理是這樣的：

　 　為了避免每次對(duì)菜單的操作引起的重載頁(yè)面，不采用每次調(diào)用后臺(tái)的方式，而是一次性將級(jí)聯(lián)菜單的所有數(shù)據(jù)全部讀取出來(lái)并寫(xiě)入數(shù)組，然后根據(jù)用戶的操作用 JavaScript來(lái)控制它的子集項(xiàng)目的呈現(xiàn)，這樣雖然解決了操作響應(yīng)速度、不重載頁(yè)面以及避免向服務(wù)器頻繁發(fā)送請(qǐng)求的問(wèn)題，但是如果用戶不對(duì)菜單進(jìn)行 操作或只對(duì)菜單中的一部分進(jìn)行操作的話，那讀取的數(shù)據(jù)中的一部分就會(huì)成為冗余數(shù)據(jù)而浪費(fèi)用戶的資源，特別是在菜單結(jié)構(gòu)復(fù)雜、數(shù)據(jù)量大的情況下（比如菜單有 很多級(jí)、每一級(jí)菜又有上百個(gè)項(xiàng)目），這種弊端就更為突出。

　　如果在此案中應(yīng)用Ajax后，結(jié)果就會(huì)有所改觀：

　　在初 始化頁(yè)面時(shí)我們只讀出它的第一級(jí)的所有數(shù)據(jù)并顯示，在用戶操作一級(jí)菜單其中一項(xiàng)時(shí)，會(huì)通過(guò)Ajax向后臺(tái)請(qǐng)求當(dāng)前一級(jí)項(xiàng)目所屬的二級(jí)子菜單的所有數(shù)據(jù)，如 果再繼續(xù)請(qǐng)求已經(jīng)呈現(xiàn)的二級(jí)菜單中的一項(xiàng)時(shí)，再向后面請(qǐng)求所操作二級(jí)菜單項(xiàng)對(duì)應(yīng)的所有三級(jí)菜單的所有數(shù)據(jù)，以此類推……這樣，用什么就取什么、用多少就取 多少，就不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁(yè)面時(shí)不用重載全部?jī)?nèi)容，只更新需要更新的那部分即可，相對(duì)于后臺(tái)處理并重載的方式縮短了 用戶等待時(shí)間，也把對(duì)資源的浪費(fèi)降到最低。

　　此外，Ajax由于可以調(diào)用外部數(shù)據(jù)，也可以實(shí)現(xiàn)數(shù)據(jù)聚合的功能（當(dāng)然要有相應(yīng)授權(quán)），比如微軟剛剛在3月15日發(fā)布的在線RSS閱讀器BETA版；還可以利于一些開(kāi)放的數(shù)據(jù)，開(kāi)發(fā)自已的一些應(yīng)用程序，比如用Amazon的數(shù)據(jù)作的一些新穎的圖書(shū)搜索應(yīng)用。

　　總之，Ajax適用于交互較多，頻繁讀數(shù)據(jù)，數(shù)據(jù)分類良好的WEB應(yīng)用。

　　五、Ajax的優(yōu)勢(shì)

　　1、減輕服務(wù)器的負(fù)擔(dān)。因?yàn)锳jax的根本理念是“按需取數(shù)據(jù)”，所以最大可能在減少了冗余請(qǐng)求和響影對(duì)服務(wù)器造成的負(fù)擔(dān)；

　　2、無(wú)刷新更新頁(yè)面，減少用戶實(shí)際和心理等待時(shí)間；

　　首先，“按需取數(shù)據(jù)”的模式減少了數(shù)據(jù)的實(shí)際讀取量，打個(gè)很形象的比方，如果說(shuō)重載的方式是從一個(gè)終點(diǎn)回到原點(diǎn)再到另一個(gè)終點(diǎn)的話，那么Ajax就是以一個(gè)終點(diǎn)為基點(diǎn)到達(dá)另一個(gè)終點(diǎn)；


圖5－1


圖5－2

　 　其次，即使要讀取比較大的數(shù)據(jù)，也不用像RELOAD一樣出現(xiàn)白屏的情況，由于Ajax是用XMLHTTP發(fā)送請(qǐng)求得到服務(wù)端應(yīng)答數(shù)據(jù)，在不重新載入整 個(gè)頁(yè)面的情況下用Javascript操作DOM最終更新頁(yè)面的，所以在讀取數(shù)據(jù)的過(guò)程中，用戶所面對(duì)的也不是白屏，而是原來(lái)的頁(yè)面狀態(tài)（或者可以加一個(gè) LOADING的提示框讓用戶了解數(shù)據(jù)讀取的狀態(tài)），只有當(dāng)接收到全部數(shù)據(jù)后才更新相應(yīng)部分的內(nèi)容，而這種更新也是瞬間的，用戶幾乎感覺(jué)不到�？傊�用戶是 很敏感的，他們能感覺(jué)到你對(duì)他們的體貼，雖然不太可能立竿見(jiàn)影的效果，但會(huì)在用戶的心中一點(diǎn)一滴的積累他們對(duì)網(wǎng)站的依賴。

　　3、更好的用戶體驗(yàn)；

　　4、也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和帶寬租用成本；

　　5、Ajax由于可以調(diào)用外部數(shù)據(jù)；

　　6、基于標(biāo)準(zhǔn)化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序；

　　7、Ajax使WEB中的界面與應(yīng)用分離（也可以說(shuō)是數(shù)據(jù)與呈現(xiàn)分離）；

　　8、對(duì)于用戶和ISP來(lái)說(shuō)是雙盈的。

　　六、Ajax的問(wèn)題

　　1、一些手持設(shè)備（如手機(jī)、PDA等）現(xiàn)在還不能很好的支持Ajax；

　　2、用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是讓人頭痛的事；

　　3、Ajax的無(wú)刷新重載，由于頁(yè)面的變化沒(méi)有刷新重載那么明顯，所以容易給用戶帶來(lái)困擾――用戶不太清楚現(xiàn)在的數(shù)據(jù)是新的還是已經(jīng)更新過(guò)的；現(xiàn)有的解決有：在相關(guān)位置提示、數(shù)據(jù)更新的區(qū)域設(shè)計(jì)得比較明顯、數(shù)據(jù)更新后給用戶提示等；

　　4、對(duì)流媒體的支持沒(méi)有FLASH、Java Applet好；

　　七、結(jié)束語(yǔ)

　　更好的Ajax應(yīng)用，需要更多的客戶端的開(kāi)發(fā)，和對(duì)當(dāng)前的WEB應(yīng)用理念的思考，而且良好的用戶體驗(yàn)，來(lái)源于為處處用戶考慮的理念，而不單純是某種技術(shù)。

1212everyday

學(xué)習(xí)

ff1982

技術(shù)的發(fā)展總是那么快

ydlhero

原帖由 ff1982 于 2005-12-15 11:00 發(fā)表
技術(shù)的發(fā)展總是那么快

技術(shù)的發(fā)展 需要強(qiáng)大的經(jīng)濟(jì)支持
如果沒(méi)有g(shù)oogle用它 可能還在被埋沒(méi)

skydragon1979

學(xué)習(xí)了，以前都不懂....