一番わかりやすく簡単だったので、

jQuery で外部 HTML を読み込む方法

を参考に使用。しかし、外部からのデータが別ドメインの場合は、クロスドメインの関係でうまく動かない。

そして下記を参考

続 クロスドメインで使う XMLHttpRequest と CORS の話

これ、例えば、お客様のサーバがデータベース使えなくて、サーバが借りれるけど、ドメインの移行も難しそうな場合。
データベースとPHPの使えるサーバで更新プログラムを動かして、ソースを作成し、
使えないサーバでjquery使って使えるサーバで生成したソースを読み込ませる。ということをしたい。

使えないサーバ
データを埋め込みたいHTMLのヘッダーに

[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$("#sample01").load("http://データベースとphpが動くサーバー/list.php");
});
</script>
[/html]

データを埋め込みたい部分に

[html] <div id="sample01"></div>[/html]

クロスドメインなので、データを取ってきてhtmlソースを生成する、読み込まれるphpに

[php] header(‘Access-Control-Allow-Origin: *’); [/php]

すごく簡単に作りましたが、たぶん、ソースが読めこめなかったときの処理とか、そういうのもちゃんと書かなくてはならないと思います。

 

以下、2014.06.19追記

この方法は、IE9以下のブラウザでは表示しないです。
load自体は動いていますので、クロスドメインが原因かと思います。
えらい簡単だなぁ、ラッキーとか思ってたけど、簡単に考えてはいけなかったのね……。

jQueryでクロスドメインAjaxを実現する方法(jquery.xdomainajax.js)

を参考に読ませていただきました。

また、

jQuery.ajax()のまとめ

を読ませていただきまして、次のようなスクリプトに

[html] <script src="common/js/jquery.xdomainajax.js" type="text/javascript"></script>
<script>$(document).ready(function(){
$.ajax({
url: ‘http://データベースとphpが動くサーバー/list.php’,
type: ‘GET’, cache: false, // キャッシュOFF
dataType: ‘html’,
crossDomain: true, // データのロード完了時の処理
success: function(res) {
content = $(res.responseText);
$("#sample01").html(content);
}
});
});
</script>[/html]

一応うまくいったっぽいんですが、なぜか、<dt>が<dd>に変換されてしまいます。なんでだろう……。

jQueryのAjaxを使用して外部htmlを読み込む
[html]
<script>
$(document).ready(function(){
$.ajax({
url: ‘http://データベースとphpが動くサーバー/list.php’,
type: ‘GET’,
cache: false, // キャッシュOFF
dataType: ‘html’,
crossDomain: true,

// データのロード完了時の処理
success: function(res) {

$("#sample01").append(res);
}
});
});
</script>
[/html]
これだと、jquery.xdomainajax.jsなくてもうごくけど、ＩＥだと動かない。