Ajax的原理:
ajax的工作原理就是通過XmlHttpRequest對象來向服務(wù)器發(fā)出異步請求八毯,從服務(wù)器中獲得數(shù)據(jù),然后用Javascript來操作DOM從而更新局部頁面牲剃。
Ajax工作流程:
Ajax通過XmlHttpRequest對象來向服務(wù)器發(fā)出異步請求,從服務(wù)器獲得數(shù)據(jù)雄可,然后用Javascript來操作DOM而更新頁面凿傅。
(1)創(chuàng)建Ajax對象(XmlHttpRequest)
(2)判斷數(shù)據(jù)的傳輸方式(get/post)
(3)打開連接open()
(4)發(fā)送send()
(5)檢測狀態(tài)
檢測XMLHttpRequest對象的readyState屬性,該屬性表示請求/響應(yīng)過程的當(dāng)前活動階段数苫,具體屬性如下:
0:未初始化聪舒。尚未調(diào)用open()方法
1:啟動。已經(jīng)調(diào)用open()方法文判,但尚未調(diào)用send()方法
2:發(fā)送过椎。已經(jīng)調(diào)用send()方法,但尚未接收到響應(yīng)
3:接收戏仓。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)
4: 完成疚宇。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)。
AJAX的優(yōu)缺點(diǎn):
優(yōu)點(diǎn):
(1)無刷新更新數(shù)據(jù).赏殃。
AJAX最大優(yōu)點(diǎn)就是能在不刷新整個頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)
(2)異步與服務(wù)器通信敷待。
AJAX使用異步方式與服務(wù)器通信,不需要打斷用戶的操作仁热,具有更加迅速的響應(yīng)能力榜揖。優(yōu)化了Browser和Server之間的溝通,減少不必要的數(shù)據(jù)傳輸抗蠢、時間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量举哟。
(3).前端和后端負(fù)載平衡。
AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端迅矛,利用客戶端閑置的能力來處理妨猩,減輕服務(wù)器和帶寬的負(fù)擔(dān),節(jié)約空間和寬帶租用成本秽褒。并且減輕服務(wù)器的負(fù)擔(dān)壶硅,AJAX的原則是“按需取數(shù)據(jù)”威兜,可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān),提升站點(diǎn)性能庐椒。
(4)界面與應(yīng)用分離椒舵。
Ajax使WEB中的界面與應(yīng)用分離(也可以說是數(shù)據(jù)與呈現(xiàn)分離),有利于分工合作约谈、減少非技術(shù)人員對頁面的修改造成的WEB應(yīng)用程序錯誤笔宿、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)窗宇。
缺點(diǎn):
(1)AJAX取消了Back和History功能措伐,即對瀏覽器機(jī)制的破壞特纤。
分析:
問題:
在動態(tài)的更新頁面的時候军俊,用戶無法回到上一個頁面的狀態(tài),因?yàn)闉g覽器只能記憶歷史記錄中的靜態(tài)頁面捧存。
解決的辦法是:
使用URL片段標(biāo)識符(通常被稱為“錨點(diǎn)”粪躬,就是URL#號后面的部分)來進(jìn)行跟蹤,允許用戶回到指定某個應(yīng)用程序的狀態(tài)昔穴。
詳解:
在動態(tài)更新頁面的情況下镰官,用戶無法回到前一個頁面狀態(tài),因?yàn)闉g覽器僅能記憶歷史記錄中的靜態(tài)頁面吗货。一個被完整讀入的頁面與一個已經(jīng)被動態(tài)修改過的頁面之間的差別非常微妙泳唠;用戶通常會希望單擊后退按鈕能夠取消他們的前一次操作,但是在Ajax應(yīng)用程序中宙搬,這將無法實(shí)現(xiàn)笨腥。
后 退按鈕是一個標(biāo)準(zhǔn)的web站點(diǎn)的重要功能,但是它沒法和js進(jìn)行很好的合作勇垛。這是Ajax所帶來的一個比較嚴(yán)重的問題脖母,因?yàn)橛脩敉窍M軌蛲ㄟ^后退來 取消前一次操作的。那么對于這個問題有沒有辦法闲孤?答案是肯定的谆级,用過Gmail的知道,Gmail下面采用的Ajax技術(shù)解決了這個問題讼积,在Gmail下 面是可以后退的肥照,但是,它也并不能改變Ajax的機(jī)制勤众,它只是采用的一個比較笨但是有效的辦法舆绎,即用戶單擊后退按鈕訪問歷史記錄時,通過創(chuàng)建或使用一個隱 藏的IFRAME來重現(xiàn)頁面上的變更决摧。(例如亿蒸,當(dāng)用戶在Google Maps中單擊后退時凑兰,它在一個隱藏的IFRAME中進(jìn)行搜索,然后將搜索結(jié)果反映到Ajax元素上边锁,以便將應(yīng)用程序狀態(tài)恢復(fù)到當(dāng)時的狀態(tài)姑食。)
但是,雖然說這個問題是可以解決的茅坛,但是它所帶來的開發(fā)成本是非常高的音半,并與Ajax框架所要求的快速開發(fā)是相背離的。這是Ajax所帶來的一個非常嚴(yán)重的問題贡蓖。
一 個相關(guān)的觀點(diǎn)認(rèn)為曹鸠,使用動態(tài)頁面更新使得用戶難于將某個特定的狀態(tài)保存到收藏夾中。該問題的解決方案也已出現(xiàn)斥铺,大部分都使用URL片斷標(biāo)識符(通常被稱為 錨點(diǎn)彻桃,即URL中#后面的部分)來保持跟蹤,允許用戶回到指定的某個應(yīng)用程序狀態(tài)晾蜘。(許多瀏覽器允許JavaScript動態(tài)更新錨點(diǎn)邻眷,這使得Ajax應(yīng) 用程序能夠在更新顯示內(nèi)容的同時更新錨點(diǎn)。)這些解決方案也同時解決了許多關(guān)于不支持后退按鈕的爭論剔交。
(2)AJAX的安全問題肆饶。
Ajax的邏輯可以對客戶端的安全掃描技術(shù)隱藏起來,允許黑客從服務(wù)器遠(yuǎn)端上建立新的攻擊岖常。還有Ajax也難以避免一些已知的安全弱點(diǎn)驯镊,諸如跨站點(diǎn)腳本攻擊、SQL注入攻擊和基于Credentials的安全漏洞等等竭鞍。
(3)對搜索引擎支持較弱板惑。
對搜索引擎的支持比較弱。如果使用不當(dāng)笼蛛,AJAX會增大網(wǎng)絡(luò)數(shù)據(jù)的流量洒放,從而降低整個系統(tǒng)的性能。
(4).破壞程序的異常處理機(jī)制滨砍。
至 少從目前看來往湿,像Ajax.dll,Ajaxpro.dll這些Ajax框架是會破壞程序的異常機(jī)制的惋戏。關(guān)于這個問題领追,曾在開發(fā)過程中遇到過,但是查了一 下網(wǎng)上幾乎沒有相關(guān)的介紹响逢。后來做了一次試驗(yàn)绒窑,分別采用Ajax和傳統(tǒng)的form提交的模式來刪除一條數(shù)據(jù)……給我們的調(diào)試帶來了很大的困難。
(5)違背URL和資源定位的初衷舔亭。
例如些膨,我給你一個URL地址蟀俊,如果采用了Ajax技術(shù),也許你在該URL地址下面看到的和我在這個URL地址下看到的內(nèi)容是不同的订雾。這個和資源定位的初衷是相背離的肢预。
(6)AJAX不能很好支持移動設(shè)備。
一些手持設(shè)備(如手機(jī)洼哎、PDA等)現(xiàn)在還不能很好的支持Ajax烫映,比如說我們在手機(jī)的瀏覽器上打開采用Ajax技術(shù)的網(wǎng)站時,它目前是不支持的噩峦。
(7)客戶端過肥锭沟,太多客戶端代碼造成開發(fā)上的成本。
編寫復(fù)雜识补、容易出錯 族淮;冗余代碼比較多(層層包含js文件是AJAX的通病,再加上以往的很多服務(wù)端代碼現(xiàn)在放到了客戶端)李请;破壞了Web的原有標(biāo)準(zhǔn)瞧筛。
AJAX注意點(diǎn)及適用和不適用場景
(1).注意點(diǎn)
Ajax 開發(fā)時,網(wǎng)絡(luò)延遲——即用戶發(fā)出請求到服務(wù)器發(fā)出響應(yīng)之間的間隔——需要慎重考慮导盅。不給予用戶明確的回應(yīng),沒有恰當(dāng)?shù)念A(yù)讀數(shù)據(jù)揍瑟,或者對 XMLHttpRequest的不恰當(dāng)處理白翻,都會使用戶感到延遲,這是用戶不希望看到的绢片,也是他們無法理解的滤馍。通常的解決方案是,使用一個可視化的組件來 告訴用戶系統(tǒng)正在進(jìn)行后臺操作并且正在讀取數(shù)據(jù)和內(nèi)容底循。
(2).Ajax適用場景
<1>.表單驅(qū)動的交互
<2>.深層次的樹的導(dǎo)航
<3>.快速的用戶與用戶間的交流響應(yīng)
<4>.類似投票巢株、yes/no等無關(guān)痛癢的場景
<5>.對數(shù)據(jù)進(jìn)行過濾和操縱相關(guān)數(shù)據(jù)的場景
<6>.普通的文本輸入提示和自動完成的場景
(3).Ajax不適用場景
<1>.部分簡單的表單
<2>.搜索
<3>.基本的導(dǎo)航
<4>.替換大量的文本
<5>.對呈現(xiàn)的操縱