外部ドメインからjsonファイルを取得するときにはプロトコルにも注意

Webページでjsonファイルを取得して使用したいとき、jsonの場所やサーバ条件によって色々と対応が必要になる場合があり結構大変です。

今回は別ドメインのjsonを取得して表示する際、IE9以下の対応に少し手間取ったのでやったことをメモしておきます。

やったこと

jsonを配置しているサーバ側にAccess-Control-Allow-Originを設定して、ajaxで直接取得する形で実装しました。
.htaccessで設定する場合と、phpで設定する場合があります。

.htaccess

Header append Access-Control-Allow-Origin: *

PHP

<php
	header('Access-Control-Allow-Origin: *');

これでjsonサーバ側の設定は完了なので、取得に必要なファイルを読み込んで実装します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="sample.js"></script>

sample.js

$(function() {
	jQuery.getJSON('https://cly7796.net/blog/sample/use-jquery-when/sample01.json?' + parseInt((new Date)/1000), function (data) {
		alert('取得！');
	});
});

モダンブラウザはこれで問題ないのですが、IE9以下ではうまくいきませんでした。
　

IE9以下での対応

今回はIE9の対応も必要でしたので、xdr.jsというファイルを読み込ませて使用しました。

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="xdr.js"></script>
<script type="text/javascript" src="sample.js"></script>

これだけでいけると思っていたのですが、これでもIE9以下でうまくいきませんでした。

調べてみると、json側と取得側でプロトコルが違うとだめなようです。
今回はjson側がhttps、取得側がhttpで実装していたので、json側をhttpとして取得してみるとうまくいきました。
　

【参考サイト】

• IE8, IE9 環境 において jQuery で クロスドメイン通信 する方法
• jQuery – CORS：クロスドメインなAjaxでJSON / JSONPの各種ブラウザ対応まとめ – Qiita