pjaxもどき

最近はいろんなところで良く「pjax」を使用したサイトを見るようになりました。
ただ「pjax」はプラグインであり、実際には 「ajax」と「pushState(HTML5)」を組み合わせたものの様です。
今回はpjaxもどきを試してみたいと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            var state = '';

            function funcDispChange(pageData) {

                $.ajax({
                    type     : 'POST',
                    dataType : 'text',
                    url      : 'sample_958_' + pageData + '.txt'
                }).done(function(data) {
                    // ajax ok
                    history.pushState(state, '', 'sample_958_' + pageData + '.txt');
                    $("#main_area p").html(data);
                }).fail(function(data) {
                    // ajax error
                    $("#main_area p").html('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

            $(window).on('popstate', function(e) {
                state = e.originalEvent.state;
            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">
            <h1>Page Title</h1>

            <div id="header_area">
                <p>Head Area</p>
                <p>
                    <a href="javascript:void(0);" onclick="funcDispChange(1);">Click Link 1</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(2);">Click Link 2</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(3);">Click Link 3</a><br />
                </p>
            </div>

            <div id="main_area">
                <p>Main Area</p>
            </div>

            <div id="footer_area">
                <p>Foot Area</p>
            </div>

        </div>

    </body>
</html>

sample

sample では link を click するとページが変わります。
その際に URL は変更されており、ページもスムーズに入れ替わります。

実際のサイトを作成する時には pjax のプラグインを使用する形だと思います。
すでに複数の Plugin も作成されていますからね・・・

それでも今回の内容を自分でやってみるのは結構面白かったですね。
こういった内容をやるとWebサイトの進歩を感じます。
本当に HTML5 など凄いものですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です