soohei.net

定例mtgをしていても、バスに乗っていても、話題はpjaxなので、
pjaxを勉強し直したまとめ。

クライアントサイド

・pjaxをするには、jQueryと、jQueryのpjaxライブラリを使う。

サーバーサイド

・環境はhetemlサーバー
・hetemlのサーバーはApacheなので、PHP (5.3.16)を使う。
・PHP5.4未満なので、getallheaders関数が使えない。

最初に読み込むページ (open)

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>pjax test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
    <script src="jquery.pjax.js"></script>
    <script type="text/javascript">
            $(function($){
                //時刻を出力
                $('#time').text(new Date().getTime());
                //pjaxのサポート状況を出力
                $('#pjax-support').text($.support.pjax ? 'true' : 'false');
                //リンクの動作
                $('a.pjax').click(function(e){
                    e.preventDefault();
                    $.pjax({
                        url: $(this).attr('href'),
                        container: '#content'
                    })
                });
            });
        </script>
</head>
<body>
    <div id="main">
        <h1>
            pjax test
        </h1>
        <p>
            time: <span id="time"></span><br/>
            pjax-support: <span id="pjax-support"></span>
        </p>
        <div>
            <ul>
                <li><a href="./index.php" class="pjax">top</a></li>
                <li><a href="./page1.php" class="pjax">page 1</a></li>
                <li><a href="./page2.php" class="pjax">page 2</a></li>
                <li><a href="./page3.php" class="pjax">page 3</a></li>
            </ul>
        </div>
        <div id="content">
            hello world.
        </div>
    </div>
</body>
</html>

あとから読み込むページ

<?php
$pjax = $_GET['_pjax'];
if (!$pjax) { ?>

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>page 1</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
        <script src="jquery.pjax.js"></script>
        <script type="text/javascript">
            $(function($){
                //時刻を出力
                $('#time').text(new Date().getTime());
                //pjaxのサポート状況を出力
                $('#pjax-support').text($.support.pjax ? 'true' : 'false');
                //リンクの動作
                $('a.pjax').click(function(e){
                    e.preventDefault();
                    $.pjax({
                        url: $(this).attr('href'),
                        container: '#content'
                    })
                });
            });
        </script>
    </head>
    <body>
        <div id="main">
            <h1>
                page 1
            </h1>
            <p>
                time: <span id="time"></span><br/>
                pjax-support: <span id="pjax-support"></span>
            </p>
            <div>
                <ul>
                    <li><a href="./index.php" class="pjax">top</a></li>
                    <li><a href="./page1.php" class="pjax">page 1</a></li>
                    <li><a href="./page2.php" class="pjax">page 2</a></li>
                    <li><a href="./page3.php" class="pjax">page 3</a></li>
                </ul>
            </div>
<?php } ?>

            <div id="content">

                this is page 1.

            </div>

<?php if (!$pjax) { ?>
        </div>
    </body>
</html>
<?php } ?>

2行目の処理は、
getallheaders() が使える環境では

$header = getallheaders();
$pjax = !empty($header['X-PJAX']) && ($header['X-PJAX'] == "true");

としたい。

$pjaxがtrueの時は、if分で色々除外されて、
49-53行目だけがレスポンスとして返る。
受け取った側は、 #content を、新しい #content に置き換える。

参考: PHPでpjaxる – 私の昆布

ソース一式ダウンロード

hetemlでpjax