Blogブログ

最近見かける事が多くなったjquery プラグイン、またgithubで使われていることで有名な、pjaxを実装してみます。 pjaxとは、pushState + ajax　を意味する造語だそう。 そしてpushStateとはHTML5で導入されたURLを操作するAPIのこと。 これを使うことで、ajaxでコンテンツを入れ替えてもページ移動が行われる→ブラウザの進む・戻るボタンが使える、PVが取れる。 さらに重複するコンテンツの読み込みがなくなるので、スムーズな遷移が実現出来て、ウェブサイトやアプリケーションなどのUX向上に繋がります。 https://github.com/defunkt/jquery-pjax 対応ブラウザは以下。 caniuse.com/#search=pushstate pushStateが実装されていない、E9以下では使えません。 まずは静的ページへ実装してみます。 静的ページ内の、#pjax-container内部のコンテンツを入れ替える想定。 サンプル Sample page jquery と、jquery.pjax.jsを読み込んでいます。 その後、mypjax.jsで実装しています。 最初は$.pjaxをコールした後にanimateするような実装だったが、コンテンツが一瞬表示されてから透過を初めてしまうケースがあったので、 animateのコールバックでpjaxするのが吉。 if ($.support.pjax) { $(document).on(‘click’, ‘a’, function(e) { e.preventDefault(); var href = $(this).attr(‘href’); $(‘#pjax-container’).animate({ opacity : 0 }, 300, function(){ $.pjax({ url: href, container : ‘#pjax-container’, fragment : ‘#pjax-container’, timeout : 2000 }); }); […]

Ajax関連メモ。 jsonpを使った場合。 var w_jsonfile = 'http://xxxxxx.jp/hoge.php'; $.ajax({ type:"POST", url:jsonfile, dataType: "jsonp", jsonpCallback: 'callback', success:function(data){ console.log(data); }, error :function(XMLHttpRequest,textStatus){ console.log(textStatus); } }); ポイントは、jsonpの場合は、jsonpCallbackパラメータが必要。 jQuery 1.5以降はこれで戻り値を指定する様になったようだ。 詳しくは、http://api.jquery.com/jQuery.ajax/ で、hoge.phpではxmlからjsonへ変換して、上に倣ってcallback()の形で返す。 $xml = "fuga.xml"; $result = simplexml_load_file($xml); $encode = json_encode($result); header("Content-Type: text/javascript; charset=utf-8"); echo sprintf("callback(%s)",$encode); これでOK。

wordpressでajax!! 個人的にはajax遷移の動きが非常に気に入っている。 Wordpressで使得時の、実装方法をまとめてみた。 僕がよくやる、ajax&PHPで仕組みを作る場合、 ・jsでトリガー ・PHP関数に値を投げる ・json形式で結果を受け取る ・jsでエレメントを描画 とゆう流れなんだが、これをWordpressでやってみる。 まず、必要なのはjs, php 今回は練習として、アーカイブページでカテゴリー検索！というのを作ってみる。 ■ Create JS onload_post_archive.jsの名前でファイルを作成。 themedir/js/に置く。 ■ Hook the action. ここで、ajax_archive_posts.phpというファイル作成。 themedir/に置くとする。 この中に、以下を記載。 // Add js add_action( ‘wp_head’, ‘add_script_for_ajax_post_archive’ ); if(!function_exists(“add_script_for_ajax_post_archive”)): function add_script_for_ajax_post_archive(){ wp_enqueue_script(‘onload_post_archive’, get_template_directory_uri(). “/js/onload_post_archive.js”); wp_localize_script(‘onload_post_archive’, ‘OLPR’, array( ‘endpoint’ => admin_url(‘admin-ajax.php’), ‘action’ => ‘get_ajax_pdf_request’ )); } endif; // Define function add_action(‘wp_ajax_get_ajax_post_archive, ‘_get_ajax_post_archive); add_action(‘wp_ajax_nopriv_get_ajax_post_archive’, […]