勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

pjaxについてのメモ

   2014/07/02  jQuery

ずっと気になっていたpjaxについてのメモ。

■参考サイト
http://chibinowa.net/notebook/js/pjax-fragment.html

pushStateとajaxをあわせたpjax。

■メリット
・ajaxと同様で高速、サーバーに優しい
・ajaxはSEOに弱いという面を持っていたが、
pjaxだとURLやソースの中身も変えることができるのでその点を克服。
・モダンブラウザしか使えないが、使えないブラウザだと普通に
ページ遷移で表示してくれる。

■デメリット
・モダンブラウザしか使えない。IEだと10未満はNGとか。

■サンプル
http://sample.taitan916.info/pjax/

■ソース
・index.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.pjax.js"></script>
<script>
$(function(){
$('#loading').hide();
$(document).pjax('a.pjax', {
container:'#content',
fragment: '#content'
});
$(document).on('pjax:send', function() {
$('#loading').show();
})
$(document).on('pjax:complete', function() {
$('#loading').hide();
})
});
</script>
<title>jQuery</title>
</head>
<body>
<div id="wrapper">
<header>
<div id="header_inner">
<h1>pjax</h1>
</div>
</header>
<section id="content">
<ul class="links clearfix">
<li>page1</li>
<li><a href="index2.php" class="pjax">page2</a></li>
</ul>
<div id="mainArea">
<p><img src="./image/1.jpg"></p>
</div>
</section>
</div>
</body>
</html>

・index2.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.pjax.js"></script>
<script>
$(function(){
$('#loading').hide();
$(document).pjax('a.pjax', {
container: '#content',
fragment: '#content'
});
$(document).on('pjax:send', function() {
$('#loading').show();
})
$(document).on('pjax:complete', function() {
$('#loading').hide();
})
});
</script>
<title>jQuery</title>
</head>
<body>
<div id="wrapper">
<header>
<div id="header_inner">
<h1>pjax</h1>
</div>
</header>
<section id="content">
<ul class="links clearfix">
<li><a href="index.php" class="pjax">page1</a></li>
<li>page2</li>
</ul>
<div id="mainArea">
<p><img src="./image/2.jpg"></p>
</div>
</section>
</div>
</body>
</html>

 

//追記

SEO対策でhead内、特にmetaを変えられないか調べたところ

不恰好だけと出来た。

 

$(document).on('pjax:end', function() {
if ($("meta[name=keywords]").attr('content') == '2ページ目です。') {
$("meta[name=keywords]").attr('content', '1ページ目です。');
} else {
$("meta[name=keywords]").attr('content', '2ページ目です。');
}
});

 

サンプルも書き換え済み。

 - jQuery

  関連記事

スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

日本地図のクリッカブルマップをjQueryで実装する方法(japan-map)

JavaScriptもしくはjQueryで日本地図を表示し、都道府県や八地方区分 ...

jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...