勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

pjaxについてのメモ

      2014/07/02

ずっと気になっていた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.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

ダウンロード無しで外部ファイル呼び出し

■jQuery http://scriptsrc.net/ ■bootstrap ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

jQueryuiを用いてメールの入力補助(サジェスト)

autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...

プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...

lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...

jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にdro ...

jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...