一番わかりやすく簡単だったので、
を参考に使用。しかし、外部からのデータが別ドメインの場合は、クロスドメインの関係でうまく動かない。
そして下記を参考
続 クロスドメインで使う 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)
を参考に読ませていただきました。
また、
を読ませていただきまして、次のようなスクリプトに
[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なくてもうごくけど、ＩＥだと動かない。
コメントを残す