一、前言web發(fā)展經(jīng)歷了一個漫長的周期，最開始很多人認(rèn)為Javascript這們語言是前端開發(fā)的累贅，是個雞肋，那個時候人們還享受著從一個a鏈接蹦到另一個頁面的web神奇魔術(shù)。后來隨著JavaScript的不斷更新?lián)Q代，他的功能不僅僅是為網(wǎng)頁添加一點特效了，語言本身的加強以及對DOM操作能力的提升讓他在前端大放光彩。尤其是ajax的出現(xiàn)，讓JavaScript以及整個web的發(fā)展翻開了嶄新的一頁。 利用ajax局部刷新頁面，相信很多人玩得相當(dāng)熟練了。如果整個頁面的刷新都是使用ajax，我們可以稱之為一個webapp，所有的邏輯都是在當(dāng)頁處理，這種形式的頁面帶來的體驗是十分不錯的，減少了那些比較“冗余”的頁面跳轉(zhuǎn)、新開頁面等。不過，webapp的代碼是十分不好維護(hù)的，頁面邏輯太多太深，出點小問題，整個頁面就會癱瘓，而且不方便定位bug，可維護(hù)性很低。 二、PJAX的實現(xiàn)與應(yīng)用1.場景再現(xiàn)-ajax弊端ajax是一個非常好玩的小東西，不過用起來也會存在一些問題。 我們可以利用ajax進(jìn)行無刷新改變文檔內(nèi)容，但是沒辦法去修改URL，有童鞋要問，這里為什么一定要修改URL呢？一個URL代表一個特定的網(wǎng)絡(luò)資源，ajax修改了頁面的內(nèi)容，所以用不同的URL去標(biāo)識他們，這個還是挺有必要的。 比如我們設(shè)計了一個單詞查詢的頁面，比較合理的UR應(yīng)該是http:///word，不同的word對應(yīng)不同的內(nèi)容，但是如果整個頁面都是ajax實現(xiàn)，我們就沒法去修改/word了，當(dāng)然我們可以使用hash如http://#word，但這樣就不能很好的處理瀏覽器的前進(jìn)和后退問題。如：在頁面中查詢了單詞A的翻譯，接著又查詢了單詞B，這個時候瀏覽器的瀏覽歷史會生成http://#A和http://#B兩個記錄，可是當(dāng)我們從B轉(zhuǎn)回A的時候，AJAX的效果還停留在B的狀態(tài)（頁面顯示的還是單詞B的翻譯）。部分瀏覽器對此問題引入了onhashchange的接口，只要URL的hash值發(fā)生變化，我們的程序就可以監(jiān)聽并做出相應(yīng)。不過對于那些木有這個接口的瀏覽器，就得定時去判斷hash的變化了。 而這樣的方式對搜索引擎是十分不友好的，twitter和google約定使用hash bang (#!xxx)，也就是hash后面的第一個字符為感嘆號，這樣的網(wǎng)址他們是會爬取的，但是其他搜索引擎不支持。PJAX可以在改變頁面內(nèi)容的同時也改變他的URL，下面來說說PJAX和他的應(yīng)用。 2.什么是PJAXhistory API中有幾個新特性，分別是history.pushState和history.replaceState，我們把pushState+AJAX進(jìn)行封裝，合起來簡單點叫，就是PJAX~ 雖說實現(xiàn)技術(shù)上沒什么新東西，但是概念上還是有所不同的。 PJAX的基本思路是，用戶點擊一個鏈接，通過ajax更新頁面變化的部分，然后使用HTML5的pushState修改瀏覽器的URL地址，這樣有效地避免了整個頁面的重新加載。如果瀏覽器不支持history的兩個新API或者JS被禁用了，那這個鏈接就只能跳轉(zhuǎn)并重新刷新整個頁面了。和傳統(tǒng)的ajax設(shè)計稍微不同，ajax通常是從后臺獲取JSON數(shù)據(jù)，然后由前端解析渲染，而PJAX請求的是一個在服務(wù)器上生成好的HTML碎片，如下圖所示：
客戶端向服務(wù)器發(fā)送一個普通的請求（1），其實也就是點擊了一個鏈接，服務(wù)器會相應(yīng)這個請求（2），返回一個html文檔。客戶端向服務(wù)器發(fā)送一個有PJAX標(biāo)志的請求（3），此時服務(wù)器只返回一個html碎片（4）。但是這兩次請求都讓客戶端的URL變化了，希望上面的說明可以讓你明白了PAJX和AJAX的區(qū)別了。 3.PJAX的實現(xiàn)先看一個小DEMO吧，這個DEMO也寫了我半個多小時，看之前先說明一下，打開你的現(xiàn)代瀏覽器（chrome，F(xiàn)irefox，opera，IE9+等），進(jìn)入gallery頁面，查看圖片的時候注意觀察瀏覽器的title和url變化，點擊前進(jìn)后退按鈕也注意查看其變化。我已經(jīng)在瀏覽歷史管理中push了三條歷史記錄。 DEMO地址：http://qianduannotes./demo/PJAX/index.html 如果你還沒有理解上面說的PJAX和AJAX的區(qū)別，看完這個demo，你應(yīng)該有所領(lǐng)悟吧！在URL變化之后，頁面并沒有刷新，而是繼續(xù)完成自己的動畫（demo中為fadeOut）。 在HTML4，Histroy對象有下面屬性方法：
在HTML5中，新增了兩個方法：
當(dāng)點擊“上一張”、“下一張”這兩個鏈接的時候，首先通過pushState修改URL以及修改document.title，那這個時候你就可以當(dāng)做文檔已經(jīng)進(jìn)入了另外一個鏈接了，然后該干什么干什么。demo中是讓圖片fadeOut，fadeOut完了之后讓瀏覽器去加載資源，這個步驟就是正常的AJAX操作啦，沒有什么特殊之處了~ 因為只準(zhǔn)備了三張圖片，所有后臺寫的也比較簡單： <?php error_reporting(false); $num = $_GET['num']; if(array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true'){ if($num == 1) { ?> <div class="imgwrap"> <img src="./images/1.jpg" /> </div> <span><a href="num=2" class="next">下一張>></a></span> <?php } else if ($num == 2) { ?> <div class="imgwrap"> <img src="./images/2.jpg" /> </div> <span><a href="num=1" class="previous"><<上一張</a> <a href="num=3" class="next">下一張>></a></span> <?php } else { ?> <div class="imgwrap"> <img src="./images/3.jpg" /> </div> <span><a href="num=2" class="previous"><<上一張</a></span> <?php } } ?> 上面那張圖中，我們看到了，并不是每個連接都使用PJAX來加載，如果有X_PJAX標(biāo)識，我們才會添加相應(yīng)的處理。js中稍加注意可以看到： $.ajax({
"url": "./interface.php",
"data": {
"num": num
},
"dataType": "html",
"headers": {
"X_PJAX": true
}
});
請求中： Accept:text/html, */*; q=0.01 Accept-Encoding:gzip,deflate,sdch Connection:keep-alive Host:qianduannotes. User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 X-Requested-With:XMLHttpRequest X_PJAX:true 我在請求的header中加了一個X_PJAX的頭，而后臺在處理的時候也做了判斷： function is_pjax(){ return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true'; } 并不是一定要求在header頭部中加入X_PJAX的信息，你也可以在url中加入相關(guān)的參數(shù)，比如:http://?pjax=1，或者其他方式，只要前后端達(dá)到一個共識就行。 三、開源的PJAX庫已經(jīng)有人對這個東西做了封裝，我就不重復(fù)造輪子了。 并不是頁面中所有的鏈接都需要使用PJAX加載，所有在需要這個東西的a標(biāo)簽上加一個屬性，如 四、注意事項
五、參考資料
本文同步自我的github pages
|
|
|
