主頁 > 知識庫 > Ajax技術(shù)(WEB無刷新提交數(shù)據(jù))

Ajax技術(shù)(WEB無刷新提交數(shù)據(jù))

Ajax內(nèi)部交流文檔一、使用Ajax的主要原因
　　1、通過適當(dāng)?shù)腁jax應(yīng)用達到更好的用戶體驗；
　　2、把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達到節(jié)約ISP的空間及帶寬租用成本的目的。

二、引用
Ajax這個概念的最早提出者Jesse James Garrett認(rèn)為：
　　Ajax是Asynchronous JavaScript and XML的縮寫。
　　Ajax并不是一門新的語言或技術(shù),它實際上是幾項技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用,它包括
　　使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn);
　　使用DOM實現(xiàn)動態(tài)顯示和交互;
　　使用XML和XSLT進行數(shù)據(jù)交換與處理;
　　使用XMLHttpRequest進行異步數(shù)據(jù)讀取;
　　最后用JavaScript綁定和處理所有數(shù)據(jù);
　　Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個中間層,使用戶操作與服務(wù)器響應(yīng)異步化。
并不是所有的用戶請求都提交給服務(wù)器,像—些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做,
只有確定需要從服務(wù)器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務(wù)器提交請求。
三、概述
　　雖然Garrent列出了7條Ajax的構(gòu)成技術(shù)，但個人認(rèn)為，所謂的Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，
如果所用數(shù)據(jù)格式為XML的話，還可以再加上XML這一項(Ajax從服務(wù)器端返回的數(shù)據(jù)可以是XML格式，也可以是文本等其他格式)。
　　在舊的交互方式中,由用戶觸發(fā)一個HTTP請求到服務(wù)器,服務(wù)器對其進行處理后再返回一個新的HTHL頁到客戶端,
每當(dāng)服務(wù)器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互、
只需從服務(wù)器端得到很簡單的一個數(shù)據(jù),都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。
　　而使用Ajax后用戶從感覺上幾乎所有的操作都會很快響應(yīng)沒有頁面重載（白屏）的等待。
　　1、XMLHTTPRequest
　　Ajax的一個最大的特點是無需刷新頁面便可向服務(wù)器傳輸或讀寫數(shù)據(jù)(又稱無刷新更新頁面),
這一特點主要得益于XMLHTTP組件XMLHTTPRequest對象。這樣就可以向再發(fā)桌面應(yīng)用程序只同服務(wù)器進行數(shù)據(jù)層面的交換,
而不用每次都刷新界面也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來做,
這樣即減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度、縮短了用戶等候時間。
　　最早應(yīng)用XMLHTTP的是微軟,IE（IE5以上）通過允許開發(fā)人員在Web頁面內(nèi)部使用XMLHTTP ActiveX組件擴展自身的功能,
開發(fā)人員可以不用從當(dāng)前的Web頁面導(dǎo)航而直接傳輸數(shù)據(jù)到服務(wù)器上或者從服務(wù)器取數(shù)據(jù)。
這個功能是很重要的,因為它幫助減少了無狀態(tài)連接的痛苦,它還可以排除下載冗余HTML的需要,從而提高進程的速度。
Mozilla（Mozilla1.0以上及NetScape7以上）做出的回應(yīng)是創(chuàng)建它自己的繼承XML代理類：
XMLHttpRequest類。Konqueror (和Safari v1.2,同樣也是基于KHTML的瀏覽器)也支持XMLHttpRequest對象,
而Opera也將在其v7.6x+以后的版本中支持XMLHttpRequest對象。對于大多數(shù)情況，
XMLHttpRequest對象和XMLHTTP組件很相似,方法和屬性也類似,只是有一小部分屬性不支持。
XMLHttpRequest的應(yīng)用：
// IE support
if (window.ActiveXObject  !window.XMLHttpRequest) {
window.XMLHttpRequest = function() {
return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 5') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');
};
}
服務(wù)器進程返回數(shù)據(jù)的文本處理
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=data1var2=data2');
}
XMLHttpRequest 對象方法描述
abort() 停止當(dāng)前請求
getAllResponseHeaders() 作為字符串返問完整的headers
getResponseHeader("headerLabel") 作為字符串返問單個的header標(biāo)簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設(shè)置未決的請求的目標(biāo) URL, 方法, 和其他參數(shù)
send(content) 發(fā)送請求 (param一定要這樣傳，因為后臺得不到hidden params)
setRequestHeader("label", "value") 設(shè)置header并和請求一起發(fā)送 ('post'方法一定要 )
XMLHttpRequest 對象屬性描述
onreadystatechange 狀態(tài)改變的事件觸發(fā)器(異步處理時要req.open('POST', 'servlet')或req.open('POST', 'servlet',true))
readyState 對象狀態(tài)(integer):
0 = 未初始化
1 = 讀取中
2 = 已讀取
3 = 交互中
4 = 完成
responseText 服務(wù)器進程返回數(shù)據(jù)的文本版本
responseXML 服務(wù)器進程返回數(shù)據(jù)的兼容DOM的XML文檔對象
responseBody 服務(wù)器返回的主題（非文本格式）
responseStream 服務(wù)器返回的數(shù)據(jù)流
status 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"
statusText 服務(wù)器返回的狀態(tài)文本信息
2、JavaScript
　　JavaScript是一在瀏覽器中大量使用的編程語言，，他以前一直被貶低為一門糟糕的語言（他確實在使用上比較枯燥），
以在常被用來作一些用來炫耀的小玩意和惡作劇或是單調(diào)瑣碎的表單驗證。但事實是，他是一門真正的編程語言，
有著自已的標(biāo)準(zhǔn)并在各種瀏覽器中被廣泛支持。
3、DOM
　　Document Object Model。
　　DOM是給 HTML 和 XML 文件使用的一組 API。它提供了文件的結(jié)構(gòu)表述，讓你可以改變其中的內(nèi)容及可見物。
其本質(zhì)是建立網(wǎng)頁與 Script 或程序語言溝通的橋梁。
　　所有WEB開發(fā)人員可操作及建立文件的屬性、方法及事件都以對象來展現(xiàn)（例如，document 就代表“文件本身“這個對像，
table 對象則代表 HTML 的表格對象等等）。這些對象可以由當(dāng)今大多數(shù)的瀏覽器以 Script 來取用。
　　一個用HTML或XHTML構(gòu)建的網(wǎng)頁也可以看作是一組結(jié)構(gòu)化的數(shù)據(jù)，這些數(shù)據(jù)被封在DOM（Document Object Model）中，
DOM提供了網(wǎng)頁中各個對象的讀寫的支持。
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
　　可擴展的標(biāo)記語言（Extensible Markup Language）具有一種開放的、可擴展的、可自描述的語言結(jié)構(gòu)，
它已經(jīng)成為網(wǎng)上數(shù)據(jù)和文檔傳輸?shù)臉?biāo)準(zhǔn)。它是用來描述數(shù)據(jù)結(jié)構(gòu)的一種語言，就正如他的名字一樣。
他使對某些結(jié)構(gòu)化數(shù)據(jù)的定義更加容易，并且可以通過他和其他應(yīng)用程序交換數(shù)據(jù)。

