Ajaxについて

Question

DBから内容を取得するoutput.phpと、メインページのmain.phpがあるとします。
main.phpでは、output.phpで得られたDBの内容をページ遷移することなく表示するためにAjaxを利用します。
この時、output.phpは

1. DBの内容をHTMLに成形したものを出力
2. DBの内容を値としてmain.phpに渡し、main.php内でHTMLに成形し出力

のどちらがAjaxとして好ましい（？）動作でしょうか。

またAjaxについても勉強不足でよくわかっておりません。
間違った解釈などありましたらご指摘ください。

Answer 1

私も基本的にはblackonyxさんと同じ方法でやります。
サーバー側で、データベースから取得したデータをJSON形式に変換し(HTMLは用意しない)、クライアントへ返す。
そして、クライアント側で受信したデータを使ってHTMLを用意する。

主な理由は、HTMLをあまり書きたくないためです。
HTMLを手書きすると、HTMLの書き間違えがあったり、コードの可読性が低下したりする可能性があります。

ご存じかもしれませんが、クライアント側でJavaScriptを使えば、読みやすくかつ簡単にHTMLを用意できます。
例えば、document.createElement('div')とするだけでdivタグを持つエレメントを用意できます。
もちろんエレメントのidやclass、value、コンテンツ等も明示的にセットできます。
また、更新したい場所が複数ある場合にも、エレメントのid等を指定するだけで、簡単に対応できるのも利点です。

ただ、出力したい内容が僅かであれば、サーバー側でHTMLを用意してしまってもいいと思います。

Comments

[og24715]

回答ありがとうございます。
よければもう一つお聞きしたいのですが、
「 JavaScript を使えば読みやすいコードが容易できる 」とはどういうことでしょうか。
例えばPHPの場合、HTMLの該当箇所にinclude()など直接PHPのコード書くことで、ここには何が表示されるかなんとなく分かりますが、JavaScriptの場合はそういう記述の仕方を知りません。
なのでJavaScriptを使うとかえって分かりづらくなってしまうのではないかと思うのですがどうなのでしょうか…。
初歩的な質問ですみません。

[og24715]

HTML文中に<?php ?>タグのように<scptirt>タグでコードを書けることに気づきました
JavaScriptの勉強が足りないようです
とんちんかんな質問をしてすみませんでした…

[coba-coba]

誤解させてしまったようですみません。見ているか分かりませんが、補足を書いておきます。

main.phpにHTMLを出力する際、JavaScriptをmain.phpの該当箇所に埋め込む必要はありません。

例えば、JavaScriptを書くファイルとして、main.phpとは別にjavascript.jsというファイルを作っておきます。
javascript.jsファイルは、main.phpを読み込む際に一緒に読み込みます。

javascript.jsには、main.phpでのクライアントによる動作等(クリックしたとか、ボタンを押したとか)の検知や、その動作等に対応した処理を書きます。
また、main.phpのHTMLの指定する場所に、タグやコンテンツを追加、削除、変更することもできます。

以下、どういうことかを書いていきます。

例として、main.phpに「データベースからデータを取得して、表示する」というボタンを設置しているとします。
そのボタンを押すと、javascript.jsでは、まずそのボタンが押されたことを検知するコードを実行します。
次に、データベースからデータを取得するコードを実行。(Ajaxによるoutput.phpへのアクセス)
そして、取得したデータを出力するためのコードを実行します。

ここで、javascript.jsのコードが、main.phpにどのようにデータを出力するかが肝です。

JavaScriptでは、既に出力されているHTMLを、ページの遷移無しに書き換えることができます。
例えば、main.phpに<div id="output"></div>と書かれていたとします。
javascript.jsから、idがoutputのタグを指定して、データを書き込むことができます。

この時、javascript.jsによるmain.phpの更新部分はブラウザに即時反映されるため、クライアントにとっては、「ボタンを押したら、ページを遷移せずとも、データベースの内容が表示された」となります。

イメージし辛いかもしれませんが、参考になれば幸いです。

Answer 2

そもそも、Ajaxとはという観点で、ちょっと乱暴ですが・・・。
JavaScriptとPHP等との通信を行うことと解釈できようと思います。
その際、PHP等サーバ側からの応答内容はJavaScriptが解釈できる形式であればよいので、

1. DBの内容をHTMLに成形したものを出力

• HTMLデータを受信後、サーバ側で整形済みなので現ページにJavaScriptでそのまま挿入
• サーバ側でどこまでHTML整形するか。

1. DBの内容を値としてmain.phpに渡し、main.php内でHTMLに成形し出力

語弊があるといけませんが、main.php内でをJavaScriptにてと読み替えます。

• データはJSON形式か、JavaScriptで処理できる形式のもの。
• クライアント側のJavaScriptでデータを加工しページに反映

私の場合、サーバ側でデータをHTML化するメリット（キャッシュ効率とか）がある、もしくはサーバ側でなければ処理できない理由がある場合は1.で、その他の場合は、通常2.の方法でやっています。
Ajaxを適用するにあたり、通信回線およびサーバの負荷を軽減する方向で設計するようにしています。

Comments

[og24715]

回答ありがとうございます。
”JavaScriptにて” という捉え方で間違いありません。
クライアントとサーバーのどちらで何をするべきかをよく理解できました。