2016.1.2
0からはじめるPHP#68【Ajax#2-PHPファイルの遅延ロード-】
前回に引き続きAjaxの話です。
ちゃんと動くサンプルプログラムが書けたので、まずはそれを見てみましょう。
<script>
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url: "{{url('php/ajax.php')}}",
dataType: 'jsonp',
data: {
zip: "a"
},
//jsonp: 'callback',//ここでcallbackの変数名を変えられる
success: function( data ) {
alert(data);
},
error: function() {
alert('error');
}
});
});
});
</script>
<input type="button" id="button" value="Hello" /></form>
$zipno = $_GET["zip"];
header( 'Content-Type: text/javascript; charset=utf-8' );
echo $_GET['callback'] . "(" . json_encode($zipno). ")";
ajaxでサーバーのphpを呼び出してJSONデータを受け取る方法を参考に、ちょっと変えたプログラムです。
やってることはボタンを押すと「a」というアラートが表示されるというjavascript単体で余裕で出来るゴミですが、これがAjax通信の基本中の基本です。
ちなみに$zipnoの部分を別のものに･･････例えば普通に文字列で「"あいうえお"」としたらちゃんと反映されるので、通信が上手く行ってることが分かります。
つまり実行結果を受け取れば、それをappendで表示させる、というプログラムが書けるわけですね。 ちなみにヘッダーはなくても動くんですが、あった方が良さそうですよね。
解説すべきところは実はそんなない、というか見たら分かると思いますが、少しだけ補足説明を。
|
dataType: 'jsonp' jsonp: 'callback' |
まずjQueryの方で大事そうなのはこいつらですね。
データタイプをjsonpではなくjsonにしてしまうと送信はできるが受信ができないことになるそうです。
そして、callbackなんですが、これはPHPの方に絡んできます。
| 【$_GET["callback"]】("送信データ"); |
jsonpデータは上のような書式のレスポンスを期待しています。括弧は忘れられやすいので太字にしています。この書式を守らないとwas not calledエラーが出てきます。
ちなみに中身は数字の羅列です。
このcallbackはgetメソッドで送信されているようですが、特に指定しなければデフォルトで「callback」という名前になるんですね。特に理由がなければデフォルトのまま使うべきです。
ただ、何らかの事情があってcallbackという変数名を使えない場合、jQueryの方で名前を変えられるわけですね。
例えばjsonp:"aiueo"とすると、callback変数名が「"aiueo"」となるわけです。単純ですね。
あとはこれをいい感じにいじいじすれば望むシステムを構築できそうですね。
しかしtwitterのソースを見ていると、実はjavascriptでhtml構築してないんですね。
jsファイルの中身とかも含めて検索したんですけど、divのclass要素の名前が一切出てこなかったんですよ。
これはつまりjavascript以外のファイルでHTML出力しているということに他ならないんですよね。つまりサーバーサイドのHTMLがそのまま読み込める、と。
どうすればいいんだ･･････？と調べた所こんなページ見つけました。
ではサンプルプログラムを動かしてみます。
<div id="aaa"></div>
<script>
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url: "{{url('php/ajax.php')}}",
success: function( data ) {
jQuery("#aaa").append(data);//html()で挿入になる
},
error: function() {
alert("error");
}
});
});
});
</script>
<input type="button" id="button" value="Hello" /></form>
あかさたなはまやらわ
なんとjsonpでデータのやり取りをせずとも実行結果のHTMLをそのまま表示させることが可能なわけです。
つまりこれを使っていい感じにロジックを組み立てれば･･････お望みのものが作れそうですね！！！
ただ、ここでもう一つ気になることが。Bladeテンプレート使いたいなぁ。
とりあえず、直接表示することは不可能なので、もう少し考える必要があります。
あと、データベースへの接続が必要なものの、現状では生のPHPでしか書けないんですよね。
普通にコントローラーに接続しようとすると、謎の500エラーを吐きます。getメソッドなんだけどなぁ･･････。別にクロスドメインじゃないのになんで蹴られるんだろう･･････。
ちょっと原因解明に時間がかかりそうです。最悪生で書けばいいんですけど、せっかくフレームワーク使ってるんだしフレームワーク使ったほうが良いですよね。セキュリティ的な意味でも、管理しやすさという意味でも。
>>
上の話を見て、思い出すことってありませんか。
これを使えば挫折した過去記事読み込み機能を実装できるんじゃありません？
ということで試してみます。
バグりましたけど出来ました。
直接読み込むと、まぁ当然っちゃ当然なんですがトップページで表示してるか否かを判定している変数が引き継がれないので、別のphpファイルを介してincludeする必要がありそうです。
別に別のファイルを介さなくても実装はできると思うんですが、互換性が完全に失われるので･･････。アクセス1回増えたところで負荷はそんなかかんないっしょ笑
構成としては、getパラメータで変数を渡して、それを参照して表示するページを決定する･･････って感じですかね。
なんか簡単に作れそうなんで作っちゃいましょうか。
ということで、作ってみました。実際はそんな簡単には行きませんでしたが、まぁ何とか実装できました。
ただSyntaxHilighterが無効になるので、ソースコードをちゃんと見たい方はログから見て下さいって感じですね。色々頑張ったんですがどうもjavascript絡みの問題が発生してる気がします。分からないので諦めました。（笑）
ちなみに、非公開記事とかファイルがなくて日が飛んでるとかにもちゃんと対応してるので多分バグりませんが、2014年に突入するとファイルの場所が違うので読み込みが止まりますが、そこまで遡る人はいないので対応はしてません。(笑)
あ、もしかしたら言ってなかったかも知れませんが、うちの日記にはちょいちょい非公開にしてる記事が存在していたりします。
具体的に言うと書き記しておきたいけど、時効になるまで人には言いたくないといった類の話ですね。
特に印とかはつけてないので、恐らく僕が言わない限りは気づかれることがないとは思うのですが、忘れた頃に過去ログなんかを漁ってみると、新しい発見があるかもね･･････？という遊び心です。（笑）
ちなみに、全部phpで自動化してるので僕自身もたぶん忘れてます。←
ただ、10年や20年経った時、あぁそういやそんなこともあったな･･････と唐突に思い出して、見れたらいいな、と。
皆さんも興味があったら、この話を覚えておくと、本当の意味での「見てはいけない黒歴史」が見れるかも知れませんよ。（笑）
ちなみに、この技術を使って一部の画像などは、時期が来たら増えたりモザイクが取れたりするものもあるので、興味があればいつか探してみてね。←