勉強したことのメモ

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="http://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="http://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_logo
jQueryで高速化

高速化について調べる機会があったのでメモ。 ------ ・セレクタはclass ...

jquery_logo
safariのみスクロール関連のイベントが発火しない

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

jquery_logo
submit関連のjQuery

<?php //jQueryでのsubmit,エンターキーでのsubmit ...

jquery_logo
adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

jquery_logo
jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

jquery_logo
jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...

jquery_logo
htmlタグが入った内容の文字を丸める

phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...

jquery_logo
jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

jquery_logo
jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

jquery_logo
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...