WEBサイト作成時に発生するエラーやトラブル対応の備忘録を中心に、いろいろと書いております。

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

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

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

そして下記を参考

続 クロスドメインで使う 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)

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

また、

jQuery.ajax()のまとめ

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

 <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>に変換されてしまいます。なんでだろう……。

jQueryのAjaxを使用して外部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>

これだと、jquery.xdomainajax.jsなくてもうごくけど、ＩＥだと動かない。

Tweet