こんにちは。荒井です。
Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね!

これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。
pjax
毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり!!SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました!!!
これからWebサービスを作るなら、導入したいですね!!!
これpjaxを使えば簡単に導入できるんです!!!よし!!!

PJAX!!

pjax!!!pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。
上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入することができます。
pjaxという名前は、URLを変更するときに使用するpushStateというメソッド名 と ajax を組み合わせたものです!!!

PJAXを導入する

githubからダウンロードして、jqueryの後で、HTMLでダウンロードしたjavascriptを読み込みます!
↓こんな感じ

pjaxのgithubを見るとREADMEにbowerを使った導入方法も書いてあります!

javascriptで更新する部分を指定する

↑こう書くと、data-pjax属性があるaタグをクリックした場合、idがpjax-containerの部分を更新するようになります。
$.support.pjaxでブラウザがpjaxに対応しているかを確認しています。

↑こう書けば、submitでもpjax使えます。

サーバ側の対応

pjaxを使ってサーバにリクエストがあると、X-PJAXというヘッダを送ります。サーバ側ではこのリクエストヘッダを確認して、X-PJAXがリクエストヘッダにある場合、レイアウト部分は返さないようにします。

railsで書くとこんな感じです!

デモ

pjaxを使った画面遷移と通常の画面遷移を比べられるようにデモを作りました!!
デモ
ソース

pjax_demo

おわり

pjaxでWebページがさくさくだ!!

The following two tabs change content below.

荒井雄治朗

Web・スマホエンジニア (2009年 入社) WEBイノベーション事業部
主に、WEBサイトやスマホアプリの構築に従事。新たな技術を積極に取り入れ、プロジェクトに貢献。テック系の情報などにも精通しており、世界で通用するスーパーハッカーを目指している。2009年、株式会社ヘッドウォータース新卒入社。 twitter: @yujiroarai qiita: @yujiroarai
このエントリーをはてなブックマークに追加