Ajax程式設計入門

一、使用Ajax的主要原因

1、透過適當的Ajax應用達到更好的用戶體驗;

2、把以前的一些伺服器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕伺服器和頻寬的負擔，從而達到節約ISP的空間及頻寬租用成本的目的。

二、引用

Ajax這個概念的最早提出者Jesse James Garrett認為:Ajax是Asynchronous javaScript and xml的縮寫。 Ajax並不是一門新的語言或技術,它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用,它包括:

·使用XHTML和CSS標準化呈現;

·使用DOM實現動態顯示​​與互動;

·使用XML和XSLT進行資料交換與處理;

·使用xmlhttpRequest進行非同步資料讀取;

·最後用Javascript綁定和處理所有資料;

Ajax的工作原理相當於在使用者和伺服器之間加了—個中間層,使用戶操作與伺服器回應非同步化。並不是所有的使用者請求都提交給伺服器,像—些資料驗證和資料處理等都交給Ajax引擎自己來做,只有確定需要從伺服器讀取新資料時再由Ajax引擎代為向伺服器提交請求。

三、概述 

 

雖然Garrent列出了7條Ajax的構成技術，但個人認為，所謂的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，如果所用資料格式為XML的話，還可以再加上XML這一項(Ajax從伺服器端傳回的資料可以是XML格式，也可以是文字等其他格式)。

在舊的交互方式中,由用戶觸發一個HTTP請求到伺服器,伺服器對其進行處理後再返回一個新的HTHL頁到客戶端,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的交互、只需從伺服器端得到很簡單的一個數據,都要返回一個完整的HTML頁,而用戶每次都要浪費時間和頻寬去重新讀取整個頁面。

而使用Ajax後用戶從感覺上幾乎所有的操作都會很快響應沒有頁面重載(白屏)的等待。

1、XMLHTTPRequest

Ajax的一個最大的特點是無需刷新頁面便可向伺服器傳輸或讀寫資料(又稱無刷新更新頁面),這一特點主要得益於XMLHTTP組件XMLHTTPRequest物件。這樣就可以向再發桌面應用程式只同伺服器進行資料層面的交換,而不用每次都刷新介面也不用每次將資料處理的工作提交給伺服器來做,這樣即減輕了伺服器的負擔又加快了回應速度、縮短了用戶等候時間。

最早應用XMLHTTP的是微軟,IE(IE5以上)透過允許開發人員在Web頁面內部使用XMLHTTP ActiveX元件擴展自身的功能,開發人員可以不用從當前的Web頁面導航而直接傳輸資料到伺服器上或從伺服器取資料。這個功能是很重要的,因為它幫助減少了無狀態連接的痛苦,它還可以排除下載冗餘HTML的需要,從而提高進程的速度。 Mozilla(Mozilla1.0以上及NetScape7以上)所做的回應是建立它自己的繼承XML代理類別:XMLHttpRequest類別。 Konqueror (和Safari v1.2,同樣也是基於KHTML的瀏覽器)也支援XMLHttpRequest物件,而Opera也將在其v7.6x+以後的版本中支援XMLHttpRequest物件。對於大多數情況，XMLHttpRequest物件和XMLHTTP元件很相似,方法和屬性也類似,只是有一小部分屬性不支援。

XMLHttpRequest的應用:

·XMLHttpRequest對像在JS中的應用

var xmlhttp = new XMLHttpRequest();

·微軟的XMLHTTP ;

var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);

XMLHttpRequest 物件方法

/**

* 跨瀏覽器 XMLHttpRequest 實例化。

*/

if (typeofHttpRequest ====== (

var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']

for (var i=0; i 　try {

return 健康> +'.XMLHTTP')

　} catch (e) { }

}

throw new Error("No XML component installed!")

『 try {

// Attempt to create it "the Mozilla way"

if (window.XMLHttpRequest) {

　return new XMLHttpRequest(); ) {

　return new ActiveXObject(getXMLPrefix() + ".XmlHttp");

}

　}

　catch (ex) {}

　}

quest 物件方法

方法  說明 
 abort()  停止目前請求 
 getAllResponseHeaders()  作為字串回送完整的headers 
 getResponseHeader("headerLabel") asyncFlag[,"userName"[, "passWord"]]])  設定未決的請求的目標URL, 方法, 和其他參數 
 send(content)  傳送請求 
 setRequestHeader("label", "value")與請求一起傳送

