PJAXが動かない

###前提・実現したいこと
PJAXを使おうとしたのですが、
全く動いてくれません。
他のJSなどが邪魔をしているのかと思い
すごいシンプルなコードにしてみても、
ie,chrom,Firefoxで試しましたが全てだめです。
要素を検証しても一切エラーが出ません。
一体なにが間違っているのでしょうか？

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
7
8  <script src="js/jquery.pjax.min.js"></script>
9<style>
10  #main{
11    background: red;
12  }
13</style>
14</head>
15<body>
16  aaaaaaa
17  <div id="main"><a href="2.html">aaaaaa</a></div>
18  <script>
19  $(function() {
20  $.pjax({
21      area: '#main'
22  });
23  });
24  </script>
25
26</body>
27</html>
28

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6
7</head>
8<body>
9  <div id="main"><a href="index.html">bbbbbb</a></div>
10</body>
11</html>

行動規範の内容に同意します

回答1件

ベストアンサー

ローカル（ブラウザへファイルをドラッグするだけ）で試しているのではありませんか？
提示されているコードで普通に動きますね…。

一応参考までに画像も載せておきます。

（ちゃんとXHRのレスポンスが返ってきます。※pjaxに失敗するとこのタブはリフレッシュされるので空になります）
pjaxはhttpサーバー上でし機能しないはずなので、ローカル開発環境（仮想サーバーを立てるなりしたもの）かサーバーにアップするなりしないとテストできません。

また、ちょっと細かいところですが、
pjaxとajaxはある意味別物なので、ajaxが理解できている＝pjaxもOKという訳でもありません。（pjaxではhistoryなどが絡んだりetc...）
タグを分けたほうが良いかも、と思います。

追記

※訂正
「ajaxが絡むもの」と当初書いていましたが、誤りです…
そういえばchrome以外はajaxでローカルファイルにアクセスできましたね…。

あと、提示されている2つめのhtmlだとjquery pjaxも読み込まれておらず、何のイベントも設定されていないので、2つめのhtmlから一つ目のhtmlへアクセスした際は必ずpjaxではなく通常の遷移になります。（1つ目から2つ目はpjaxで遷移）
もしどちらからでもpjaxさせたければ、行き来するファイルにはpjaxの読み込みとイベントの設定が必要です。

投稿2016/04/24 13:00

編集2016/04/25 13:59

manabufukai

総合スコア700

kihara

2016/04/26 23:46

サーバーにアップしたら出来ました。ローカルでもchrome以外なら平気なはずなのに、なんで出来なかったのでしょうかね？

manabufukai

2016/04/27 12:28 編集

回答にも書いてある通り『pjaxはhttpサーバー上でしか機能しない』です。ローカルファイルのままでは必ず通常の遷移になります。 pjaxは内部でサーバーからのレスポンスによる処理分岐があります。つまるところApacheなどのサーバーと通信しなければ所謂pjaxを行いません。実際どういった仕組みになっているかを知りたければ、プラグインのコードを読んでみると良いと思います。

行動規範の内容に同意します