別ドメインのJSONデータに$.ajaxでアクセスする

別ドメインのあるJSONデータに$.ajaxでアクセスするプログラムで、通常、別ドメインのJSONデータにアクセスしようとしてもクロスドメインの制約によりできないのですが、サーバー側に設定をするとできるようになります。

ただし、WebAPIを利用する場合、サーバーを設定することはできないので実際に使うことはないと思います。

json1.json（別ドメイン）

{"title":"jsonp1","description":"jsonp test"}

ajax.html

ajax.htmlから別ドメインのJSONデータ（json1.json）にアクセスするブログラムです。無事に情報を取得できるとアラートを表示します。

$(function() {
	$.ajax({
		type: 'GET',
		url:'http://example.com/json1.json',
		dataType: 'json',
	})
	.done(function(data) {
		alert(data.title);
	})
	.fail(function(data) {
		alert('error');
	});
});

上のプログラムを実行しても、たぶんエラーになります。エラーの内容にもよりますが、Access-Controll-Allow-Originとでるエラーの場合、.htaccessファイルに下記のコードを追加するとアクセスできるようになります。

Header set Access-Control-Allow-Origin "*"

あと、下のようなエラーが出た場合、$.ajaxのxhrFieldsパラメータをwithCredentials:falseにします。

……A wildcard ‘*’ cannot be used in the ‘Access-Control-Allow-Origin’ header when the credentials flag is true………

xhrFields: { withCredentials: false }