黃聰：初識Pjax：pjax是什麼

據說博主再也不折騰wordpress了，陌小雨仍是轉載到網站作個備份吧，萬一哪天沒有了呢。陌小雨以爲講的挺清楚的，小白都能懂。

pjax是 pushstate + ajax，分別百度能夠獲得相關資料，在此就不贅述了。

Ajax

ajax直白的理解就是請求一個連接所指向的頁面的其中一部分來替換當前頁面的一部分，好比我用的wordpress，典型的博客頁面，有頁面頭部、主體部分、側欄部分、頁面底部四個主要部分。
ajax請求的過程是如何的呢？好比我如今打開的是頁面A，頁面A中有一個a標籤，正常狀況下點擊a標籤的連接會打開一個頁面B，那麼整個頁面A就會被替換成頁面B。然而，頁面A和頁面B有些結構是徹底同樣的，好比頭部，底部，甚至是側欄，其實要替換的僅僅是主體部分而已，ajax就提供了這樣一個功能，它控制你在點擊a標籤的連接時，只抓取頁面B的主體部分來替換頁面A的主體部分，而頭部、底部、側欄不用替換（也就不用刷新）。

PushState

以上是最直白的理解，而pushstate則是幹嗎的？HTML5裏引用了新的API，history.pushState和history.replaceState，就是經過這個接口作到無刷新改變頁面URL的。由於用ajax替換局部頁面時，瀏覽器的地址是不會改變的，你替換爲頁面B的主體，地址欄的url仍是頁面A的，並且點擊瀏覽器的後退或前進按鈕地址欄url也是不會改變的，pushstate的做用則用來改變地址欄url的狀態。

那麼PJAX就是以上二者的結合。

開始咱們必須對 被請求的頁面進行請求前的處理，這個處理很是重要，若是把被請求的頁面想象成一張圖片，那麼這個處理就至關於對圖片進行剪裁，沒有處理以前，被請求的頁面B是完整的，請求過來就首先要預讀取一邊頁面B，而其實咱們沒必要要將整個頁面都讀取，咱們只須要讀取主體部分，因此咱們能夠把頭部、側欄和底部都先剪掉，只剩下主體部分，而後再請求過來替換頁面A中的主體部分。
這個剪裁的方法以下：

在對應的php頁面進行

1. <?php if( $_GET['ajx'] != 'container' ) { >
2.  
3. //被剪裁掉的部分，好比：
4. //<?php get_header(); ?>
5. //<?php get_sidebar(); ?>
6. //<?php get_footer(); ?>
7.  
8. <?php } >

這個方法很是重要，包括評論分頁也須要這樣的處理，對pjax的速度是一大影響。瞭解了這個其實剩下的只須要把剩下的代碼超過去就能夠了。固然，你不剪裁也是能夠的，那也能夠替換，但那就不算是真正的ajax了。目前大多數pjax的代碼都不會有這樣的處理。下面一篇是pjax的核心代碼以及一些說明。

普及一點關於ajax的知識：

• 什麼狀況適合作全站Ajax？

你的主題結構比較簡單，除了內容框會變化，其餘側欄，頂部，底部都是固定的內容。你的Wordpress不使用不少修飾類插件（考慮到兼容性）、不使用緩存插件。

• 作了全站Ajax有什麼好處？

沒必要再重複加載固定內容的側欄、頂部、底部、背景圖、各類JS、CSS、加快載入速度。

要騷一點的，在側欄加個播放音樂的功能，嘿，頁面無刷新就不會把音樂刷停了，除非瀏覽者主動點擊中止播放。（這個是不少人折騰ajax的一個出發點呀）

• 我應該折騰ajax麼，我須要懂哪些知識？

要折騰起來，你自己仍是得有必定的基礎，類C語言的基礎，HTML的基礎，jQuery選擇器，PHP……若是你一點基礎都沒有，那仍是別折騰了，就像境界還達不到卻硬要去練高層次的內功心法，走火入魔毀一輩子啊！

參考文章：http://www.inlojv.com/how-to-use-pjax-1.html

http://darkhandz.com/wordpress_site_in_ajax_1