Ajax技術(WEB無重新整理提交資料)

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的應用：
// IE support
if (window.ActiveXObject && !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}
伺服器處理序返回資料的文本處理
GET Requests
Example:
var req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
alert(req.responseText);
}
};
req.open('GET', 'pageurl.html');
req.send(null);
}
POST Requests
Example:
var req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) {
alert(req.responseText);
}
};
req.open('POST', 'scripturl.cgi');
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send('var1=data1&var2=data2');
}
XMLHttpRequest 對象方法描述
abort() 停止當前請求
getAllResponseHeaders() 作為字串返問完整的headers
getResponseHeader("headerLabel") 作為字串返問單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設定未決的請求的目標 URL, 方法, 和其他參數
send(content) 發送請求 (param一定要這樣傳，因為後台得不到hidden params)
setRequestHeader("label", "value") 設定header並和請求一起發送 ('post'方法一定要 )
XMLHttpRequest 對象屬性描述
onreadystatechange 狀態改變的事件觸發程序(非同步處理時要req.open('POST', 'servlet')或req.open('POST', 'servlet',true))
readyState 對象狀態(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 互動中
4 = 完成
responseText 伺服器處理序返回資料的文本版本
responseXML 伺服器處理序返回資料的相容DOM的XML文檔對象
responseBody 伺服器返回的主題（非文字格式設定）
responseStream 伺服器返回的資料流
status 伺服器返回的狀態代碼, 如：404 = "檔案末找到" 、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提供了網頁中各個對象的讀寫的支援。
function loadCnt(){
var req=new XMLHttpRequest();
if (req) {
req.onreadystatechange=function() {
if (req.readyState==4 && req.status==200) {
if(req.responseText!=-1){
nodes=req.responseXML.documentElement.childNodes;
browse_cnt.innerText=nodes.item(0).text;
comment_cnt.innerText=nodes.item(1).text;
score_cnt.innerText=nodes.item(2).text;
}
}
}
req.open('POST', '$path/AjaxCntCtrl');
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send("photo_id="+document.form1.photo_id.value);
}
}
//responseXML.documentElement.getAttribute('stat') == 'ok'
//responseXML.documentElement.getElementsByTagName('title')[0].firstChild.data;
4、XML
　　可擴充的標記語言（Extensible Markup Language）具有一種開放的、可擴充的、可自描述的語言結構，
它已經成為網上資料和文檔傳輸的標準。它是用來描述資料結構的一種語言，就正如他的名字一樣。
他使對某些結構化資料的定義更加容易，並且可以通過他和其他應用程式交換資料。

5、綜合
　　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應用。
五、Ajax的優勢
　　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應用，需要更多的用戶端的開發，和對當前的WEB應用理念的思考，而且良好的使用者體驗，
來源於為處處使用者考慮的理念，而不單純是某種技術。