pushState + Ajax = pjax
マークアップ・エンジニアのトメです。 html5で実装されたhistroy操作のAPIに「pushState」という機能があります。 固有スキルは「ブラウザの履歴を操作することができる。ただしIE9以下は除外される」です。 実はこの機能、ある技術と組み合わせて発動させることによってその力を最大限に発揮することができるのです。 その唯一無二のパートナーは「ajax」。 ajaxは言わずと知れた非同期通信を利用した対話的操作が可能なWebアプリケーション構築技術の総称。 つまりはページを移動しなくてもブラウザの後ろ側でデータを取ってきて、そのデータを元に表示が切り替わって何かすごい、みたいなやつですね。 ですが、そんなajaxにも大きな弱点があります。 それは「ページ遷移が行われない為ブラウザの履歴が残せない（URLがそのまま）」ということ。 「pushState」はそんな「ajax」の弱点を
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