XMLHttpRequest 物件屬性

 屬性  說明 

 onreadystatechange  狀態改變的事件觸發器 
 readyState onreadystatechange  狀態改變的事件觸發器 
 readyState  讀取

3 = 互動中

4 = 完成 

 responseText  伺服器程序傳回資料的文字版本 

 responseXML  伺服器程序傳回資料的相容DOM的XML文檔物件、200 ="成功" 

 statusText  伺服器返回的狀態文字資訊

2、JavaScript

JavaScript是一在瀏覽器中大量使用的程式語言，，他以前一直被貶低為一門糟糕的語言(他確實在使用上比較枯燥)，以在常被用來作一些用來炫耀的小玩意和惡作劇或是單調瑣碎的表單驗證。但事實是，他是一門真正的程式語言，有著自已的標準並在各種瀏覽器中被廣泛支援。

3、DOM

Document Object Model。

DOM是給 HTML 和 XML 檔案使用的一組 API。它提供了文件的結構表述，讓你可以改變其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。

所有WEB開發人員可操作及建立文件的屬性、方法及事件都以對象來展現(例如，document 就代表「文件本身「這個對象，table 對象則代表 HTML 的表格對像等等)。這些物件可以由現今大多數的瀏覽器以 Script 來取用。

一個用HTML或XHTML建構的網頁也可以看作是一組結構化的數據，這些數據被封在DOM(Document Object Model)中，DOM提供了網頁中各個物件的讀寫的支持。

4、XML

可擴展的標記語言(Extensible Markup Language)具有一種開放的、可擴展的、可自描述的語言結構，它已經成為網上資料和文件傳輸的標準。它是用來描述資料結構的一種語言，就如同他的名字一樣。他使某些結構化資料的定義更加容易，並且可以透過他和其他應用程式交換資料。 

5、綜合 五、Ajax的優勢 

 

Jesse James Garrett提到的Ajax引擎，實際上是一個比較複雜的JavaScript應用程序，用來處理用戶請求，讀取和寫入伺服器和更改DOM內容。

JavaScript的Ajax引擎讀取訊息，並且互動地重寫DOM，這使網頁能無縫化重構，也就是在頁面已經下載完畢後改變頁面內容，這是我們一直在透過JavaScript和DOM在廣泛使用的方法，但要使網頁真正動態起來，不僅要內部的互動，還需要從外部獲取數據，在以前，我們是讓用戶來輸入數據並通過DOM來改變網頁內容的，但現在，XMLHTTPRequest，可以讓我們在不重載頁面的情況下讀寫伺服器上的數據，使用戶的輸入達到最少。

基於XML的網路通訊也並不是新事物，實際上Flash和JAVA Applet都有不錯的表現，現在這種富交互在網頁上也可用了，基於標準化的並被廣泛支持和技術，並且不需要外掛程式或下載小程式。

Ajax是傳統WEB應用程式的一個轉變。以前是伺服器每次產生HTML頁面並回傳給客戶端(瀏覽器)。在大多數網站中，許多頁面中至少90%都是一樣的，例如:結構、格式、頁頭、頁尾、廣告等，所不同的只是一小部分的內容，但每次伺服器都會產生所有的頁面再回到客戶端，這無形之中是一種浪費，不管是對於用戶的時間、頻寬、CPU耗用，還是對於ISP的高價租用的頻寬和空間。如果按一頁來算，只能幾K或是幾十K可能並不起眼，但像SINA每天要生成數百萬個頁面的大ISP來說，可以說是損失巨大的。而AJAX可以所為客戶端和伺服器的中間層，來處理客戶端的請求，並根據需要向伺服器端發送請求，用什麼就取什麼、用多少就取多少，就不會有資料的冗餘和浪費，減少了資料下載總量，而且更新頁面時不用重載全部內容，只更新需要更新的那部分即可，相對於純後台處理並重載的方式縮短了用戶等待時間，也把對資源的浪費降到最低，基於標準化的並被廣泛支持和技術，並且不需要插件或下載小程序，所以Ajax對於用戶和ISP來說是雙盈的。

Ajax使WEB中的界面與應用分離(也可以說是數據與呈現分離)，而在以前兩者是沒有清晰的界限的，數據與呈現分離的分離，有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的發布系統。也可以把以前的一些伺服器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理。

