勉強したことのメモ

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

  関連記事

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

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

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

jQuery.browser~みたいなエラーが出た

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

jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...

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

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

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...