外部ドメインから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として取得してみるとうまくいきました。
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829