本篇內(nèi)容介紹了“如何使用ajax和history.pushState無刷新改變頁面URL”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出光澤免費(fèi)做網(wǎng)站回饋大家。

表現(xiàn)

如果你使用chrome或者firefox等瀏覽器訪問本博客、github.com、plus.google.com等網(wǎng)站時(shí)，細(xì)心的你會(huì)發(fā)現(xiàn)頁面之間的點(diǎn)擊是通過ajax異步請(qǐng)求的，同時(shí)頁面的URL發(fā)生了了改變。并且能夠很好的支持瀏覽器前進(jìn)和后退。

是什么有這么強(qiáng)大的功能呢？

HTML5里引用了新的API，history.pushState和history.replaceState，就是通過這個(gè)接口做到無刷新改變頁面URL的。

與傳統(tǒng)的AJAX的區(qū)別

傳統(tǒng)的ajax有如下的問題：

1、可以無刷新改變頁面內(nèi)容，但無法改變頁面URL

2、為了更好的可訪問性，內(nèi)容發(fā)生改變后，通常改變URL的hash

3、hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問題！

4、進(jìn)而瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時(shí)去判斷hash是否改變

5、但這種方式對(duì)搜索引擎很不友好

6、twitter和google約定了使用#!xxx（即hash第一個(gè)字符為!），搜索引擎進(jìn)行支持。

為了解決傳統(tǒng)ajax帶來的問題，HTML5里引入了新的API，即：history.pushState, history.replaceState

可以通過pushState和replaceState接口操作瀏覽器歷史，并且改變當(dāng)前頁面的URL。

pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當(dāng)前的URL。

如何使用

復(fù)制代碼 代碼如下:

<strong >var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);</strong>

state對(duì)象除了要title和url之外，你也可以添加其他的數(shù)據(jù)，比如：還想將一些發(fā)送ajax的配置給保存起來。

replaceState和pushState是相似的，這里就不多介紹了。
如何響應(yīng)瀏覽器的前進(jìn)、后退操作

window對(duì)象上提供了onpopstate事件，上面?zhèn)鬟f的state對(duì)象會(huì)成為event的子對(duì)象，這樣就可以拿到存儲(chǔ)的title和URL了。

復(fù)制代碼 代碼如下:

window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);

這樣就可以結(jié)合ajax和pushState完美的進(jìn)行無刷新瀏覽了。
一些限制

1、傳遞的URL必須是同域下的，無法跨域

2、state對(duì)象雖然可以存儲(chǔ)很多自定義的屬性，但對(duì)于不可序列化的對(duì)象則不能存儲(chǔ)，如：DOM對(duì)象。
對(duì)應(yīng)后端的一些處理

這種模式下除了當(dāng)前使用ajax可以無刷新瀏覽外，還要保證直接請(qǐng)求改變的URL后也可以正常瀏覽，所以后端要對(duì)這些處理下。

1、對(duì)使用pushState的ajax發(fā)送一個(gè)特殊的頭，如： setRequestHeader(‘PJAX', ‘true')。

2、后端獲取到有PJAX=true的header時(shí)，將頁面中通用的部分都不輸出。比如：PHP可以通過下面的判斷

復(fù)制代碼 代碼如下:

function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

雖然接口上只有pushState、replaceState、onpopstate，但在使用的時(shí)候需要做很多的處理。

針對(duì)這個(gè)已經(jīng)寫好了一個(gè)基于jquery的插件，接下來的文章會(huì)詳細(xì)介紹如何使用pjax(ajax+pushState)進(jìn)行無刷新改變URL瀏覽。

“如何使用ajax和history.pushState無刷新改變頁面URL”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享標(biāo)題：如何使用ajax和history.pushState無刷新改變頁面URL
標(biāo)題路徑：http://www.chinadenli.net/article40/pidoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、面包屑導(dǎo)航、ChatGPT、App設(shè)計(jì)、外貿(mào)建站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)