JavaScriptでHTMLを記述 or ページ内にphpを読み込んで表示

ボタンクリックなど、ユーザーの動作に応じてサイト内の表示を変化させる方法としては下記２つの方法があります。

1. JavaScriptでページ内のHTMLを書き換える
2. ページ内にphpファイルを読み込む

1つめのJavaScriptを使ってhtmlを書き換える方法は、書き換える範囲が少ない場合や、サーバーのデータベースからデータを読み込む必要が無い場合などに使います。サーバーにアクセスせずにユーザーのPCのみで書き換えが完結するため、表示の書き換えスピードが速く、サーバー負荷がかからないのが利点です。

2つめのphpファイルを読み込む方法は、書き換える範囲が広い場合や、サーバーのデータベースからデータを読み込む必要がある場合などに使います。サーバーの応答のタイムラグがありますが、phpファイルでテンプレートのように管理したり、データベースを使って柔軟にデータを読み込めるのが利点です。

サンプルコード

phpファイル

読み込んで表示したい内容を記述したphpファイルを用意します。phpファイルはサーバーのテンプレートファイルの付近に置きます。

下記は例です。

<?php
echo '<p>この文章は、PHPファイルを読込んで表示したサンプルです。</p>';
echo '<ul>';
echo '<li>リスト形式のテキストサンプル</li>';
echo '<li>リスト形式のテキストサンプル</li>';
echo '<li>リスト形式のテキストサンプル</li>';
echo '</ul>';

html

次にページのhtmlに加工します。phpファイルを読み込む位置に要素を用意し、onclick属性でクリックしたらphpファイルを読み込むJavaScriptを呼び出すようにします。

<p id="sample-box" onclick="sample_include_php('/wp-content/themes/lucytoruby1/files/template/sample/sample_include.php')">[ここをクリックでphpを読込]</p>

JavaScript

最後にphpファイルを読み込むJavaScriptを用意します。

引数（pathname）で読込むファイルのパスを指定していますが、こうすることによって他のphpファイルの読み込みでもこの関数を共通して使うことができます。

function sample_include_php(pathname) {
  var url = window.location.origin + pathname; //読み込むphpファイルのURL
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var element = document.getElementById('sample-box');
      element.outerHTML = xhr.responseText;
    }
  };
}

動作サンプル

下記はphpファイルの読み込みサンプルです。クリックするとphpファイルを読み込みます。

[ここをクリックでphpを読込]