5、綜合
　　Jesse James Garrett提到的Ajax引擎，實際上是一個比較復(fù)雜的JavaScript應(yīng)用程序，用來處理用戶請求，
讀寫服務(wù)器和更改DOM內(nèi)容。
　　JavaScript的Ajax引擎讀取信息，并且互動地重寫DOM，這使網(wǎng)頁能無縫化重構(gòu)，
也就是在頁面已經(jīng)下載完畢后改變頁面內(nèi)容，這是我們一直在通過JavaScript和DOM在廣泛使用的方法，
但要使網(wǎng)頁真正動態(tài)起來，不僅要內(nèi)部的互動，還需要從外部獲取數(shù)據(jù)，在以前，
我們是讓用戶來輸入數(shù)據(jù)并通過DOM來改變網(wǎng)頁內(nèi)容的，但現(xiàn)在，XMLHTTPRequest，
可以讓我們在不重載頁面的情況下讀寫服務(wù)器上的數(shù)據(jù)，使用戶的輸入達到最少。
　　基于XML的網(wǎng)絡(luò)通訊也并不是新事物，實際上FLASH和JAVA Applet都有不錯的表現(xiàn)，現(xiàn)在這種富交互在網(wǎng)頁上也可用了，
基于標(biāo)準(zhǔn)化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序。
　　Ajax是傳統(tǒng)WEB應(yīng)用程序的一個轉(zhuǎn)變。以前是服務(wù)器每次生成HTML頁面并返回給客戶端（瀏覽器）。
在大多數(shù)網(wǎng)站中，很多頁面中至少90%都是一樣的，比如：結(jié)構(gòu)、格式、頁頭、頁尾、廣告等，
所不同的只是一小部分的內(nèi)容，但每次服務(wù)器都會生成所有的頁面再返回給客戶端，這無形之中是一種浪費，
不管是對于用戶的時間、帶寬、CPU耗用，還是對于ISP的高價租用的帶寬和空間來說。如果按一頁來算，
只能幾K或是幾十K可能并不起眼，但像SINA每天要生成幾百萬個頁面的大ISP來說，可以說是損失巨大的。
而AJAX可以所為客戶端和服務(wù)器的中間層，來處理客戶端的請求，并根據(jù)需要向服務(wù)器端發(fā)送請求，
用什么就取什么、用多少就取多少，就不會有數(shù)據(jù)的冗余和浪費，減少了數(shù)據(jù)下載總量，
而且更新頁面時不用重載全部內(nèi)容，只更新需要更新的那部分即可，相對于純后臺處理并重載的方式縮短了用戶等待時間，
也把對資源的浪費降到最低，基于標(biāo)準(zhǔn)化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序，
所以Ajax對于用戶和ISP來說是雙盈的。
　　Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離），而在以前兩者是沒有清晰的界限的，
數(shù)據(jù)與呈現(xiàn)分離的分離，有利于分工合作、減少非技術(shù)人員對頁面的修改造成的WEB應(yīng)用程序錯誤、提高效率、
也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理。
四、應(yīng)用
　　Ajax理念的出現(xiàn)，揭開了無刷新更新頁面時代的序幕，并有代替?zhèn)鹘y(tǒng)web開發(fā)中采用form(表單)遞交方式更新web頁面的趨勢，
可以算是一個里程碑。但Ajax都不是適用于所有地方的，它的適用范圍是由它的特性所決定的。
　　舉個應(yīng)用的例子，是關(guān)于級聯(lián)菜單方面的Ajax應(yīng)用。
　　我們以前的對級聯(lián)菜單的處理是這樣的：
　　為了避免每次對菜單的操作引起的重載頁面，不采用每次調(diào)用后臺的方式，
而是一次性將級聯(lián)菜單的所有數(shù)據(jù)全部讀取出來并寫入數(shù)組，然后根據(jù)用戶的操作用JavaScript來控制它的子集項目的呈現(xiàn)，
這樣雖然解決了操作響應(yīng)速度、不重載頁面以及避免向服務(wù)器頻繁發(fā)送請求的問題，
但是如果用戶不對菜單進行操作或只對菜單中的一部分進行操作的話，
那讀取的數(shù)據(jù)中的一部分就會成為冗余數(shù)據(jù)而浪費用戶的資源，特別是在菜單結(jié)構(gòu)復(fù)雜、數(shù)據(jù)量大的情況下
（比如菜單有很多級、每一級菜又有上百個項目），這種弊端就更為突出。
　　如果在此案中應(yīng)用Ajax后，結(jié)果就會有所改觀：
　　在初始化頁面時我們只讀出它的第一級的所有數(shù)據(jù)并顯示，在用戶操作一級菜單其中一項時，
會通過Ajax向后臺請求當(dāng)前一級項目所屬的二級子菜單的所有數(shù)據(jù)，如果再繼續(xù)請求已經(jīng)呈現(xiàn)的二級菜單中的一項時，
再向后面請求所操作二級菜單項對應(yīng)的所有三級菜單的所有數(shù)據(jù)，以此類推……這樣，用什么就取什么、用多少就取多少，
就不會有數(shù)據(jù)的冗余和浪費，減少了數(shù)據(jù)下載總量，而且更新頁面時不用重載全部內(nèi)容，只更新需要更新的那部分即可，
相對于后臺處理并重載的方式縮短了用戶等待時間，也把對資源的浪費降到最低。
　　此外，Ajax由于可以調(diào)用外部數(shù)據(jù)，也可以實現(xiàn)數(shù)據(jù)聚合的功能（當(dāng)然要有相應(yīng)授權(quán)），
比如微軟剛剛在3月15日發(fā)布的在線RSS閱讀器BETA版；還可以利于一些開放的數(shù)據(jù)，開發(fā)自已的一些應(yīng)用程序，
比如用Amazon的數(shù)據(jù)作的一些新穎的圖書搜索應(yīng)用。
　　總之，Ajax適用于交互較多，頻繁讀數(shù)據(jù)，數(shù)據(jù)分類良好的WEB應(yīng)用。
五、Ajax的優(yōu)勢
　　1、減輕服務(wù)器的負(fù)擔(dān)。因為Ajax的根本理念是“按需取數(shù)據(jù)”，所以最大可能在減少了冗余請求和響影對服務(wù)器造成的負(fù)擔(dān)；
　　2、無刷新更新頁面，減少用戶實際和心理等待時間；
　　首先，“按需取數(shù)據(jù)”的模式減少了數(shù)據(jù)的實際讀取量，打個很形象的比方，
如果說重載的方式是從一個終點回到原點再到另一個終點的話，那么Ajax就是以一個終點為基點到達另一個終點；
　　其次，即使要讀取比較大的數(shù)據(jù)，也不用像RELOAD一樣出現(xiàn)白屏的情況，由于Ajax是用XMLHTTP發(fā)送請求得到服務(wù)端應(yīng)答數(shù)據(jù)，
在不重新載入整個頁面的情況下用Javascript操作DOM最終更新頁面的，所以在讀取數(shù)據(jù)的過程中，
用戶所面對的也不是白屏，而是原來的頁面狀態(tài)（或者可以加一個LOADING的提示框讓用戶了解數(shù)據(jù)讀取的狀態(tài)），
只有當(dāng)接收到全部數(shù)據(jù)后才更新相應(yīng)部分的內(nèi)容，而這種更新也是瞬間的，用戶幾乎感覺不到?？傊脩羰呛苊舾械模?nbsp;
他們能感覺到你對他們的體貼，雖然不太可能立竿見影的效果，但會在用戶的心中一點一滴的積累他們對網(wǎng)站的依賴。
　　3、更好的用戶體驗；
　　4、也可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，
減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和帶寬租用成本；
　　5、Ajax由于可以調(diào)用外部數(shù)據(jù)；
　　6、基于標(biāo)準(zhǔn)化的并被廣泛支持和技術(shù)，并且不需要插件或下載小程序；
　　7、Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離）；
　　8、對于用戶和ISP來說是雙盈的。
六、Ajax的問題
　　1、一些手持設(shè)備（如手機、PDA等）現(xiàn)在還不能很好的支持Ajax；
　　2、用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是讓人頭痛的事；
　　3、Ajax的無刷新重載，由于頁面的變化沒有刷新重載那么明顯，
所以容易給用戶帶來困擾――用戶不太清楚現(xiàn)在的數(shù)據(jù)是新的還是已經(jīng)更新過的；現(xiàn)有的解決有：
在相關(guān)位置提示、數(shù)據(jù)更新的區(qū)域設(shè)計得比較明顯、數(shù)據(jù)更新后給用戶提示等；
　　4、對流媒體的支持沒有FLASH、Java Applet好；
七、結(jié)束語
　　更好的Ajax應(yīng)用，需要更多的客戶端的開發(fā)，和對當(dāng)前的WEB應(yīng)用理念的思考，而且良好的用戶體驗，
來源于為處處用戶考慮的理念，而不單純是某種技術(shù)。

標(biāo)簽：棗莊蚌埠廣元衢州衡水萍鄉(xiāng) 江蘇大理

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Ajax技術(shù)(WEB無刷新提交數(shù)據(jù))》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

佳木斯湛栽影视文化发展公司

Ajax技術(shù)(WEB無刷新提交數(shù)據(jù))

QQ咨詢

電話咨詢