一番わかりやすく簡単だったので、
を参考に使用。しかし、外部からのデータが別ドメインの場合は、クロスドメインの関係でうまく動かない。
そして下記を参考
続 クロスドメインで使う XMLHttpRequest と CORS の話
これ、例えば、お客様のサーバがデータベース使えなくて、サーバが借りれるけど、ドメインの移行も難しそうな場合。
データベースとPHPの使えるサーバで更新プログラムを動かして、ソースを作成し、
使えないサーバでjquery使って使えるサーバで生成したソースを読み込ませる。ということをしたい。
使えないサーバ
データを埋め込みたい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>
データを埋め込みたい部分に
<div id="sample01"></div>
クロスドメインなので、データを取ってきてhtmlソースを生成する、読み込まれるphpに
header('Access-Control-Allow-Origin: *');
すごく簡単に作りましたが、たぶん、ソースが読めこめなかったときの処理とか、そういうのもちゃんと書かなくてはならないと思います。
以下、2014.06.19追記
この方法は、IE9以下のブラウザでは表示しないです。
load自体は動いていますので、クロスドメインが原因かと思います。
えらい簡単だなぁ、ラッキーとか思ってたけど、簡単に考えてはいけなかったのね……。
jQueryでクロスドメインAjaxを実現する方法(jquery.xdomainajax.js)
を参考に読ませていただきました。
また、
を読ませていただきまして、次のようなスクリプトに
<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>
一応うまくいったっぽいんですが、なぜか、<dt>が<dd>に変換されてしまいます。なんでだろう……。
<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>
これだと、jquery.xdomainajax.jsなくてもうごくけど、IEだと動かない。