Ajax 簡介:
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
AJAX = 異步 JavaScript和XML(標(biāo)準(zhǔn)通用標(biāo)記語言的子集)。
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容,必須重載整個(gè)網(wǎng)頁頁面。
存在問題
如果使用Firefox等瀏覽器訪問RMS網(wǎng)站時(shí),我們可能會(huì)發(fā)現(xiàn)頁面之間的切換是通過AJAX異步請求實(shí)現(xiàn)的,同時(shí)頁面的URL不會(huì)發(fā)生改變,雖然可以通過頁面上的按鈕通過AJAX異步請求實(shí)現(xiàn)回退刷新,但是對于瀏覽器前進(jìn)和后退不能支持,每當(dāng)刷新與后退之后,頁面都會(huì)退到最開始的歡迎頁面。AJAX可以實(shí)現(xiàn)頁面的局部刷新,可以做到非常好的數(shù)據(jù)加載效果,給用戶帶來非常良好的體驗(yàn),但是AJAX不能在瀏覽器的歷史會(huì)話中保留記錄,當(dāng)你點(diǎn)開一個(gè)頁面,AJAX各種數(shù)據(jù)加載非常快捷,例如一個(gè)列表頁面可以用異步加載來翻頁,但是如果用戶一不小心刷新了頁面,那么頁碼就得重新開始計(jì)算,一旦用戶改變了會(huì)話狀態(tài)(瀏覽器的前進(jìn)、后退、刷新),那么AJAX就會(huì)丟失相關(guān)的數(shù)據(jù)。
傳統(tǒng)的AJAX存在如下的問題:
1、可以無刷新改變頁面內(nèi)容,但無法改變頁面URL
2、不能支持通過網(wǎng)址直接訪問系統(tǒng)某一模塊,必須進(jìn)過點(diǎn)按操作
3、回退、刷新必須開發(fā)人員自己第一,既給開發(fā)人員增加了工作量,又不符合用戶習(xí)慣
4、進(jìn)而瀏覽器引入了onhashchange的接口,不支持的瀏覽器只能定時(shí)去判斷hash是否改變
5、但這種方式對搜索引擎很不友好
使用技術(shù)
為了解決傳統(tǒng)ajax帶來的問題,HTML5里引入了新的API,即:history.pushState,history.replaceState
可以通過pushState和replaceState接口操作瀏覽器歷史,并且改變當(dāng)前頁面的URL。
pushState是將指定的URL添加到瀏覽器歷史里,replaceState是將指定的URL替換當(dāng)前的URL。
history.pushState(state, title, url)
將當(dāng)前URL和history.state加入到history中,并把新的state和URL添加到當(dāng)前。不會(huì)造成頁面刷新。
state:與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。
title:標(biāo)題(現(xiàn)在是被忽略,未作處理)。
url:要跳轉(zhuǎn)到的URL地址,不能跨域。
history.replaceState(state, title, url)
history.replaceState()操作類似于history.pushState(),不同之處在于replaceState()方法會(huì)修改當(dāng)前歷史記錄條目而并非創(chuàng)建新的條目。
state:與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。
新聞熱點(diǎn)
疑難解答
圖片精選