2013/12/06

PHPを使ってAjax通信のクロスドメインに対応する方法

PHPで取得したデータをJavaScriptで出力する方法

Webサイトを作成している際に,他のサイトから情報を取得したいなんて場合があると思います.
しかし,Ajaxはクロスドメインに対応していないため,取得元と取得先のドメインが違うとデータの取得が行えません.

そこで,PHPを使用して,クロスドメイン問題を気にせずにデータを取得する方法を紹介します.

目次

Ajaxの欠点 クロスドメイン問題とセキュリティ

Ajaxを利用してサイト間のデータの受け渡しを行いたいと思っても,Ajaxを利用するファイルと同一ドメイン上にデータを取得したいファイルが存在していなければデータの授受が行えないという制約があります.(クロスドメイン問題)

また,ユーザーの認証データなどを渡さなければならない場合に,JavaScriptを利用すると筒抜けになってしまうため,セキュリティ的に非常に危険です.

そこで,今回紹介する方法を使ってPHPを間に挟んで通信することで,クロスドメイン問題と認証データの秘匿ができ,セキュリティ上の問題を解決できます.

※非同期通信はローカルでは動作しないので,必ずWebサーバ上で動作させてください.

サンプルに使用するデータ

Weather Hacks
では,http://weather.livedoor.com/forecast/webservice/json/v1に,任意の場所に対応した値をパラメータとして与えてアクセスすると,その場所の気象データがjson形式で取得できます.

例として,2013年12月5日の東京都の天気予報を取得・表示した結果が以下の画像になります.

動作サンプル画像

今回はこのように,データを取得して表示する方法を紹介します.

サンプルコード PHP

まず,上記のjsonデータを取得するPHPファイルを作成します.

$json = file_get_contents("http://weather.livedoor.com/forecast/webservice/json/v1?city=130010",true);
echo $json;

file_get_contents()関数は,ファイルの内容を全て文字列で読み込み,読み込みに失敗した場合にはfalseを返します.

パラメータには読み込みたいファイルのパスを指定し, 読み込んだファイルの文字列を$json変数に格納します.

この場合は東京都の場所を示すパラメータを付与したURLになっています

そして,echo文を使って$json変数を出力します.

サンプルコード JavaScript

次に,JavaScriptを利用して,このPHPファイルからデータを受け取るコードを作成します.

window.addEventListener("load", function() {
    function readXML() {
	var ele = document.getElementsByTagName("output")[0];

	var xhr = createXMLHttpRequest();

	xhr.onload = function() {
	    var data = JSON.parse(xhr.responseText);
	    console.log(data);
	    ele.innerHTML = data.title + "
"; ele.innerHTML += data.forecasts[0].date + "
"; ele.innerHTML += data.forecasts[0].telop; }; xhr.open("get", "test.php", true); xhr.send(null); } readXML(); }, false); function createXMLHttpRequest() { var XMLhttpObject = null; XMLhttpObject = new XMLHttpRequest(); return XMLhttpObject; }

Ajaxで読み込むファイルに,前項で作成したPHPファイルを指定します.(※各々の環境に合わせて変更してください)

xhr.open("get", "test.php", true);

そして,PHPから受け取ったデータをオブジェクトに変換後,HTMLとして出力します.

var data = JSON.parse(xhr.responseText);
	    ele.innerHTML = data.title + "
"; ele.innerHTML += data.forecasts[0].date + "
"; ele.innerHTML += data.forecasts[0].telop;

このように記述することで,PHPで取得したデータを受け取ることができ,上記の動作サンプル画像のような出力結果が得られます.

これらを元に,データの取得先と取得したファイルの処理を変更することで,他のデータにも対応することができます.

まとめ

今回紹介した方法を使用することで,PHPでしか取得できないデータや,ドメインが違うために取得の難しかったデータを取得し,JavaScriptに受け渡すことが出来るようになります.

どうしてもJavaScriptで別ドメインのデータを取得したい場合の一つの方法として,こういったPHPを利用したAjax通信が行えます.

頻繁に使うような技術ではないかもしれませんが,知っておくとWebサイト構築の幅が広がるので,是非使ってみてください.