四、應用

Ajax理念的出現，揭開了無刷新更新頁面時代的序幕，並有代替傳統web開發中採用form(表單)遞交方式更新web頁面的趨勢，可以算是一個里程碑。但Ajax都不是適用於所有地方的，它的適用範圍是由它的特性所決定的。

舉個應用的例子，是關於級聯選單方面的Ajax應用。

我們以前的對級聯選單的處理是這樣的:

為了避免每次對選單的操作引起的重載頁面，不採用每次調用後台的方式，而是一次性將級聯選單的所有資料全部讀取出來並寫入數組，然後根據使用者的操作用JavaScript來控制它的子集項目的呈現，這樣雖然解決了操作響應速度、不重載頁面以及避免向伺服器頻繁發送請求的問題，但是如果使用者不對選單進行操作或只對選單中的一部分進行操作的話，那讀取的資料中的一部分就會成為冗餘資料而浪費使用者的資源，特別是在選單結構複雜、資料量大的情況下(例如菜單有很多級、每一級菜又有上百個項目)，這種弊端就更為突出。

如果在此案中應用Ajax後，結果就會有所改觀:

在初始化頁面時我們只讀出它的第一級的所有數據並顯示，在用戶操作一級菜單其中一項時，會透過Ajax向後台請求目前一級項目所屬的二級子選單的所有數據，如果再繼續請求已經呈現的二級選單中的一項時，再向後面請求所操作二級選單項目對應的所有三級選單的所有數據，以此類推……這樣，用什麼就取什麼、用多少就取多少，就不會有數據的冗餘和浪費，減少了數據下載總量，而且更新頁面時不用重載全部內容，只更新需要更新的那部分即可，相對於後台處理並重載的方式縮短了用戶等待時間，也把對資源的浪費降到最低。

此外，Ajax由於可以調用外部數據，也可以實現數據聚合的功能(當然要有相應授權)，比如微軟剛剛在3月15日發布的在線rss閱讀器BETA版;還可以利於一些開放的數據，開發自已的一些應用程序，例如用Amazon的數據作的一些新穎的圖書搜尋應用。

總之，Ajax適用於互動較多，頻繁讀取數據，資料分類良好的WEB應用。

 

1、減輕伺服器的負擔。因為Ajax的根本理念是“按需取資料”，所以最大可能在減少了冗餘請求和響影對伺服器造成的負擔;

2、無刷新更新頁面，減少用戶實際和心理等待時間;

首先，「按需取資料」的模式減少了資料的實際讀取量，打個很形象的比方，如果說重載的方式是從一個終點回到原點再到另一個終點的話，那麼Ajax就是以一個終點為基點到達另一個終點;

其次，即使要讀取比較大的數據，也不用像RELOAD一樣出現白屏的情況，由於Ajax是用XMLHTTP發送請求得到服務端應答數據，在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面的，所以在讀取資料的過程中，使用者所面對的也不是白屏，而是原來的頁面狀態(或可以加一個LOADING的提示框讓使用者了解資料讀取的狀態)，只有當接收到全部資料後才更新對應部分的內容，而這種更新也是瞬間的，使用者幾乎感覺不到。總之使用者是很敏感的，他們能感覺到你對他們的體貼，雖然不太可能立竿見影的效果，但會在使用者的心中一點一滴的累積他們對網站的依賴。

3、更好的使用者體驗;

4、也可以把以前的一些伺服器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕伺服器和頻寬的負擔，節省空間和頻寬租用成本;

5、Ajax由於可以調用外部數據;

6、基於標準化的並被廣泛支持和技術，並且不需要插件或下載小程序;

7、Ajax使WEB中的界面與應用分離(也可以說是資料與呈現分離);

8、對使用者和ISP來說是雙盈的。

六、Ajax的問題

1、一些手持設備(如手機、PDA等)現在還不能很好的支援Ajax;

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

3、Ajax的無刷新重載，由於頁面的變化沒有刷新重載那麼明顯，所以容易給用戶帶來困擾――用戶不太清楚現在的數據是新的還是已經更新過的;現有的解決有:在相關位置提示、資料更新的區域設計得比較明顯、資料更新後給使用者提示等;

4、對串流媒體的支援沒有FLASH、Java Applet好;

以上就是Ajax程序設計,更多相關文章請追蹤PHP中文網（www.php.cn）！